#871 - Grid enum filter - select text translation support

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

@@ -1,5 +1,4 @@
-<Grid @ref="grid"
-      TItem="Employee4"
+<Grid TItem="Employee4"
       Class="table table-hover table-bordered table-striped"
       DataProvider="EmployeesDataProvider"
       AllowFiltering="true"
@@ -26,14 +25,8 @@
 </Grid>
 
 @code {
-    BlazorBootstrap.Grid<Employee4> grid = default!;
     private IEnumerable<Employee4> employees = default!;
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await base.OnAfterRenderAsync(firstRender);
-    }
-
     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

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_35_Enum_Filters.razor → BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor

@@ -1,5 +1,4 @@
-<Grid @ref="grid"
-       TItem="User"
+<Grid  TItem="User"
        Class="table table-hover table-bordered table-striped"
        DataProvider="UsersDataProvider"
        AllowFiltering="true"
@@ -23,14 +22,8 @@
 </Grid>
 
 @code {
-    BlazorBootstrap.Grid<User> grid = default!;
     private IEnumerable<User> users = default!;
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await base.OnAfterRenderAsync(firstRender);
-    }
-
     private async Task<GridDataProviderResult<User>> UsersDataProvider(GridDataProviderRequest<User> request)
     {
         if (users is null) // pull employees only one time for client-side filtering, sorting, and paging

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_36_Guid_Filters.razor → BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor

@@ -1,5 +1,4 @@
-<Grid @ref="grid"
-       TItem="User"
+<Grid  TItem="User"
        Class="table table-hover table-bordered table-striped"
        DataProvider="UsersDataProvider"
        AllowFiltering="true"
@@ -26,14 +25,8 @@
 </Grid>
 
 @code {
-    BlazorBootstrap.Grid<User> grid = default!;
     private IEnumerable<User> users = default!;
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await base.OnAfterRenderAsync(firstRender);
-    }
-
     private async Task<GridDataProviderResult<User>> UsersDataProvider(GridDataProviderRequest<User> request)
     {
         if (users is null) // pull employees only one time for client-side filtering, sorting, and paging

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

@@ -27,18 +27,18 @@
 </div>
 <Callout Color="CalloutColor.Success">You can set the default filter on more than one GridColumn.</Callout>
 <div class="mb-3">The default sorting is enabled on the <b>Id</b> column in the below example.</div>
-<Demo Type="typeof(Grid_Demo_05_Set_Default_Filter)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_02_Set_Default_Filter)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Disable specific column filter" PageUrl="@pageUrl" HashTagName="disable-specific-column-filter" />
 <div class="mb-3">
     <code>Filterable</code> parameter is required to disable the filter on a specific column. Add <code>Filterable="false"</code> parameter to GridColumn. The column filter is disabled on the <b>Id</b> column in the below example.
 </div>
-<Demo Type="typeof(Grid_Demo_06_Disable_Specific_Column_Filter)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_03_Disable_Specific_Column_Filter)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Increase filter textbox width" PageUrl="@pageUrl" HashTagName="increase-filter-textbox-width" />
 <div class="mb-2">Add <code>FilterTextboxWidth</code> parameter to the GridColumn to increase or decrease the filter textbox width, <code>FilterTextboxWidth</code> parameter is optional.</div>
 <Callout>Filter textbox width measured in pixels.</Callout>
-<Demo Type="typeof(Grid_Demo_06_Increase_Filter_Textbox_Width)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_04_Increase_Filter_Textbox_Width)" Tabs="true" />
 
 <Callout Color="CalloutColor.Success" Heading="Important">
     <p>
@@ -51,10 +51,10 @@
 </Callout>
 
 <SectionHeading Size="HeadingSize.H2" Text="Enum filter" PageUrl="@pageUrl" HashTagName="enum-filter" />
-<Demo Type="typeof(Grid_Demo_35_Enum_Filters)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_05_Enum_Filters)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Guid filter" PageUrl="@pageUrl" HashTagName="guid-filter" />
-<Demo Type="typeof(Grid_Demo_36_Guid_Filters)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_06_Guid_Filters)" Tabs="true" />
 
 @code {
     private const string pageUrl = "/grid/filters";

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor

@@ -0,0 +1,101 @@
+<Grid TItem="User"
+      AllowFiltering="true"
+      AllowPaging="true"
+      AllowSorting="true"
+      Class="table table-hover"
+      DataProvider="UsersDataProvider"
+      FiltersRowCssClass="bg-dark text-white bg-opacity-25 border-bottom-0"
+      FiltersTranslationProvider="GridFiltersTranslationProvider"
+      HeaderRowCssClass="bg-dark text-white border-bottom-0"
+      PageSize="10"
+      PageSizeSelectorVisible="true"
+      PageSizeSelectorItems="@(new int[] { 5,10,20 })"
+      PaginationItemsTextFormat="{0} - {1} van {2} artikelen"
+      ItemsPerPageText="Artikelen per pagina"
+      EnumFilterSelectText="Selecteer"
+      Responsive="true">
+
+    <GridColumns>
+        <GridColumn TItem="User" HeaderText="Id" PropertyName="Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="User" HeaderText="User Name" PropertyName="Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="User" HeaderText="DOB" PropertyName="DOB">
+            @context.DOB
+        </GridColumn>
+        <GridColumn TItem="User" HeaderText="Status" PropertyName="Status" FilterTextboxWidth="170">
+            @context.Status
+        </GridColumn>
+    </GridColumns>
+
+</Grid>
+
+@code {
+    private IEnumerable<User> users = default!;
+
+    private async Task<IEnumerable<FilterOperatorInfo>> GridFiltersTranslationProvider()
+    {
+        var filtersTranslation = new List<FilterOperatorInfo>();
+
+        // number/date/boolean
+        filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));
+        filtersTranslation.Add(new("!=", "Niet gelijk", FilterOperator.NotEquals));
+        // number/date
+        filtersTranslation.Add(new("<", "Minder dan", FilterOperator.LessThan));
+        filtersTranslation.Add(new("<=", "Kleiner dan of gelijk aan", FilterOperator.LessThanOrEquals));
+        filtersTranslation.Add(new(">", "Groter dan", FilterOperator.GreaterThan));
+        filtersTranslation.Add(new(">=", "Groter dan of gelijk aan", FilterOperator.GreaterThanOrEquals));
+        // string
+        filtersTranslation.Add(new("*a*", "Bevat", FilterOperator.Contains));
+        filtersTranslation.Add(new("a**", "Begint met", FilterOperator.StartsWith));
+        filtersTranslation.Add(new("**a", "Eindigt met", FilterOperator.EndsWith));
+        filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));
+        // common
+        filtersTranslation.Add(new("x", "Duidelijk", FilterOperator.Clear));
+
+        return await Task.FromResult(filtersTranslation);
+    }
+
+
+    private async Task<GridDataProviderResult<User>> UsersDataProvider(GridDataProviderRequest<User> request)
+    {
+        if (users is null) // pull employees only one time for client-side filtering, sorting, and paging
+            users = GetUsers(); // call a service or an API to pull the employees
+
+        return await Task.FromResult(request.ApplyTo(users));
+    }
+
+    private IEnumerable<User> GetUsers()
+    {
+        return new List<User>
+        {
+            new User { Id = 107, Name = "Alice", DOB = new DateOnly(1998, 11, 17), Status = UserStatus.Registered },
+            new User { Id = null, Name = "Bob", DOB = new DateOnly(1985, 1, 5), Status = UserStatus.Verified },
+            new User { Id = 106, Name = "John", DOB = new DateOnly(1995, 4, 17), Status = UserStatus.Registered },
+            new User { Id = 104, Name = "Pop", DOB = new DateOnly(1985, 6, 8), Status = UserStatus.Registered },
+            new User { Id = 105, Name = "Ronald", DOB = new DateOnly(1991, 8, 23), Status = UserStatus.VerificationPending },
+            new User { Id = 102, Name = "Line", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.VerificationPending },
+            new User { Id = 101, Name = "Daniel", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.Registered },
+            new User { Id = 108, Name = "Zayne", DOB = new DateOnly(1991, 1, 1), Status = UserStatus.Verified },
+            new User { Id = 109, Name = "Isha", DOB = null, Status = UserStatus.Verified },
+            new User { Id = 110, Name = "Vijay", DOB = new DateOnly(1990, 7, 1), Status = UserStatus.Verified },
+        };
+    }
+
+    public record class User
+    {
+        public int? Id { get; set; }
+        public string? Name { get; set; }
+        public DateOnly? DOB { get; set; }
+        public UserStatus Status { get; set; }
+    }
+
+    public enum UserStatus
+    {
+        Registered,
+        VerificationPending,
+        Verified
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor

@@ -11,7 +11,7 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Translations" PageUrl="@pageUrl" HashTagName="translations" />
 <div class="mb-3">In the example below, you will see translations related to pagination and filters in <b>Dutch</b>.</div>
-<Demo Type="typeof(Grid_Demo_31_Translations)" Tabs="true" />
+<Demo Type="typeof(Grid_Demo_01_Translations)" Tabs="true" />
 
 @code {
     private const string pageUrl = "/grid/translations";

blazorbootstrap/Components/Grid/Grid.razor

@@ -2,7 +2,7 @@
 @inherits BlazorBootstrapComponentBase
 @typeparam TItem
 
-<CascadingValue Value="@(this)" IsFixed="true">
+<CascadingValue Value="@(this)" Name="Parent" IsFixed="true">
     @ChildContent
 </CascadingValue>
 
@@ -58,7 +58,8 @@
                             <th class="@string.Join(" ", columnClassList)" style="@string.Join(";", columnStyleList)">
                                 @if (column.Filterable)
                                 {
-                                    <GridColumnFilter FilterButtonColor="@column.FilterButtonColor"
+                                    <GridColumnFilter EnumFilterSelectText="@EnumFilterSelectText"
+                                                      FilterButtonColor="@column.FilterButtonColor"
                                                       FilterButtonCSSClass="@column.FilterButtonCSSClass"
                                                       FilterOperator="@column.FilterOperator"
                                                       FilterValue="@column.FilterValue"

blazorbootstrap/Components/Grid/Grid.razor.cs

@@ -662,6 +662,15 @@ private void SetFilters(IEnumerable<FilterItem> filterItems)
     [Parameter]
     public string EmptyText { get; set; } = "No records to display";
 
+    /// <summary>
+    /// Gets or sets the enum filter select text.
+    /// </summary>
+    /// <remarks>
+    /// Default value is 'Select'.
+    /// </remarks>
+    [Parameter]
+    public string? EnumFilterSelectText { get; set; } = "Select";
+
     /// <summary>
     /// Gets or sets the filters row css class.
     /// </summary>

blazorbootstrap/Components/Grid/GridColumn.razor.cs

@@ -411,7 +411,8 @@ private async Task OnSortClickAsync()
     [Parameter]
     public bool IsDefaultSortColumn { get; set; } = false;
 
-    [CascadingParameter] public Grid<TItem> Parent { get; set; } = default!;
+    [CascadingParameter(Name = "Parent")]
+    public Grid<TItem> Parent { get; set; } = default!;
 
     /// <summary>
     /// Gets or sets the property name.

blazorbootstrap/Components/Grid/GridColumnFilter.razor

@@ -58,7 +58,7 @@
             <DropdownToggleButton Class="px-1" Style="@filterStyle">
                 @if (string.IsNullOrWhiteSpace(filterValue))
                 {
-                    <span class="px-2">Select</span>
+                    <span class="px-2">@EnumFilterSelectText</span>
                 }
                 else
                 {

blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs

@@ -147,6 +147,9 @@ or StringConstants.PropertyTypeNameDecimal
 
     #region Properties, Indexers
 
+    [Parameter]
+    public string? EnumFilterSelectText { get; set; }
+
     /// <summary>
     /// Gets or sets the filter button color.
     /// </summary>