Skip to content

Commit 630fa43

Browse files
gvreddy04gvreddy04
committed
1 parent bac4da8 commit 630fa43

7 files changed

+107
-40
lines changed

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

+3-36
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
<Grid TItem="Employee1"
2-
@ref="grid"
1+
<Grid TItem="Employee1"
32
Class="table table-hover table-bordered table-striped"
43
DataProvider="EmployeesDataProvider"
54
AllowFiltering="true"
@@ -30,8 +29,6 @@
3029
</GridColumns>
3130

3231
</Grid>
33-
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="AddEmployee"> Add Employee </Button>
34-
<Button Type="ButtonType.Button" Color="ButtonColor.Danger" @onclick="RemoveEmployee"> Remove Employee </Button>
3532

3633
<div class="mt-3">
3734
Selected Items Count: @selectedEmployees.Count
@@ -48,8 +45,7 @@
4845
</div>
4946

5047
@code {
51-
Grid<Employee1> grid = default!;
52-
private List<Employee1>? employees = default!;
48+
private IEnumerable<Employee1> employees = default!;
5349

5450
private HashSet<Employee1> selectedEmployees = new();
5551

@@ -61,7 +57,7 @@
6157
return await Task.FromResult(request.ApplyTo(employees));
6258
}
6359

64-
private List<Employee1> GetEmployees()
60+
private IEnumerable<Employee1> GetEmployees()
6561
{
6662
return new List<Employee1>
6763
{
@@ -80,35 +76,6 @@
8076
};
8177
}
8278

83-
private async Task AddEmployee()
84-
{
85-
// for the same employees collection, we are adding an object
86-
// explicit grid refresh required
87-
employees!.Add(CreateEmployee());
88-
await grid.RefreshDataAsync();
89-
}
90-
91-
private Employee1 CreateEmployee()
92-
{
93-
var emp = new Employee1();
94-
emp.Id = employees!.Max(x => x.Id) + 1;
95-
emp.Name = $"Employee {emp.Id}";
96-
emp.Designation = $"QA Engineer {emp.Id}";
97-
emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25));
98-
emp.IsActive = true;
99-
return emp;
100-
}
101-
102-
103-
private async Task RemoveEmployee()
104-
{
105-
if (employees!.Count > 0)
106-
employees!.Remove(employees.Last());
107-
108-
await grid.RefreshDataAsync();
109-
}
110-
111-
11279
private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
11380
{
11481
selectedEmployees = employees is not null && employees.Any() ? employees : new();

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_02_Client_Side_Paging.razor ‎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 ‎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 ‎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 ‎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 {

0 commit comments

Comments
 (0)