Skip to content

Commit 3ba6472

Browse files
gvreddy04gvreddy04
authored
Grid selected items (#992)
* #298, #593, and #957 - grid selected items
1 parent a0c46e6 commit 3ba6472

7 files changed

+242
-42
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_01_Selection.razor renamed to ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_01_A_Selection.razor

+1-7
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Class="table table-hover table-bordered"
33
DataProvider="EmployeesDataProvider"
44
AllowSelection="true"
5-
SelectedItemsChanged="OnSelectedItemsChanged"
5+
@bind-SelectedItems="@selectedEmployees"
66
Responsive="true">
77

88
<GridColumns>
@@ -69,10 +69,4 @@
6969
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
7070
};
7171
}
72-
73-
private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
74-
{
75-
selectedEmployees = employees is not null && employees.Any() ? employees : new();
76-
return Task.CompletedTask;
77-
}
7872
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_01_B_Default_Selection.razor

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<Grid TItem="Employee1"
2+
Class="table table-hover table-bordered"
3+
DataProvider="EmployeesDataProvider"
4+
AllowSelection="true"
5+
@bind-SelectedItems="@selectedEmployees"
6+
Responsive="true">
7+
8+
<GridColumns>
9+
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
10+
@context.Id
11+
</GridColumn>
12+
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
13+
@context.Name
14+
</GridColumn>
15+
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
16+
@context.Designation
17+
</GridColumn>
18+
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
19+
@context.DOJ
20+
</GridColumn>
21+
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
22+
@context.IsActive
23+
</GridColumn>
24+
</GridColumns>
25+
26+
</Grid>
27+
28+
<div class="mt-3">
29+
Selected Items Count: @selectedEmployees.Count
30+
</div>
31+
32+
<div class="mt-2">
33+
Selected Employees:
34+
<ul>
35+
@foreach (var emp in selectedEmployees)
36+
{
37+
<li>@emp.Name</li>
38+
}
39+
</ul>
40+
</div>
41+
42+
@code {
43+
private IEnumerable<Employee1> employees = default!;
44+
45+
private HashSet<Employee1> selectedEmployees = new(){
46+
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true }
47+
};
48+
49+
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
50+
{
51+
Console.WriteLine("EmployeesDataProvider called...");
52+
53+
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
54+
employees = GetEmployees(); // call a service or an API to pull the employees
55+
56+
return await Task.FromResult(request.ApplyTo(employees));
57+
}
58+
59+
private IEnumerable<Employee1> GetEmployees()
60+
{
61+
return new List<Employee1>
62+
{
63+
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
64+
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
65+
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
66+
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
67+
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
68+
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
69+
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
70+
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
71+
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
72+
};
73+
}
74+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_02_A_Multiple_Selection.razor

+5-8
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
AllowFiltering="true"
55
AllowSelection="true"
66
SelectionMode="GridSelectionMode.Multiple"
7-
SelectedItemsChanged="OnSelectedItemsChanged"
7+
@bind-SelectedItems="@selectedEmployees"
88
Responsive="true">
99

1010
<GridColumns>
@@ -44,7 +44,10 @@
4444
@code {
4545
private IEnumerable<Employee1> employees = default!;
4646

47-
private HashSet<Employee1> selectedEmployees = new();
47+
private HashSet<Employee1> selectedEmployees = new(){
48+
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
49+
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
50+
};
4851

4952
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
5053
{
@@ -71,10 +74,4 @@
7174
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
7275
};
7376
}
74-
75-
private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
76-
{
77-
selectedEmployees = employees is not null && employees.Any() ? employees : new();
78-
return Task.CompletedTask;
79-
}
8077
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_02_C_Multiple_Selection_Default_Programmatically.razor

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<div class="mb-3">
2+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="SelectAllEmployees">Select All</Button>
3+
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="UnselectAllEmployees">Unselect All</Button>
4+
</div>
5+
6+
<Grid @ref="gridRef" TItem="Employee1"
7+
Class="table table-hover table-bordered"
8+
DataProvider="EmployeesDataProvider"
9+
AllowFiltering="true"
10+
AllowSelection="true"
11+
SelectionMode="GridSelectionMode.Multiple"
12+
SelectedItemsChanged="OnSelectedItemsChanged"
13+
Responsive="true">
14+
15+
<GridColumns>
16+
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
17+
@context.Id
18+
</GridColumn>
19+
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
20+
@context.Name
21+
</GridColumn>
22+
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
23+
@context.Designation
24+
</GridColumn>
25+
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
26+
@context.DOJ
27+
</GridColumn>
28+
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
29+
@context.IsActive
30+
</GridColumn>
31+
</GridColumns>
32+
33+
</Grid>
34+
35+
<div class="mt-3">
36+
Selected Items Count: @selectedEmployees.Count
37+
</div>
38+
39+
<div class="mt-2">
40+
Selected Employees:
41+
<ul>
42+
@foreach (var emp in selectedEmployees)
43+
{
44+
<li>@emp.Name</li>
45+
}
46+
</ul>
47+
</div>
48+
49+
@code {
50+
private Grid<Employee1> gridRef;
51+
private IEnumerable<Employee1> employees = default!;
52+
53+
private HashSet<Employee1> selectedEmployees = new();
54+
55+
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
56+
{
57+
Console.WriteLine("EmployeesDataProvider called...");
58+
59+
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
60+
employees = GetEmployees(); // call a service or an API to pull the employees
61+
62+
return await Task.FromResult(request.ApplyTo(employees));
63+
}
64+
65+
private IEnumerable<Employee1> GetEmployees()
66+
{
67+
return new List<Employee1>
68+
{
69+
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
70+
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
71+
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
72+
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
73+
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
74+
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
75+
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
76+
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
77+
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
78+
};
79+
}
80+
81+
private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
82+
{
83+
selectedEmployees = employees is not null && employees.Any() ? employees : new();
84+
return Task.CompletedTask;
85+
}
86+
87+
private Task SelectAllEmployees() => gridRef.SelectAllItemsAsync();
88+
89+
private Task UnselectAllEmployees() => gridRef.UnSelectAllItemsAsync();
90+
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor

+9-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,15 @@
1616
Set <code>AllowSelection="true"</code> to enable the selection on the <code>Grid</code>.
1717
By default, <code>SelectionMode</code> is <b>Single</b>.
1818
</div>
19-
<Demo Type="typeof(Grid_Demo_01_Selection)" Tabs="true" />
19+
<Demo Type="typeof(Grid_Demo_01_A_Selection)" Tabs="true" />
20+
</Section>
21+
22+
<Section Size="HeadingSize.H2" Name="Default selection" PageUrl="@pageUrl" Link="default-selection">
23+
<div class="mb-3">
24+
Set <code>AllowSelection="true"</code> to enable the selection on the <code>Grid</code>.
25+
By default, <code>SelectionMode</code> is <b>Single</b>.
26+
</div>
27+
<Demo Type="typeof(Grid_Demo_01_B_Default_Selection)" Tabs="true" />
2028
</Section>
2129

2230
<Section Size="HeadingSize.H2" Name="Multiple selection" PageUrl="@pageUrl" Link="multiple-selection">

0 commit comments

Comments
 (0)