DataGrid will allow mixed Simple and SimpleWithMenu modes per column

radzenhq · Aug 30, 2024 · 18bfa8f · 18bfa8f
1 parent a76a081
commit 18bfa8f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/Radzen.Blazor/RadzenDataGrid.razor b/Radzen.Blazor/RadzenDataGrid.razor
@@ -143,7 +143,7 @@
                             }
                         </tr>
                     }
-                    @if (AllowFiltering && (FilterMode == FilterMode.Simple || FilterMode == FilterMode.SimpleWithMenu) && columns.Where(column => column.Filterable && (!string.IsNullOrEmpty(column.GetFilterProperty()) || column.FilterTemplate != null)).Any())
+                    @if (AllowFiltering && (visibleColumns.Any(c => c.FilterMode == FilterMode.Simple || c.FilterMode == FilterMode.SimpleWithMenu) || FilterMode == FilterMode.Simple || FilterMode == FilterMode.SimpleWithMenu) && columns.Where(column => column.Filterable && (!string.IsNullOrEmpty(column.GetFilterProperty()) || column.FilterTemplate != null)).Any())
                     {
                         <tr @onkeydown:stopPropagation>
                              @if (ShowGroupExpandColumn)
@@ -163,6 +163,7 @@
                             }
                             @foreach (var column in visibleColumns)
                             {
+                                var filterMode = column.FilterMode ?? FilterMode;
                                 <th colspan="@column.GetColSpan()" class="@($"rz-unselectable-text {getFrozenColumnClass(column, visibleColumns)} {column.HeaderCssClass}")" scope="col" style="@column.GetStyle(true, true)">
                                     @if (AllowFiltering && column.Filterable && column.Columns == null && (!string.IsNullOrEmpty(column.GetFilterProperty()) || column.FilterTemplate != null))
                                     {
@@ -177,7 +178,7 @@
                                                     <span class="rz-cell-filter-label" style="height:35px; width:100%;" onclick="event.preventDefault()">
                                                         @if (PropertyAccess.IsDate(column.FilterPropertyType))
                                                         {
-                                                            if (FilterMode == FilterMode.Simple)
+                                                            if (filterMode == FilterMode.Simple)
                                                             {
                                                                     <button aria-label="@FilterToggleAriaLabel" class="rz-button rz-button-md rz-button-icon-only rz-variant-flat rz-base rz-shade-default" onclick="@($"Radzen.togglePopup(this.parentNode, '{PopupID}{column.GetFilterProperty()}')")">
                                                                     <i class="rzi">date_range</i>
@@ -297,7 +298,7 @@
                                                         }
                                                         else if (PropertyAccess.IsNumeric(column.FilterPropertyType))
                                                         {
-                                                            if (FilterMode == FilterMode.SimpleWithMenu)
+                                                            if (filterMode == FilterMode.SimpleWithMenu)
                                                             {
                                                                 <RadzenDataGridFilterMenu Grid="@this" Column="@column" />
                                                             }
@@ -311,7 +312,7 @@
                                                         }
                                                         else
                                                         {
-                                                            if (FilterMode == FilterMode.SimpleWithMenu)
+                                                            if (filterMode == FilterMode.SimpleWithMenu)
                                                             {
                                                                 <RadzenDataGridFilterMenu Grid="@this" Column="@column" />
                                                             }

diff --git a/RadzenBlazorDemos/Pages/DataGridMixedAdvancedFilter.razor b/RadzenBlazorDemos/Pages/DataGridMixedAdvancedFilter.razor
@@ -11,11 +11,23 @@
     }
 </style>
 
+<RadzenCard Variant="Variant.Outlined" class="rz-my-4">
+    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+        <div>Filter Mode:</div>
+        <RadzenSelectBar Size="ButtonSize.Small" @bind-Value="@filterMode" Change=@((int args) => grid.Reload())>
+            <Items>
+                <RadzenSelectBarItem Value="0" Text="Advanced and CheckBoxList Mixed Filter" />
+                <RadzenSelectBarItem Value="1" Text="Simple and SimpleWithMenu Mixed Filter" />
+            </Items>
+        </RadzenSelectBar>
+    </RadzenStack>
+</RadzenCard>
+
 <RadzenDataGrid @ref="grid" AllowFiltering="true" AllowColumnResize="true" 
-    FilterMode="FilterMode.CheckBoxList" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@orders">
+    FilterMode="@(filterMode == 0 ? FilterMode.CheckBoxList : FilterMode.Simple)" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@orders">
     <Columns>
-        <RadzenDataGridColumn Property="OrderID" Title="Order ID" FilterMode="FilterMode.Advanced" />
-        <RadzenDataGridColumn Property="Customer.CompanyName" Title="Customer" />
+        <RadzenDataGridColumn Property="OrderID" Title="Order ID" FilterMode="@(filterMode == 0 ? FilterMode.Advanced : null)" />
+        <RadzenDataGridColumn Property="Customer.CompanyName" Title="Customer" FilterMode="@(filterMode == 1 ? FilterMode.SimpleWithMenu : null)" />
         <RadzenDataGridColumn Property="ProductDiscontinued" Title="Discontinued" />
         <RadzenDataGridColumn Property="Employee.LastName" Title="Employee">
             <Template Context="order">
@@ -38,6 +50,7 @@
 </RadzenDataGrid>
 
 @code {
+    int filterMode;
     IEnumerable<Order> orders;
     RadzenDataGrid<Order> grid;
 

diff --git a/RadzenBlazorDemos/Pages/DataGridMixedAdvancedFilterPage.razor b/RadzenBlazorDemos/Pages/DataGridMixedAdvancedFilterPage.razor
@@ -1,14 +1,19 @@
-@page "/datagrid-mixed-advanced-filter"
+@page "/datagrid-mixed-filter"
 
 <RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
     DataGrid <strong>Advanced mode and CheckBox list (Excel like) mixed Filter</strong>
 </RadzenText>
 <RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
-    The column <code>FilterMode</code> property allows you to specify <code>FilterMode.Advanced</code> or <code>FilterMode.CheckBoxList</code> filter mode per column. 
-    OrderID column is using <code>FilterMode.Advanced</code> while rest columns will use <code>FilterMode.CheckBoxList</code>
-    Filter modes <code>FilterMode.Advanced</code> and <code>FilterMode.CheckBoxList</code> cannot be mixed with <code>FilterMode.Simple</code> and <code>FilterMode.SimpleWithMenu</code> modes.
+    The column <code>FilterMode</code> property allows you to mix <code>Advanced</code> and <code>CheckBoxList</code> or <code>Simple</code> and <code>SimpleWithMenu</code> filter mode per column.
+    Advanced filter modes cannot be mixed with simple filter modes.
 </RadzenText>
 
+<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
+    In this demo OrderID column is using <code>Advanced</code> while rest columns will use <code>CheckBoxList</code> or 
+    CompanyName column is using <code>SimpleWithMenu</code> while rest columns will use <code>Simple</code>
+</RadzenText>
+
+
 <RadzenExample ComponentName="DataGrid" Example="DataGridCheckBoxListFilter">
     <DataGridMixedAdvancedFilter />
 </RadzenExample>
diff --git a/RadzenBlazorDemos/Services/ExampleService.cs b/RadzenBlazorDemos/Services/ExampleService.cs
@@ -379,8 +379,8 @@ public class ExampleService
                         },
                         new Example
                         {
-                            Name = "Mixed Advanced Mode",
-                            Path = "datagrid-mixed-advanced-filter",
+                            Name = "Mixed Mode",
+                            Path = "datagrid-mixed-filter",
                             Title = "Blazor DataGrid Component -  Excel like and Advanced mixed Filter Mode | Free UI Components by Radzen",
                             Description = "RadzenDataGrid Excel like and advanced mixed mode filtering.",
                             Tags = new [] { "filter", "advanced", "grid", "datagrid", "table"}