Grid updates

vikramlearning · Oct 11, 2024 · 4d7f10a · 4d7f10a
1 parent 97ac08c
commit 4d7f10a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 40 deletions.
diff --git a/...rBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor b/...rBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor
@@ -12,6 +12,7 @@
       PageSizeSelectorItems="@(new int[] { 5,10,20 })"
       PaginationItemsTextFormat="{0} - {1} van {2} artikelen"
       ItemsPerPageText="Artikelen per pagina"
+      EnumFilterSelectText="Selecteer"
       Responsive="true">
 
     <GridColumns>

diff --git a/blazorbootstrap/Components/Grid/Grid.razor b/blazorbootstrap/Components/Grid/Grid.razor
@@ -2,10 +2,8 @@
 @inherits BlazorBootstrapComponentBase
 @typeparam TItem
 
-<CascadingValue Value="@(this)" IsFixed="true">
-    <CascadingValue Value="@EnumFilterSelectText" Name="EnumFilterSelectText" IsFixed="true">
-        @ChildContent
-    </CascadingValue>
+<CascadingValue Value="@(this)" Name="Parent" IsFixed="true">
+    @ChildContent
 </CascadingValue>
 
 @if (columns.Any())
@@ -60,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"

diff --git a/blazorbootstrap/Components/Grid/Grid.razor.cs b/blazorbootstrap/Components/Grid/Grid.razor.cs
@@ -662,8 +662,14 @@ 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";
+    public string? EnumFilterSelectText { get; set; } = "Select";
 
     /// <summary>
     /// Gets or sets the filters row css class.

diff --git a/blazorbootstrap/Components/Grid/GridColumn.razor.cs b/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.

diff --git a/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs b/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs
@@ -147,8 +147,8 @@ or StringConstants.PropertyTypeNameDecimal
 
     #region Properties, Indexers
 
-    [CascadingParameter(Name= "EnumFilterSelectText")]
-    public string EnumFilterSelectText { get; set; } = "Select";
+    [Parameter]
+    public string? EnumFilterSelectText { get; set; }
 
     /// <summary>
     /// Gets or sets the filter button color.

diff --git a/docs/docs/05-components/grid.mdx b/docs/docs/05-components/grid.mdx
@@ -35,6 +35,7 @@ Use Blazor Bootstrap grid component to display tabular data from the data source
 | DisableRowSelection | `Func<TItem, bool>?` | | | Enable or disable the row level checkbox selection. | 1.8.0 |
 | EmptyDataTemplate | RenderFragment | null | ✔️ | Template to render when there are no rows to display. | 1.0.0 |
 | EmptyText | string | `No records to display` | | Shows text on no records. | 1.0.0 |
+| EnumFilterSelectText | string | `Select` | | Gets or sets the enum filter select text. | 3.1.0 |
 | FiltersRowCssClass | string | null | | Gets or sets the filters row css class. | 1.9.2 |
 | FiltersTranslationProvider | `GridFiltersTranslationDelegate` | null | | Filters transalation is for grid filters to render. The provider should always return a 'FilterOperatorInfo' collection, and 'null' is not allowed. | 1.10.0 |
 | FixedHeader | bool | false | | Gets or sets the grid fixed header. | 1.10.3 |
@@ -2972,15 +2973,15 @@ Please see the following example where the row text color is set to **#fff (whit
 
 In the example below, you will see translations related to pagination and filters in **Dutch**.
 
-<img src="https://i.imgur.com/kKNgo2I.png" alt="Blazor Bootstrap: Grid Component - Translations" />
+<img src="https://i.imgur.com/CukDBGH.png" alt="Blazor Bootstrap: Grid Component - Translations" />
 
 ```cshtml {8,13-14} showLineNumbers
-<Grid TItem="Employee1"
+<Grid TItem="User"
       AllowFiltering="true"
       AllowPaging="true"
       AllowSorting="true"
       Class="table table-hover"
-      DataProvider="EmployeesDataProvider"
+      DataProvider="UsersDataProvider"
       FiltersRowCssClass="bg-dark text-white bg-opacity-25 border-bottom-0"
       FiltersTranslationProvider="GridFiltersTranslationProvider"
       HeaderRowCssClass="bg-dark text-white border-bottom-0"
@@ -2989,23 +2990,21 @@ In the example below, you will see translations related to pagination and filter
       PageSizeSelectorItems="@(new int[] { 5,10,20 })"
       PaginationItemsTextFormat="{0} - {1} van {2} artikelen"
       ItemsPerPageText="Artikelen per pagina"
+      EnumFilterSelectText="Selecteer"
       Responsive="true">
 
     <GridColumns>
-        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
+        <GridColumn TItem="User" HeaderText="Id" PropertyName="Id">
             @context.Id
         </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
+        <GridColumn TItem="User" HeaderText="User Name" PropertyName="Name">
             @context.Name
         </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
-            @context.Designation
-        </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
-            @context.DOJ
+        <GridColumn TItem="User" HeaderText="DOB" PropertyName="DOB">
+            @context.DOB
         </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
-            @context.IsActive
+        <GridColumn TItem="User" HeaderText="Status" PropertyName="Status" FilterTextboxWidth="170">
+            @context.Status
         </GridColumn>
     </GridColumns>
 
@@ -3014,7 +3013,7 @@ In the example below, you will see translations related to pagination and filter
 
 ```cs {4-25} showLineNumbers
 @code {
-    private IEnumerable<Employee1> employees = default!;
+    private IEnumerable<User> users = default!;
 
     private async Task<IEnumerable<FilterOperatorInfo>> GridFiltersTranslationProvider()
     {
@@ -3039,32 +3038,46 @@ In the example below, you will see translations related to pagination and filter
         return await Task.FromResult(filtersTranslation);
     }
 
-    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
+
+    private async Task<GridDataProviderResult<User>> UsersDataProvider(GridDataProviderRequest<User> 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
+        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(employees));
+        return await Task.FromResult(request.ApplyTo(users));
     }
 
-    private IEnumerable<Employee1> GetEmployees()
+    private IEnumerable<User> GetUsers()
     {
-        return new List<Employee1>
+        return new List<User>
         {
-            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
-            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
-            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
-            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
-            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
-            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
-            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
-            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
-            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
-            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
-            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
-            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
+            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
+    }
 }
 ```