Add CaptionTemplate to DataGrid column header (#1085)

* - Add CaptionTemplate - Extend dcoumentation - Add example at DataGridPage * Formating * Use Blazorise Icon * Fixed comments Co-authored-by: Denis S <ds457397@fh-muenster.de> Co-authored-by: Mladen Macanović <mladen.macanovic@gmail.com> Co-authored-by: Mladen Macanovic <mladen.macanovic@pebble.tv>
Megabit · Jul 6, 2020 · a742b1d · a742b1d
1 parent 60224c5
commit a742b1d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor
@@ -119,6 +119,9 @@
                         <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" Editable="true" />
                         <DataGridColumn TItem="Employee" Field="@nameof( Employee.EMail )" Caption="EMail" Editable="true" PopupFieldColumnSize="ColumnSize.IsFull.OnDesktop" />
                         <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" Caption="City" Editable="true">
+                            <CaptionTemplate>
+                                <Icon Name="IconName.City" /> @context.Caption
+                            </CaptionTemplate>
                             <FilterTemplate>
                                 <Select TValue="string" SelectedValueChanged="@(e => context.TriggerFilterChange(e == "*" ? "" : e.ToString()))">
                                     <SelectItem Value="@("*")">All</SelectItem>

diff --git a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor
@@ -27,7 +27,14 @@
                             <TableHeaderCell Class="@column.HeaderCellClass" Style="@($"{column.HeaderCellStyle}{(Sortable ? " cursor: pointer" : "")}")" Clicked="@(async () => await OnSortClicked( column ) )" width="@column.Width">
                                 @if ( column.ShowCaption )
                                 {
-                                    @column.Caption
+                                    @if ( column.CaptionTemplate != null )
+                                    {
+                                        @column.CaptionTemplate( column )
+                                    }
+                                    else
+                                    {
+                                        @column.Caption
+                                    }
                                 }
                                 @if ( Sortable && column.Sortable && column.CurrentDirection != SortDirection.None )
                                 {

diff --git a/Source/Extensions/Blazorise.DataGrid/DataGridColumn.cs b/Source/Extensions/Blazorise.DataGrid/DataGridColumn.cs
@@ -135,10 +135,15 @@ public string FormatDisplayValue( TItem item )
         public virtual DataGridColumnType ColumnType { get; } = DataGridColumnType.Text;
 
         /// <summary>
-        /// Gets or sets the column's display caption
+        /// Gets or sets the column's display caption.
         /// </summary>
         [Parameter] public string Caption { get; set; }
 
+        /// <summary>
+        /// Gets or sets the column's display caption template.
+        /// </summary>
+        [Parameter] public RenderFragment<DataGridColumn<TItem>> CaptionTemplate { get; set; }
+
         /// <summary>
         /// Filter value for this column.
         /// </summary>

diff --git a/docs/_docs/extensions/datagrid.md b/docs/_docs/extensions/datagrid.md
@@ -545,7 +545,7 @@ Specifies the grid editing modes.
 | Name                      | Type                                                                | Default             | Description                                                                                                   |
 |---------------------------|---------------------------------------------------------------------|---------------------|---------------------------------------------------------------------------------------------------------------|
 | Field                     | string                                                              |                     | TItem data field name.                                                                                        |
-| Caption                   | string                                                              |                     | Column's display caption.                                                                                     |
+| Caption                   | string                                                              |                     | Column's display caption. It will be displayed, if ColumnTemplate is not set.                                 |
 | Filter                    | FilterContext                                                       |                     | Filter value for this column.                                                                                 |
 | Direction                 | SortDirection                                                       | `None`              | Column initial sort direction.                                                                                |
 | TextAlignment             | TextAlignment                                                       | `None`              | Defines the alignment for display cell.                                                                       |
@@ -570,4 +570,5 @@ Specifies the grid editing modes.
 | EditTemplate              | `RenderFragment<CellEditContext>`                                   |                     | Template for custom cell editing.                                                                             |
 | FilterTemplate            | `RenderFragment<FilterContext>`                                     |                     | Template for custom column filter rendering.                                                                  |
 | PopupSize                 | [ModalSize]({{ "/docs/helpers/sizes/#modalsize" | relative_url }})  |  `Default`          | Defines the size of popup modal.                                                                              |
-| PopupFieldColumnSize      | `IFluentColumn`                                                     |  `IsHalf.OnDesktop` | Defines the size of field for popup modal.                                                                    |
+| PopupFieldColumnSize      | `IFluentColumn`                                                     |  `IsHalf.OnDesktop` | Defines the size of field for popup modal.                                                                    |
+| CaptionTemplate           | `RenderingFragment<DataGridColumn<TItem>>`                          |                     | Template for custom caption. CaptionTemplate will block caption template.                                     |