Skip to content

Commit b647d53

Browse files
rajrakuRaj Kumar Sri Ramulugvreddy04
authored
689 custom page number (#1059)
* Added a field to Grid data result to use the new page number when the skip value is greater than or equal to total available value * Updated the Grid to apply the new page number if available * Updated the example to validate the change * #689, #443 - Demos updated --------- Co-authored-by: Raj Kumar Sri Ramulu <[email protected]> Co-authored-by: Vikram Reddy <[email protected]>
1 parent 89574fa commit b647d53

10 files changed

+135
-17
lines changed

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

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<Grid TItem="Employee1"
2-
Class="table table-hover table-bordered table-striped"
3-
DataProvider="EmployeesDataProvider"
4-
AllowFiltering="true"
5-
AllowPaging="true"
6-
PageSize="5"
7-
AllowSorting="true"
8-
AllowSelection="true"
9-
SelectionMode="GridSelectionMode.Multiple"
10-
SelectedItemsChanged="OnSelectedItemsChanged"
11-
Responsive="true">
1+
<Grid TItem="Employee1"
2+
Class="table table-hover table-bordered table-striped"
3+
DataProvider="EmployeesDataProvider"
4+
AllowFiltering="true"
5+
AllowPaging="true"
6+
PageSize="5"
7+
AllowSorting="true"
8+
AllowSelection="true"
9+
SelectionMode="GridSelectionMode.Multiple"
10+
SelectedItemsChanged="OnSelectedItemsChanged"
11+
Responsive="true">
1212

1313
<GridColumns>
1414
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_02_Client_Side_Paging.razor renamed to ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_01_Client_Side_Paging.razor

File renamed without changes.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_25_Dynamic_Page_Size.razor renamed to ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_02_Dynamic_Page_Size.razor

File renamed without changes.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_26_Page_Size_Selection.razor renamed to ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_03_Page_Size_Selection.razor

File renamed without changes.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_34_AutoHide_Paging.razor renamed to ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_04_AutoHide_Paging.razor

File renamed without changes.

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

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<div class="mb-3">
2+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="AddEmployee"> Add Employee </Button>
3+
<Button Type="ButtonType.Button" Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="RemoveEmployee"> Remove Employee </Button>
4+
</div>
5+
6+
<Grid TItem="Employee1"
7+
@ref="grid"
8+
Class="table table-hover table-bordered table-striped"
9+
DataProvider="EmployeesDataProvider"
10+
AllowFiltering="true"
11+
AllowPaging="true"
12+
PageSize="5"
13+
AllowSorting="true"
14+
Responsive="true">
15+
16+
<GridColumns>
17+
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
18+
@context.Id
19+
</GridColumn>
20+
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" FilterTextboxWidth="50" SortKeySelector="item => item.Name">
21+
@context.Name
22+
</GridColumn>
23+
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
24+
@context.Designation
25+
</GridColumn>
26+
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
27+
@context.DOJ
28+
</GridColumn>
29+
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
30+
@context.IsActive
31+
</GridColumn>
32+
</GridColumns>
33+
34+
</Grid>
35+
36+
@code {
37+
Grid<Employee1> grid = default!;
38+
private List<Employee1>? employees = default!;
39+
40+
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
41+
{
42+
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
43+
employees = GetEmployees(); // call a service or an API to pull the employees
44+
45+
return await Task.FromResult(request.ApplyTo(employees));
46+
}
47+
48+
private List<Employee1> GetEmployees()
49+
{
50+
return new List<Employee1>
51+
{
52+
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
53+
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
54+
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
55+
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
56+
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
57+
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
58+
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
59+
new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
60+
new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
61+
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
62+
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
63+
new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
64+
};
65+
}
66+
67+
private async Task AddEmployee()
68+
{
69+
if(employees is null)
70+
employees = new();
71+
72+
// for the same employees collection, we are adding an object
73+
// explicit grid refresh required
74+
employees.Add(CreateEmployee());
75+
await grid.RefreshDataAsync();
76+
}
77+
78+
private Employee1 CreateEmployee()
79+
{
80+
var emp = new Employee1();
81+
emp.Id = (employees?.Any() ?? false) ? employees.Max(x => x.Id) + 1 : 1;
82+
emp.Name = $"Employee {emp.Id}";
83+
emp.Designation = $"QA Engineer {emp.Id}";
84+
emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25));
85+
emp.IsActive = true;
86+
return emp;
87+
}
88+
89+
private async Task RemoveEmployee()
90+
{
91+
if (employees!.Count > 0)
92+
employees!.Remove(employees.Last());
93+
94+
await grid.RefreshDataAsync();
95+
}
96+
}

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

+8-4
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,25 @@
1515
<div>For paging, <code>AllowPaging</code> and <code>PageSize</code> parameters are required.</div>
1616
<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>
1717
<Callout Color="CalloutColor.Info">The default page size is 10.</Callout>
18-
<Demo Type="typeof(Grid_Demo_02_Client_Side_Paging)" Tabs="true" />
18+
<Demo Type="typeof(Grid_Demo_01_Client_Side_Paging)" Tabs="true" />
1919
</Section>
2020

2121
<Section Size="HeadingSize.H2" Name="Dynamic page size" PageUrl="@pageUrl" Link="dynamic-page-size">
2222
<div class="mb-3"></div>
23-
<Demo Type="typeof(Grid_Demo_25_Dynamic_Page_Size)" Tabs="true" />
23+
<Demo Type="typeof(Grid_Demo_02_Dynamic_Page_Size)" Tabs="true" />
2424
</Section>
2525

2626
<Section Size="HeadingSize.H2" Name="Page size selection" PageUrl="@pageUrl" Link="page-size-selection">
2727
<div class="mb-3"></div>
28-
<Demo Type="typeof(Grid_Demo_26_Page_Size_Selection)" Tabs="true" />
28+
<Demo Type="typeof(Grid_Demo_03_Page_Size_Selection)" Tabs="true" />
2929
</Section>
3030

3131
<Section Size="HeadingSize.H2" Name="Auto hide paging" PageUrl="@pageUrl" Link="auto-hide-paging">
32-
<Demo Type="typeof(Grid_Demo_34_AutoHide_Paging)" Tabs="true" />
32+
<Demo Type="typeof(Grid_Demo_04_AutoHide_Paging)" Tabs="true" />
33+
</Section>
34+
35+
<Section Size="HeadingSize.H2" Name="Dynamic pagination" PageUrl="@pageUrl" Link="dynamic-pagination">
36+
<Demo Type="typeof(Grid_Demo_05_Dynamic_Pagination)" Tabs="true" />
3337
</Section>
3438

3539
@code {

‎blazorbootstrap/Components/Grid/Grid.razor.cs

+4
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,10 @@ internal async Task RefreshDataAsync(bool firstRender = false, CancellationToken
201201
{
202202
items = result.Data!.ToList();
203203
totalCount = result.TotalCount ?? result.Data!.Count();
204+
if (result.PageNumber.HasValue)
205+
{
206+
gridCurrentState = new GridState<TItem>(result.PageNumber.Value, gridCurrentState.Sorting);
207+
}
204208
}
205209
else
206210
{

‎blazorbootstrap/Models/GridDataProviderRequest.cs

+8-2
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,19 @@ public GridDataProviderResult<TItem> ApplyTo(IEnumerable<TItem> data)
6262

6363
// apply paging
6464
var totalCount = resultData!.Count(); // before paging
65-
if (PageNumber > 0 && PageSize > 0)
65+
int? newPageNumber = null;
66+
if (PageNumber > 0 && PageSize > 0 && totalCount > 0)
6667
{
6768
int skip = (PageNumber - 1) * PageSize;
69+
if (totalCount <= skip)
70+
{
71+
newPageNumber = (totalCount / PageSize) + (totalCount % PageSize == 0 ? 0 : 1);
72+
skip = (newPageNumber.Value - 1) * PageSize;
73+
}
6874
resultData = resultData!.Skip(skip).Take(PageSize);
6975
}
7076

71-
return new GridDataProviderResult<TItem> { Data = resultData, TotalCount = totalCount };
77+
return new GridDataProviderResult<TItem> { Data = resultData, TotalCount = totalCount, PageNumber = newPageNumber };
7278
}
7379

7480
#endregion

‎blazorbootstrap/Models/GridDataProviderResult.cs

+8
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,13 @@ public class GridDataProviderResult<TItem>
2020
/// </remarks>
2121
public int? TotalCount { get; init; }
2222

23+
/// <summary>
24+
/// Updates the page number of the grid, if not null.
25+
/// </summary>
26+
/// <remarks>
27+
/// Default value is null.
28+
/// </remarks>
29+
public int? PageNumber { get; init; }
30+
2331
#endregion
2432
}

0 commit comments

Comments
 (0)