Skip to content

Commit 2d94165

Browse files
ntachevadimodi
ntacheva
and
dimodi
authored
chore(Grid): add kb for selectall with onRead (#2697)
* chore(Grid): add kb for selectall with onRead * Update knowledge-base/grid-select-all-onread.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-select-all-onread.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-select-all-onread.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * chore(grid): address feedback and update example * Update knowledge-base/grid-select-all-onread.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent e1c88b7 commit 2d94165

File tree

1 file changed

+182
-0
lines changed

1 file changed

+182
-0
lines changed

‎knowledge-base/grid-select-all-onread.md

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
title: Select All Grid Items With CheckBox when Using OnRead
3+
description: How to select all Grid rows with checkBox when using the OnRead event in the Telerik Grid for Blazor.
4+
type: how-to
5+
page_title: How to Select All Grid Items With CheckBox when Using OnRead
6+
slug: grid-kb-select-all-onread
7+
position:
8+
tags: grid, selection, select all, checkbox, onread
9+
ticketid: 1562945, 1680863
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td>Product</td>
19+
<td>Grid for Blazor</td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
24+
25+
## Description
26+
27+
I am binding the Grid through the `OnRead` event and I am using CheckBox selection with `SelectAllMode` set to `GridSelectAllMode.All`. However, when the user clicks the SelectAll CheckBox, only the items on the current page are selected, not all items in the dataset. How to ensure all items will be selected when clicking the SelectAll CheckBox.
28+
29+
## Cause
30+
31+
The described behavior is expected as when using the `OnRead` event, the Grid operates only with the current set/page of data. The component does not have information for all the items in your datasource and [thus it cannot select them all](slug:grid-selection-row#selection-and-paging).
32+
33+
## Solution
34+
35+
To ensure all items will be selected upon clicking the SelectAll CheckBox when using the `OnRead` event, you can implement a custom approach:
36+
37+
1. Use [`HeaderTemplate` for the `CheckboxColumn`](slug:components/grid/columns/checkbox#header-template) and add a custom [CheckBox component](slug:checkbox-overview) so you can have full control over its behavior.
38+
1. Handle the [`ValueChanged` event](slug:checkbox-events#valuechanged) of the CheckBox to track when the user checks/unchecks it to manage the selected items.
39+
- When the CheckBox is checked, add the newly coming items to the `SelectedItems` collection, so you have all items selected. This requires custom logic in the Grid `OnRead` and `SelectedItemsChanged` events.
40+
- When the user deselects the CheckBox, clear the `SelectedItems` collection.
41+
1. Manage the [`Indeterminate` state](slug:checkbox-indeterminate-state) of the CheckBox based on the selected items' count.
42+
1. Track [when the user changes the `Indeterminate` state](slug:checkbox-events#indeterminatechanged) of the CheckBox (clicks the CheckBox when it is in `Indeterminate` state). In this case, ensure that the CheckBox value will be always set to true if you want to completely mimic the default CheckBox selection behavior.
43+
44+
>caption Select all items with CheckBox when using OnRead
45+
46+
````RAZOR
47+
@using Telerik.DataSource
48+
@using Telerik.DataSource.Extensions
49+
50+
<TelerikGrid OnRead="@OnGridRead"
51+
TItem="@SampleModel"
52+
Pageable="true"
53+
SelectedItems="@GridSelectedItems"
54+
SelectedItemsChanged="@GridSelectedItemsChanged"
55+
SelectionMode="@GridSelectionMode.Multiple">
56+
<GridToolBarTemplate>
57+
All Items Selected: @(SelectAllCheckBoxValue.HasValue && SelectAllCheckBoxValue.Value)
58+
<span class="k-separator"></span>
59+
GridSelectedItems Count: @GridSelectedItems.Count()
60+
</GridToolBarTemplate>
61+
<GridColumns>
62+
<GridCheckboxColumn>
63+
<HeaderTemplate>
64+
@{
65+
<TelerikCheckBox Value="@SelectAllCheckBoxValue"
66+
ValueChanged="@( (bool? newValue) => SelectAllCheckBoxValueChanged(newValue) )"
67+
TabIndex="-1"
68+
Indeterminate="@(SelectAllCheckBoxValue == null)" />
69+
}
70+
</HeaderTemplate>
71+
</GridCheckboxColumn>
72+
<GridColumn Field="@nameof(SampleModel.Name)" />
73+
<GridColumn Field="@nameof(SampleModel.Price)" />
74+
<GridColumn Field="@nameof(SampleModel.Quantity)" />
75+
</GridColumns>
76+
</TelerikGrid>
77+
78+
@code {
79+
private List<SampleModel> GridData { get; set; } = new();
80+
private IEnumerable<SampleModel> GridSelectedItems { get; set; } = new List<SampleModel>();
81+
private bool? SelectAllCheckBoxValue { get; set; } = false;
82+
private IEnumerable<SampleModel> GridCurrentData { get; set; } = Enumerable.Empty<SampleModel>();
83+
private int GridCurrentTotal { get; set; }
84+
85+
private void SelectAllCheckBoxValueChanged(bool? newValue)
86+
{
87+
SelectAllCheckBoxValue = newValue;
88+
89+
if (SelectAllCheckBoxValue.HasValue && !SelectAllCheckBoxValue.Value)
90+
{
91+
GridSelectedItems = new List<SampleModel>();
92+
}
93+
else
94+
{
95+
AddItemsToSelection();
96+
}
97+
}
98+
99+
private void GridSelectedItemsChanged(IEnumerable<SampleModel> newSelectedItems)
100+
{
101+
if (SelectAllCheckBoxValue.HasValue)
102+
{
103+
SelectAllCheckBoxValue = null;
104+
}
105+
106+
GridSelectedItems = newSelectedItems;
107+
}
108+
109+
private void AddItemsToSelection()
110+
{
111+
GridCurrentData.Each(x =>
112+
{
113+
var selectedItemsList = (List<SampleModel>)GridSelectedItems;
114+
if (!selectedItemsList.Contains(x))
115+
{
116+
selectedItemsList.Add(x);
117+
}
118+
});
119+
}
120+
121+
private async Task OnGridRead(GridReadEventArgs args)
122+
{
123+
DataSourceResult result = await GridData.ToDataSourceResultAsync(args.Request);
124+
125+
args.Data = result.Data;
126+
args.Total = result.Total;
127+
args.AggregateResults = result.AggregateResults;
128+
129+
GridCurrentData = result.Data.Cast<SampleModel>();
130+
GridCurrentTotal = result.Total;
131+
132+
if (SelectAllCheckBoxValue.HasValue && SelectAllCheckBoxValue.Value)
133+
{
134+
AddItemsToSelection();
135+
}
136+
}
137+
138+
protected override void OnInitialized()
139+
{
140+
for (int i = 1; i <= 1000; i++)
141+
{
142+
GridData.Add(new SampleModel()
143+
{
144+
Id = i,
145+
Name = $"Name {i}",
146+
GroupName = $"Group {i % 3 + 1}",
147+
Price = Random.Shared.Next(1, 100) * 1.23m,
148+
Quantity = Random.Shared.Next(0, 1000),
149+
StartDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)),
150+
IsActive = i % 4 > 0
151+
});
152+
}
153+
}
154+
155+
public class SampleModel
156+
{
157+
public int Id { get; set; }
158+
public string Name { get; set; } = string.Empty;
159+
public string GroupName { get; set; } = string.Empty;
160+
public decimal Price { get; set; }
161+
public int Quantity { get; set; }
162+
public DateTime StartDate { get; set; }
163+
public bool IsActive { get; set; }
164+
165+
public override bool Equals(object? obj)
166+
{
167+
return obj is SampleModel && ((SampleModel)obj).Id == Id;
168+
}
169+
170+
public override int GetHashCode()
171+
{
172+
return base.GetHashCode();
173+
}
174+
}
175+
}
176+
````
177+
178+
## See Also
179+
180+
* [Grid Row Selection](slug:grid-selection-row)
181+
* [Grid CheckBox Column](slug:components/grid/columns/checkbox)
182+
* [CheckBox component](slug:checkbox-overview)

0 commit comments

Comments
 (0)