Grid updates (#705)

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/GridDocumentation.razor

@@ -9,7 +9,7 @@
     Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging & sorting.
 </div>
 
-@* <CarbonAds />
+<CarbonAds />
 
 <SectionHeading Size="HeadingSize.H2" Text="Client side filtering" PageUrl="@pageUrl" HashTagName="client-side-filtering" />
 <div>For filtering, <code>AllowFiltering</code> and <code>PropertyName</code> parameters are required.</div>
@@ -206,10 +206,10 @@
 <SectionHeading Size="HeadingSize.H2" Text="Auto hide paging" PageUrl="@pageUrl" HashTagName="auto-hide-paging" />
 <Demo Type="typeof(Grid_Demo_34_AutoHide_Paging)" Tabs="true" />
 
-<SectionHeading Size="HeadingSize.H2" Text="Filter with enum" PageUrl="@pageUrl" HashTagName="filter-with-enum" />
-<Demo Type="typeof(Grid_Demo_35_Enum_Filters)" Tabs="true" /> *@
+<SectionHeading Size="HeadingSize.H2" Text="Enum filter" PageUrl="@pageUrl" HashTagName="enum-filter" />
+<Demo Type="typeof(Grid_Demo_35_Enum_Filters)" Tabs="true" />
 
-<SectionHeading Size="HeadingSize.H2" Text="Filter with guid" PageUrl="@pageUrl" HashTagName="filter-with-guid" />
+<SectionHeading Size="HeadingSize.H2" Text="Guid filter" PageUrl="@pageUrl" HashTagName="guid-filter" />
 <Demo Type="typeof(Grid_Demo_36_Guid_Filters)" Tabs="true" />
 
 @code {

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/Grid_Demo_21_Specify_Custom_Column_Header.razor

@@ -35,8 +35,8 @@
 
     private bool IsAllChecked
     {
-        get => employees.All(e => e.IsActive);
-        set => Array.ForEach(employees.ToArray(), e => e.IsActive = value);
+        get => employees?.All(e => e.IsActive) ?? false;
+        set => Array.ForEach(employees?.ToArray()!, e => e.IsActive = value);
     }
 
     private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/Grid_Demo_24_Disable_Selection.razor

@@ -71,7 +71,7 @@
 
     private bool DisableAllRowsSelectionHandler(IEnumerable<Employee1> employees)
     {
-        return employees.Any(x => x.Id < 105); // disable selection if EmployeeId < 105
+        return employees?.Any(x => x.Id < 105) ?? false; // disable selection if EmployeeId < 105
     }
 
     private bool DisableRowSelectionHandler(Employee1 emp)

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/Grid_Demo_35_Enum_Filters.razor

@@ -14,7 +14,7 @@
     <GridColumn TItem="User" HeaderText="DOB" PropertyName="DOB">
         @context.DOB
     </GridColumn>
-    <GridColumn TItem="User" HeaderText="Status" PropertyName="Status">
+    <GridColumn TItem="User" HeaderText="Status" PropertyName="Status" FilterTextboxWidth="170">
         @context.Status
     </GridColumn>
 

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/Grid_Demo_36_Guid_Filters.razor

@@ -5,19 +5,19 @@
        AllowFiltering="true"
        Responsive="true">
 
-    <GridColumn TItem="User" HeaderText="Oid" PropertyName="Oid">
+    <GridColumn TItem="User" HeaderText="Oid" PropertyName="Oid" FilterTextboxWidth="240">
         @context.Oid
     </GridColumn>
-    <GridColumn TItem="User" HeaderText="Id" PropertyName="Id">
+    <GridColumn TItem="User" HeaderText="Id" PropertyName="Id" FilterTextboxWidth="70">
         @context.Id
     </GridColumn>
-    <GridColumn TItem="User" HeaderText="User Name" PropertyName="Name">
+    <GridColumn TItem="User" HeaderText="User Name" PropertyName="Name" FilterTextboxWidth="100">
         @context.Name
     </GridColumn>
     <GridColumn TItem="User" HeaderText="DOB" PropertyName="DOB">
         @context.DOB
     </GridColumn>
-    <GridColumn TItem="User" HeaderText="Status" PropertyName="Status">
+    <GridColumn TItem="User" HeaderText="Status" PropertyName="Status" FilterTextboxWidth="170">
         @context.Status
     </GridColumn>
 

blazorbootstrap/Components/Grid/Grid.razor

@@ -66,30 +66,39 @@
                 }
             </thead>
             <tbody>
-                @if (requestInProgress) //|| totalCount == null
+                @{
+                    var columnCount = AllowSelection ? columns.Count + 1 : columns.Count;
+                }
+                @if (requestInProgress) //|| totalCount is null
                 {
-                    // show placeholders
-                    @for (var i = 0; i < 5; i++)
+                    @if (LoadingTemplate is null)
                     {
-                        <tr>
-                            @for (var j = 0; j < columns.Count; j++)
-                            {
-                                <td class="placeholder-glow">
-                                    <span class="placeholder col-12"></span>
-                                </td>
-                            }
-                        </tr>
+                        // show placeholders
+                        @for (var i = 0; i < 5; i++)
+                        {
+                            <tr>
+                                @for (var j = 0; j < columnCount; j++)
+                                {
+                                    <td class="placeholder-glow">
+                                        <span class="placeholder col-12"></span>
+                                    </td>
+                                }
+                            </tr>
+                        }
+                    }
+                    else
+                    {
+                        <div class="my-3">
+                            @LoadingTemplate
+                        </div>
                     }
                 }
                 else if (totalCount == 0)
                 {
                     // show empty
                     <tr>
-                        @{
-                            var columnCount = AllowSelection ? columns.Count + 1 : columns.Count;
-                        }
                         <td colspan="@columnCount">
-                            @if (EmptyDataTemplate == null)
+                            @if (EmptyDataTemplate is null)
                             {
                                 <div class="text-center text-secondary my-5">
                                     <div class="fs-3">
@@ -109,7 +118,7 @@
                 }
                 else if (totalCount > 0)
                 {
-                    if (items != null)
+                    if (items is not null)
                     {
                         var rowIndex = 0;
                         foreach (var item in items)

blazorbootstrap/Components/Grid/Grid.razor.cs

@@ -144,6 +144,10 @@ internal async Task RefreshDataAsync(bool firstRender = false, CancellationToken
 
         requestInProgress = true;
 
+        await InvokeAsync(StateHasChanged); // chnage the state to show the loading
+
+        await Task.Delay(300);
+
         if (firstRender)
             await LoadGridSettingsAsync();
 
@@ -696,6 +700,11 @@ private void SetFilters(IEnumerable<FilterItem> filterItems)
     //[EditorRequired] 
     public string ItemsPerPageText { get; set; } = "Items per page"!;
 
+    /// <summary>
+    /// Template to render when the grid is loading.
+    /// </summary>
+    public RenderFragment LoadingTemplate { get; set; } = default!;
+
     /// <summary>
     /// This event is triggered when the user clicks on the row.
     /// Set AllowRowClick to true to enable row clicking.

blazorbootstrap/Components/Grid/GridColumnFilter.razor

@@ -55,7 +55,7 @@
     else if (PropertyTypeName == StringConstants.PropertyTypeNameEnum)
     {
         <Dropdown>
-            <DropdownToggleButton Class="px-1" Color="ButtonColor.Light">
+            <DropdownToggleButton Class="px-1" Style="@filterStyle" Color="ButtonColor.Light">
                 @if (string.IsNullOrWhiteSpace(filterValue))
                 {
                     <span class="px-2">Select</span>

blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs

@@ -160,7 +160,7 @@ or StringConstants.PropertyTypeNameDecimal
     [Parameter]
     public GridFiltersTranslationDelegate FiltersTranslationProvider { get; set; } = default!;
 
-    private string filterStyle => FilterWidth > 0 ? $"width:{FilterWidth.ToString(CultureInfo.InvariantCulture)}{Unit};" : "";
+    private string filterStyle => FilterWidth > 0 ? $"width:{FilterWidth.ToString(CultureInfo.InvariantCulture)}{Unit.ToString().ToLower()};" : "";
 
     /// <summary>
     /// Gets or sets filter value.

docs/docs/05-components/grid.mdx

@@ -3134,3 +3134,172 @@ Automatically hides the paging controls when the grid item count is less than or
 ```
 
 [See demo here](https://demos.blazorbootstrap.com/grid#auto-hide-paging)
+
+### Enum filter
+
+<img src="https://i.imgur.com/eJ9tlTH.png" alt="Blazor Bootstrap: Grid Component - Enum filter" />
+
+```cshtml {} showLineNumbers
+<Grid @ref="grid"
+       TItem="User"
+       Class="table table-hover table-bordered table-striped"
+       DataProvider="UsersDataProvider"
+       AllowFiltering="true"
+       Responsive="true">
+
+    <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>
+
+</Grid>
+```
+
+```cshtml {} showLineNumbers
+@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
+            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
+    }
+}
+```
+
+[See demo here](https://demos.blazorbootstrap.com/grid#enum-filter)
+
+### Guid filter
+
+<img src="https://i.imgur.com/0ZuKyGX.png" alt="Blazor Bootstrap: Grid Component - Guid filter" />
+
+```cshtml {
+<Grid @ref="grid"
+       TItem="User"
+       Class="table table-hover table-bordered table-striped"
+       DataProvider="UsersDataProvider"
+       AllowFiltering="true"
+       Responsive="true">
+
+    <GridColumn TItem="User" HeaderText="Oid" PropertyName="Oid" FilterTextboxWidth="240">
+        @context.Oid
+    </GridColumn>
+    <GridColumn TItem="User" HeaderText="Id" PropertyName="Id" FilterTextboxWidth="70">
+        @context.Id
+    </GridColumn>
+    <GridColumn TItem="User" HeaderText="User Name" PropertyName="Name" FilterTextboxWidth="100">
+        @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>
+
+</Grid>
+} showLineNumbers
+```
+
+```cshtml {} showLineNumbers
+@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
+            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 { Oid = Guid.NewGuid(), Id = 107, Name = "Alice", DOB = new DateOnly(1998, 11, 17), Status = UserStatus.Registered },
+            new User { Oid = Guid.NewGuid(), Id = null, Name = "Bob", DOB = new DateOnly(1985, 1, 5), Status = UserStatus.Verified },
+            new User { Oid = Guid.NewGuid(), Id = 106, Name = "John", DOB = new DateOnly(1995, 4, 17), Status = UserStatus.Registered },
+            new User { Oid = Guid.NewGuid(), Id = 104, Name = "Pop", DOB = new DateOnly(1985, 6, 8), Status = UserStatus.Registered },
+            new User { Oid = Guid.NewGuid(), Id = 105, Name = "Ronald", DOB = new DateOnly(1991, 8, 23), Status = UserStatus.VerificationPending },
+            new User { Oid = Guid.NewGuid(), Id = 102, Name = "Line", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.VerificationPending },
+            new User { Oid = Guid.NewGuid(), Id = 101, Name = "Daniel", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.Registered },
+            new User { Oid = Guid.NewGuid(), Id = 108, Name = "Zayne", DOB = new DateOnly(1991, 1, 1), Status = UserStatus.Verified },
+            new User { Oid = Guid.NewGuid(), Id = 109, Name = "Isha", DOB = null, Status = UserStatus.Verified },
+            new User { Oid = Guid.NewGuid(), Id = 110, Name = "Vijay", DOB = new DateOnly(1990, 7, 1), Status = UserStatus.Verified },
+        };
+    }
+
+    public record class User
+    {
+        public Guid Oid { get; set; }
+        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
+    }
+}
+```
+
+[See demo here](https://demos.blazorbootstrap.com/grid#guid-filter)