689 custom page number

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor

@@ -1,14 +1,14 @@
-<Grid TItem="Employee1"
-       Class="table table-hover table-bordered table-striped"
-       DataProvider="EmployeesDataProvider"
-       AllowFiltering="true"
-       AllowPaging="true"
-       PageSize="5"
-       AllowSorting="true"
-       AllowSelection="true"
-       SelectionMode="GridSelectionMode.Multiple"
-       SelectedItemsChanged="OnSelectedItemsChanged"
-       Responsive="true">
+<Grid TItem="Employee1"
+      Class="table table-hover table-bordered table-striped"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      AllowPaging="true"
+      PageSize="5"
+      AllowSorting="true"
+      AllowSelection="true"
+      SelectionMode="GridSelectionMode.Multiple"
+      SelectedItemsChanged="OnSelectedItemsChanged"
+      Responsive="true">
 
     <GridColumns>
         <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_05_Dynamic_Pagination.razor

@@ -0,0 +1,96 @@
+<div class="mb-3">
+    <Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="AddEmployee"> Add Employee </Button>
+    <Button Type="ButtonType.Button" Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="RemoveEmployee"> Remove Employee </Button>
+</div>
+
+<Grid TItem="Employee1"
+      @ref="grid"
+      Class="table table-hover table-bordered table-striped"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      AllowPaging="true"
+      PageSize="5"
+      AllowSorting="true"
+      Responsive="true">
+
+    <GridColumns>
+        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" FilterTextboxWidth="50" SortKeySelector="item => item.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>
+        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
+
+</Grid>
+
+@code {
+    Grid<Employee1> grid = default!;
+    private List<Employee1>? employees = default!;
+
+    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> 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 List<Employee1> GetEmployees()
+    {
+        return new List<Employee1>
+        {
+            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 },
+        };
+    }
+
+    private async Task AddEmployee()
+    {
+        if(employees is null)
+            employees = new();
+
+        // for the same employees collection, we are adding an object
+        // explicit grid refresh required
+        employees.Add(CreateEmployee());
+        await grid.RefreshDataAsync();
+    }
+
+    private Employee1 CreateEmployee()
+    {
+        var emp = new Employee1();
+        emp.Id = (employees?.Any() ?? false) ? employees.Max(x => x.Id) + 1 : 1;
+        emp.Name = $"Employee {emp.Id}";
+        emp.Designation = $"QA Engineer {emp.Id}";
+        emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25));
+        emp.IsActive = true;
+        return emp;
+    }
+
+    private async Task RemoveEmployee()
+    {
+        if (employees!.Count > 0)
+            employees!.Remove(employees.Last());
+
+        await grid.RefreshDataAsync();
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor

@@ -15,21 +15,25 @@
     <div>For paging, <code>AllowPaging</code> and <code>PageSize</code> parameters are required.</div>
     <div class="mb-2">Add <code>AllowPaging="true"</code> and <code>PageSize="20"</code> parameters to the Grid. <code>PageSize</code> parameter is optional.</div>
     <Callout Color="CalloutColor.Info">The default page size is 10.</Callout>
-    <Demo Type="typeof(Grid_Demo_02_Client_Side_Paging)" Tabs="true" />
+    <Demo Type="typeof(Grid_Demo_01_Client_Side_Paging)" Tabs="true" />
 </Section>
 
 <Section Size="HeadingSize.H2" Name="Dynamic page size" PageUrl="@pageUrl" Link="dynamic-page-size">
     <div class="mb-3"></div>
-    <Demo Type="typeof(Grid_Demo_25_Dynamic_Page_Size)" Tabs="true" />
+    <Demo Type="typeof(Grid_Demo_02_Dynamic_Page_Size)" Tabs="true" />
 </Section>
 
 <Section Size="HeadingSize.H2" Name="Page size selection" PageUrl="@pageUrl" Link="page-size-selection">
     <div class="mb-3"></div>
-    <Demo Type="typeof(Grid_Demo_26_Page_Size_Selection)" Tabs="true" />
+    <Demo Type="typeof(Grid_Demo_03_Page_Size_Selection)" Tabs="true" />
 </Section>
 
 <Section Size="HeadingSize.H2" Name="Auto hide paging" PageUrl="@pageUrl" Link="auto-hide-paging">
-    <Demo Type="typeof(Grid_Demo_34_AutoHide_Paging)" Tabs="true" />
+    <Demo Type="typeof(Grid_Demo_04_AutoHide_Paging)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Dynamic pagination" PageUrl="@pageUrl" Link="dynamic-pagination">
+    <Demo Type="typeof(Grid_Demo_05_Dynamic_Pagination)" Tabs="true" />
 </Section>
 
 @code {

blazorbootstrap/Components/Grid/Grid.razor.cs

@@ -201,6 +201,10 @@ internal async Task RefreshDataAsync(bool firstRender = false, CancellationToken
         {
             items = result.Data!.ToList();
             totalCount = result.TotalCount ?? result.Data!.Count();
+            if (result.PageNumber.HasValue)
+            {
+                gridCurrentState = new GridState<TItem>(result.PageNumber.Value, gridCurrentState.Sorting);
+            }
         }
         else
         {

blazorbootstrap/Models/GridDataProviderRequest.cs

@@ -62,13 +62,19 @@ public GridDataProviderResult<TItem> ApplyTo(IEnumerable<TItem> data)
 
         // apply paging
         var totalCount = resultData!.Count(); // before paging
-        if (PageNumber > 0 && PageSize > 0)
+        int? newPageNumber = null;
+        if (PageNumber > 0 && PageSize > 0 && totalCount > 0)
         {
             int skip = (PageNumber - 1) * PageSize;
+            if (totalCount <= skip)
+            {
+                newPageNumber = (totalCount / PageSize) + (totalCount % PageSize  == 0 ? 0 : 1);
+                skip = (newPageNumber.Value - 1) * PageSize;
+            }
             resultData = resultData!.Skip(skip).Take(PageSize);
         }
 
-        return new GridDataProviderResult<TItem> { Data = resultData, TotalCount = totalCount };
+        return new GridDataProviderResult<TItem> { Data = resultData, TotalCount = totalCount, PageNumber = newPageNumber };
     }
 
     #endregion

blazorbootstrap/Models/GridDataProviderResult.cs

@@ -20,5 +20,13 @@ public class GridDataProviderResult<TItem>
     /// </remarks>
     public int? TotalCount { get; init; }
 
+    /// <summary>
+    /// Updates the page number of the grid, if not null.
+    /// </summary>
+    /// <remarks>
+    /// Default value is null.
+    /// </remarks>
+    public int? PageNumber { get; init; }
+
     #endregion
 }