DataGrid : Customizing filter modes for individual columns (#5128)

* Able to set FilterMode per column * Release notes * Code Review | Update Source/Extensions/Blazorise.DataGrid/DataGrid.razor Co-authored-by: Mladen Macanović <[email protected]> * Docs | DataGridColumn | Add FilterMode --------- Co-authored-by: Mladen Macanović <[email protected]>
Megabit · Nov 11, 2023 · b7d87be · b7d87be
1 parent 345dab2
commit b7d87be
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/FilterColumn.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/FilterColumn.razor
@@ -16,10 +16,10 @@
                           FilterMode="DataGridFilterMode.Menu">
                     <DataGridColumns>
                         <DataGridNumericColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="60px" Filterable />
-                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name" Filterable>
+                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name" FilterMode="DataGridFilterMode.Default" Filterable>
                         </DataGridColumn>
-                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" Filterable />
-                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" Caption="Email" Filterable />
+                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" FilterMode="DataGridFilterMode.Default" Filterable />
+                         <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" Caption="Email" FilterMode="DataGridFilterMode.Default" Filterable />
                         <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" Caption="City" Filterable>
                             <CaptionTemplate>
                                 <Icon Name="IconName.City" /> @context.Caption
@@ -29,7 +29,7 @@
                         </DataGridColumn>
                         <DataGridDateColumn TItem="Employee" Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable Filterable />
                         <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" Editable Filterable />
-                        <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
+                         <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data=" EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" FilterMode="DataGridFilterMode.Default" />
                         <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Editable Width="140px" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" TextAlignment="TextAlignment.End" >
                         </DataGridNumericColumn>
                         <DataGridCheckColumn TItem="Employee" Field="@nameof(Employee.IsActive)" Caption="Active" Editable Filterable>

diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/DataGridApiPage.razor b/Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/DataGridApiPage.razor
@@ -494,6 +494,10 @@
         Defines the caption to be displayed for a group header.
         If set, all the column headers that are part of the group will be grouped under this caption.
     </DocsAttributesItem>
+    <DocsAttributesItem Name="FilterMode" Type="DataGridFilterMode" Default="DataGridFilterMode.Default">
+        Gets or sets the filter mode for the column.
+        If set, this overrides the DataGrid FilterMethod.
+    </DocsAttributesItem>
 </DocsAttributes>
 
 <Heading Size="HeadingSize.Is3">

diff --git a/Documentation/Blazorise.Docs/Pages/News/2023-11-30-release-notes-140.razor b/Documentation/Blazorise.Docs/Pages/News/2023-11-30-release-notes-140.razor
@@ -113,6 +113,10 @@
     It is of note that <Code>Tab </Code> and <Code>Shift+Tab</Code> will also work as expected. Whenever the user presses these keys, the cell will be saved and the next or previous cell will be selected.
 </Paragraph>
 
+<Paragraph>
+    The <Code>FilterMode</Code> is now configurable per column. If set it will override the DataGrid's <Code>FilterMode</Code> setting per column.
+</Paragraph>
+
 <NewsPageSubtitle>
     Tabs
 </NewsPageSubtitle>

diff --git a/Source/Extensions/Blazorise.DataGrid/DataGrid.razor b/Source/Extensions/Blazorise.DataGrid/DataGrid.razor
@@ -46,7 +46,7 @@
                                     }
                                     else
                                     {
-                                        @HeaderGroupCaptionTemplate( new HeaderGroupContext( column.HeaderGroupCaption) )
+                                        @HeaderGroupCaptionTemplate( new HeaderGroupContext( column.HeaderGroupCaption ) )
                                     }
                                 </TableHeaderCell>
                             }
@@ -121,7 +121,7 @@
                                             }
                                         }
 
-                                        @if ( Filterable && column.Filterable && FilterMode == DataGridFilterMode.Menu )
+                                        @if ( Filterable && column.Filterable && ( column.FilterMode.HasValue && column.FilterMode == DataGridFilterMode.Menu ) || ( !column.FilterMode.HasValue && FilterMode == DataGridFilterMode.Menu ) )
                                         {
                                             <_DataGridMenuFilter Column="column" />
                                         }
@@ -131,7 +131,7 @@
                         }
                     </TableRow>
                 }
-                @if ( Filterable && FilterMode == DataGridFilterMode.Default )
+                @if ( Filterable && ( FilterMode == DataGridFilterMode.Default || DisplayableColumns.Any( x => x.FilterMode == DataGridFilterMode.Default ) ) )
                 {
                     <TableRow Class="@FilterRowStyling?.Class" Style="@FilterRowStyling?.Style" Background="@(FilterRowStyling?.Background ?? Background.Default)" Color="@(FilterRowStyling?.Color ?? Color.Default)">
 
@@ -166,7 +166,7 @@
                                     </TableHeaderCell>
                                 }
                             }
-                            else
+                            else if ( ( column.FilterMode.HasValue && column.FilterMode == DataGridFilterMode.Default ) || ( !column.FilterMode.HasValue && FilterMode == DataGridFilterMode.Default ) )
                             {
 
                                 <TableHeaderCell Class="@column.FilterCellClass" Style="@column.BuildFilterCellStyle()" TextAlignment="@column.FilterCellTextAlignment" VerticalAlignment="@column.FilterCellVerticalAlignment" Display="@column.FilterCellDisplay" Background="@column.FilterCellBackground" Flex="@column.FilterCellFlex" Gap="@column.FilterCellGap">
@@ -194,6 +194,10 @@
                                     }
                                 </TableHeaderCell>
                             }
+                            else
+                            {
+                                <TableHeaderCell Class="@column.FilterCellClass" Style="@column.BuildFilterCellStyle()" TextAlignment="@column.FilterCellTextAlignment" VerticalAlignment="@column.FilterCellVerticalAlignment" Display="@column.FilterCellDisplay" Background="@column.FilterCellBackground" Flex="@column.FilterCellFlex" Gap="@column.FilterCellGap"></TableHeaderCell>
+                            }
                         }
                     </TableRow>
                 }
@@ -266,7 +270,8 @@
                 @if ( IsLoadingTemplateVisible )
                 {
                     <_DataGridFullColumnSpanRow TItem="TItem" Columns="@Columns" RenderUpdates>
-                        @LoadingTemplate
+                         @LoadingTemplate
+
                     </_DataGridFullColumnSpanRow>
                 }
             </TableBody>

diff --git a/Source/Extensions/Blazorise.DataGrid/DataGridColumn.cs b/Source/Extensions/Blazorise.DataGrid/DataGridColumn.cs
@@ -802,5 +802,11 @@ public SortDirection CurrentSortDirection
     /// </summary>
     [Parameter] public string HelpText { get; set; }
 
+    /// <summary>
+    /// <para>Gets or sets the filter mode for the column.</para>
+    /// <para>If set, this overrides the <see cref="DataGrid{TItem}.FilterMethod" />.</para>
+    /// </summary>
+    [Parameter] public DataGridFilterMode? FilterMode { get; set; }
+
     #endregion
 }