Added support for custom column filter templates

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_07_Custom_Filter_Template.razor

@@ -0,0 +1,61 @@
+<Grid TItem="Employee4"
+      Class="table table-hover table-bordered table-striped"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      Responsive="true">
+
+    <GridColumns>
+        <GridColumn TItem="Employee4" HeaderText="Id" PropertyName="Id" Filterable=false>
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee4" HeaderText="Employee Name" PropertyName="Name" Filterable=false>
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee4" HeaderText="Designation" PropertyName="Designation" Filterable=false>
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee4" HeaderText="DOJ" PropertyName="DOJ" Filterable=false>
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee4" HeaderText="Active" PropertyName="IsActive">
+            <CustomColumnFilter>
+                <StatusSelector
+                    Value="@context.Column.ActualFilterValue"
+                    ValueChanged="(newValue)=> context.Column.OnFilterChangedAsync(new FilterEventArgs(newValue, string.IsNullOrEmpty(newValue) ? FilterOperator.None : FilterOperator.Equals))"/>
+            </CustomColumnFilter>
+            <ChildContent>
+                @context.IsActive
+            </ChildContent>
+        </GridColumn>
+    </GridColumns>
+
+</Grid>
+
+@code {
+    private IEnumerable<Employee4> employees = default!;
+
+    private async Task<GridDataProviderResult<Employee4>> EmployeesDataProvider(GridDataProviderRequest<Employee4> request)
+    {
+        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+            employees = GetEmployees(); // call a service or an API to pull the employees
+
+        return await Task.FromResult(request.ApplyTo(employees));
+    }
+
+    private IEnumerable<Employee4> GetEmployees()
+    {
+        return new List<Employee4>
+        {
+            new Employee4 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
+            new Employee4 { Id = null, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
+            new Employee4 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
+            new Employee4 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
+            new Employee4 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
+            new Employee4 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee4 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee4 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
+            new Employee4 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = null, IsActive = true },
+            new Employee4 { Id = 110, Name = "Vijay", Designation = null, DOJ = new DateOnly(1990, 7, 1), IsActive = true },
+        };
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor

@@ -65,6 +65,10 @@
     <Demo Type="typeof(Grid_Demo_06_Guid_Filters)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H2" Name="Custom filter template" PageUrl="@pageUrl" Link="custom-filter-template">
+    <Demo Type="typeof(Grid_Demo_07_Custom_Filter_Template)" Tabs="true" />
+</Section>
+
 @code {
     private const string pageUrl = RouteConstants.Demos_Grid_Filters_Documentation;
     private const string pageTitle = "Blazor Grid - Filters";

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/StatusSelector.razor

@@ -0,0 +1,24 @@
+@if (Value == VALUE_TRUE)
+{
+    <Button Size="ButtonSize.Small" @onclick="() => ValueChanged.InvokeAsync(VALUE_FALSE)"><Icon Name="IconName.Check" /></Button>
+}
+else if (Value == VALUE_FALSE)
+{
+    <Button Size="ButtonSize.Small" @onclick="() => ValueChanged.InvokeAsync(VALUE_EMPTY)"><Icon Name="IconName.Diamond" /></Button>
+}
+else
+{
+    <Button Size="ButtonSize.Small" @onclick="() => ValueChanged.InvokeAsync(VALUE_TRUE)"><Icon Name="IconName.DiamondHalf" /></Button>
+}
+
+@code {
+    private const string VALUE_FALSE = "False";
+    private const string VALUE_TRUE = "True";
+    private const string VALUE_EMPTY = "";
+
+    [Parameter]
+    public string? Value { get; set; }
+
+    [Parameter]
+    public EventCallback<string> ValueChanged { get; set; }
+}

blazorbootstrap/Components/Grid/Grid.razor

@@ -1,4 +1,5 @@
 @namespace BlazorBootstrap
+@using BlazorBootstrap.Models
 @inherits BlazorBootstrapComponentBase
 @typeparam TItem
 
@@ -35,6 +36,7 @@
                 </tr>
                 @if (AllowFiltering)
                 {
+                    var columnFilterContext = new GridColumnFilterContext(EnumFilterSelectText, GridFiltersTranslationProviderAsync!, FixedHeader);
                     <tr class="@FiltersRowCssClass">
                         @if (AllowDetailView)
                         {
@@ -70,18 +72,7 @@
                             <th class="@string.Join(" ", columnClassList)" style="@string.Join(";", columnStyleList)">
                                 @if (column.Filterable)
                                 {
-                                    <GridColumnFilter EnumFilterSelectText="@EnumFilterSelectText"
-                                    FilterButtonColor="@column.FilterButtonColor"
-                                    FilterButtonCSSClass="@column.FilterButtonCSSClass"
-                                    FilterOperator="@column.FilterOperator"
-                                    FilterValue="@column.FilterValue"
-                                    FilterWidth="@column.FilterTextboxWidth"
-                                    FiltersTranslationProvider="GridFiltersTranslationProviderAsync!"
-                                    FixedHeader="@FixedHeader"
-                                    GridColumnFilterChanged="async args => await column.OnFilterChangedAsync(args, column)"
-                                    PropertyType="@column.GetPropertyType()"
-                                    PropertyTypeName="@column.GetPropertyTypeName()"
-                                    Unit="@column.FilterTextboxWidthUnit" />
+                                    @column.RenderColumnFilter(columnFilterContext)
                                 }
                             </th>
                         }

blazorbootstrap/Components/Grid/GridColumn.razor

@@ -1,3 +1,27 @@
 @namespace BlazorBootstrap
+@using BlazorBootstrap.Models
 @inherits BlazorBootstrapComponentBase
 @typeparam TItem
+
+@code{
+    internal RenderFragment RenderColumnFilter(GridColumnFilterContext context)
+    {
+        if (CustomColumnFilter is not null)
+        {
+            return CustomColumnFilter(new(context, this));
+        }
+
+        return @<GridColumnFilter EnumFilterSelectText="@context.EnumFilterSelectText"
+            FilterButtonColor="@FilterButtonColor"
+            FilterButtonCSSClass="@FilterButtonCSSClass"
+            FilterOperator="@FilterOperator"
+            FilterValue="@FilterValue"
+            FilterWidth="@FilterTextboxWidth"
+            FiltersTranslationProvider="context.FiltersTranslationProvider"
+            FixedHeader="@context.FixedHeader"
+            GridColumnFilterChanged="async args => await OnFilterChangedAsync(args)"
+            PropertyType="@GetPropertyType()"
+            PropertyTypeName="@GetPropertyTypeName()"
+            Unit="@FilterTextboxWidthUnit" />;
+    }
+}

blazorbootstrap/Components/Grid/GridColumn.razor.cs

@@ -1,4 +1,6 @@
-namespace BlazorBootstrap;
+using BlazorBootstrap.Models;
+
+namespace BlazorBootstrap;
 
 public partial class GridColumn<TItem> : BlazorBootstrapComponentBase
 {
@@ -60,7 +62,7 @@ internal IEnumerable<SortingItem<TItem>> GetSorting()
         yield return new SortingItem<TItem>(SortString, SortKeySelector!, currentSortDirection);
     }
 
-    internal async Task OnFilterChangedAsync(FilterEventArgs args, GridColumn<TItem> column)
+    public async Task OnFilterChangedAsync(FilterEventArgs args)
     {
         if (filterValue != args.Text || filterOperator != args.FilterOperator)
             await Parent.ResetPageNumberAsync();
@@ -203,6 +205,12 @@ private async Task OnSortClickAsync()
     [Parameter]
     public RenderFragment<TItem> ChildContent { get; set; } = default!;
 
+    /// <summary>
+    /// Specifies the content of custom column filter
+    /// </summary>
+    [Parameter]
+    public RenderFragment<GridColumnFilterRenderContext<TItem>>? CustomColumnFilter { get; set; }
+
     /// <summary>
     /// Gets or sets the column class.
     /// </summary>
@@ -273,6 +281,8 @@ private async Task OnSortClickAsync()
     [Parameter]
     public string FilterValue { get; set; } = default!;
 
+    public string ActualFilterValue => filterValue;
+
     /// <summary>
     /// Indicates whether the column is frozen.
     /// </summary>

blazorbootstrap/Models/GridColumnFilterContext.cs

@@ -0,0 +1,5 @@
+namespace BlazorBootstrap.Models;
+
+public sealed record GridColumnFilterContext(string? EnumFilterSelectText, GridFiltersTranslationDelegate FiltersTranslationProvider, bool FixedHeader)
+{
+}

blazorbootstrap/Models/GridColumnFilterRenderContext.cs

@@ -0,0 +1,5 @@
+namespace BlazorBootstrap.Models;
+
+public sealed record GridColumnFilterRenderContext<T>(GridColumnFilterContext GridContext, GridColumn<T> Column)
+{
+}