DataGrid FilterMode.CheckBoxList (Excel like) filtering added

Radzen.Blazor/Common.cs

@@ -1744,7 +1744,11 @@ namespace Radzen
         /// <summary>
         /// The component displays a popup filtering UI and allows you to pick filtering operator and or filter by multiple values.
         /// </summary>
-        Advanced
+        Advanced,
+        /// <summary>
+        /// The component displays a popup filtering UI and allows you to pick multiple values from list of all values.
+        /// </summary>
+        CheckBoxList
     }
 
     /// <summary>

Radzen.Blazor/RadzenDataGridColumn.razor.cs

@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System;
+using System.Collections;
 using System.Collections.Generic;
 using System.Globalization;
 using System.Linq;
@@ -122,6 +123,12 @@ namespace Radzen.Blazor
             {
                 Grid.AddColumn(this);
 
+                if (Grid.FilterMode == FilterMode.CheckBoxList)
+                {
+                    _filterPropertyType = typeof(IEnumerable<object>);
+                    SetFilterOperator(FilterOperator.Contains);
+                }
+
                 var property = GetFilterProperty();
 
                 if (!string.IsNullOrEmpty(property))
@@ -129,7 +136,7 @@ namespace Radzen.Blazor
                     _propertyType = PropertyAccess.GetPropertyType(typeof(TItem), property);
                 }
 
-                if (!string.IsNullOrEmpty(property) && Type == null)
+                if (!string.IsNullOrEmpty(property) && Type == null && Grid.FilterMode != FilterMode.CheckBoxList)
                 {
                     _filterPropertyType = _propertyType;
                 }
@@ -145,7 +152,7 @@ namespace Radzen.Blazor
 
                 if (_filterPropertyType == typeof(string))
                 {
-                    FilterOperator = FilterOperator.Contains;
+                    SetFilterOperator(FilterOperator.Contains);
                 }
             }
         }
@@ -955,6 +962,19 @@ namespace Radzen.Blazor
             return filterValue ?? FilterValue;
         }
 
+        IEnumerable filterValues;
+        internal IEnumerable GetFilterValues()
+        {
+            if (filterValues == null)
+            {
+                filterValues = Grid.Data != null && !string.IsNullOrEmpty(GetFilterProperty()) ?
+                    Grid.Data.AsQueryable().Select($"np({GetFilterProperty()})").Distinct().Cast(PropertyAccess.GetPropertyType(typeof(TItem), GetFilterProperty())) 
+                        : Enumerable.Empty<object>();
+            }
+
+            return filterValues;
+        }
+
         /// <summary>
         /// Get column filter operator.
         /// </summary>

Radzen.Blazor/RadzenDataGridHeaderCell.razor

@@ -53,7 +53,7 @@
                     @onmousedown:preventDefault="true"
                     @onmousedown=@StartColumnResize @onmouseup=@StopColumnResize>&nbsp;</div>
         }
-        @if (Grid.AllowFiltering && Column.Filterable && Grid.FilterMode == FilterMode.Advanced)
+        @if (Grid.AllowFiltering && Column.Filterable && (Grid.FilterMode == FilterMode.Advanced || Grid.FilterMode == FilterMode.CheckBoxList))
         {
                 <i @ref=@filterButton @onclick:stopPropagation="true" @onmousedown=@ToggleFilter
                    class="@getFilterIconCss(Column)" onclick=@getFilterOpen() @onclick:preventDefault="true">
@@ -70,6 +70,8 @@
                             else
                             {
                                 <form id="@($"{getColumnPopupID()}-form")" @onsubmit="@(args => ApplyFilter())" class="rz-grid-filter">
+                                @if(Grid.FilterMode == FilterMode.Advanced)
+                                {
                                 <span class="rz-grid-filter-label">@Grid.FilterText</span>
                                 <RadzenDropDown InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", Grid.FilterOperatorArialLabel + Column.GetFilterOperatorText(Column.GetSecondFilterOperator()) }})"
                                     @onclick:preventDefault="true" Data="@(Column.GetFilterOperators().Select(t => new { Value = Column.GetFilterOperatorText(t), Key = t }))" TextProperty="Value" ValueProperty="Key" TValue="FilterOperator" Value="@Column.GetFilterOperator()" Change="@(args => Column.SetFilterOperator((FilterOperator)args))" />
@@ -136,8 +138,18 @@
                                 else
                                 {
                                     <RadzenTextBox Disabled="@(!Column.CanSetFilterValue(false))" id="@($"{getColumnPopupID()}-sf2")" aria-label=@(Column.Title + Grid.SecondFilterValueArialLabel + Column.GetSecondFilterValue()) Value="@($"{Column.GetSecondFilterValue()}")" Change="@(args => Column.SetFilterValue(args, false))" />
+                                    }
                                 }
-                                </form>
+                                else
+                                {
+                                    <RadzenListBox AllowVirtualization="true" AllowClear="true" Multiple="true" Style="height: 300px"
+                                                   TValue="IEnumerable<object>" Data=@Column.GetFilterValues() Value=@Column.GetFilterValue()
+                                                   Change="@(args => Column.SetFilterValue(args))" 
+                                                   AllowFiltering="@(PropertyAccess.GetPropertyType(typeof(TItem), Column.GetFilterProperty()) == typeof(string))"
+                                                   Disabled="@(!Column.CanSetFilterValue())" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
+                                                   InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", Column.Title + Grid.FilterValueArialLabel  + Column.GetFilterValue() }})" />
+                                }
+                            </form>
                             }
                         </div>
                         @if (Column.FilterTemplate == null)

RadzenBlazorDemos/Pages/DataGridCheckBoxListFilter.razor

@@ -0,0 +1,37 @@
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inherits DbContextPage
+
+<RadzenDataGrid @ref="grid" AllowFiltering="true" AllowColumnResize="true" 
+    FilterMode="FilterMode.CheckBoxList" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@orders" ColumnWidth="300px">
+    <Columns>
+        <RadzenDataGridColumn Property="OrderID" Title="Order ID" />
+        <RadzenDataGridColumn Property="Customer.CompanyName" Title="Customer" />
+        <RadzenDataGridColumn Property="Employee.LastName" Title="Employee">
+            <Template Context="order">
+                <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 16px; margin-right: 6px;" AlternateText="@(order.Employee?.FirstName + " " + order.Employee?.LastName)" />
+                @order.Employee?.FirstName @order.Employee?.LastName
+            </Template>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn Property="OrderDate" Title="Order Date" FormatString="{0:d}" />
+        <RadzenDataGridColumn Property="RequiredDate" Title="Required Date" FormatString="{0:d}" />
+        <RadzenDataGridColumn Property="ShippedDate" Title="Shipped Date" FormatString="{0:d}" />
+        <RadzenDataGridColumn Property="ShipName" Title="Ship Name" />
+        <RadzenDataGridColumn Property="ShipCountry" Title="Ship Country" />
+    </Columns>
+</RadzenDataGrid>
+
+@code {
+    IEnumerable<Order> orders;
+    RadzenDataGrid<Order> grid;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        orders = await Task.FromResult(dbContext.Orders.Include("Customer").Include("Employee").ToList());
+    }
+}

RadzenBlazorDemos/Pages/DataGridCheckBoxListFilterPage.razor

@@ -0,0 +1,9 @@
+@page "/datagrid-checkboxlist-filter"
+
+<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
+    DataGrid <strong>CheckBox list (Excel like) Filter</strong>
+</RadzenText>
+
+<RadzenExample ComponentName="DataGrid" Example="DataGridCheckBoxListFilter">
+    <DataGridCheckBoxListFilter />
+</RadzenExample>

RadzenBlazorDemos/Pages/DataGridExcelFilter.razor

@@ -0,0 +1,37 @@
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inherits DbContextPage
+
+<RadzenDataGrid @ref="grid" AllowFiltering="true" AllowColumnResize="true" 
+    FilterMode="FilterMode.CheckBoxList" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@orders" ColumnWidth="300px">
+    <Columns>
+        <RadzenDataGridColumn Property="OrderID" Title="Order ID" />
+        <RadzenDataGridColumn Property="Customer.CompanyName" Title="Customer" />
+        <RadzenDataGridColumn Property="Employee.LastName" Title="Employee">
+            <Template Context="order">
+                <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 16px; margin-right: 6px;" AlternateText="@(order.Employee?.FirstName + " " + order.Employee?.LastName)" />
+                @order.Employee?.FirstName @order.Employee?.LastName
+            </Template>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn Property="OrderDate" Title="Order Date" FormatString="{0:d}" />
+        <RadzenDataGridColumn Property="RequiredDate" Title="Required Date" FormatString="{0:d}" />
+        <RadzenDataGridColumn Property="ShippedDate" Title="Shipped Date" FormatString="{0:d}" />
+        <RadzenDataGridColumn Property="ShipName" Title="Ship Name" />
+        <RadzenDataGridColumn Property="ShipCountry" Title="Ship Country" />
+    </Columns>
+</RadzenDataGrid>
+
+@code {
+    IEnumerable<Order> orders;
+    RadzenDataGrid<Order> grid;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        orders = await Task.FromResult(dbContext.Orders.Include("Customer").Include("Employee").ToList());
+    }
+}

RadzenBlazorDemos/Pages/DataGridExcelFilterPage.razor

@@ -0,0 +1,9 @@
+@page "/datagrid-excel-filter"
+
+<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
+    DataGrid <strong>Excel like Filter</strong>
+</RadzenText>
+
+<RadzenExample ComponentName="DataGrid" Example="DataGridExcelFilter">
+    <DataGridExcelFilter />
+</RadzenExample>

RadzenBlazorDemos/Services/ExampleService.cs

@@ -323,6 +323,15 @@ namespace RadzenBlazorDemos
                             Tags = new [] { "filter", "advanced", "grid", "datagrid", "table"}
                         },
                         new Example
+                        {
+                            New = true,
+                            Name = "CheckBoxList (Excel like)",
+                            Path = "datagrid-checkboxlist-filter",
+                            Title = "Blazor DataGrid Component - Excel like filtering | Free UI Components by Radzen",
+                            Description = "RadzenDataGrid Excel like filtering.",
+                            Tags = new [] { "filter", "excel", "grid", "datagrid", "table", "menu", "checkbox", "list" }
+                        },
+                        new Example
                         {
                             New = true,
                             Name = "Enum filtering",