From 94150173e3dfb24237f16188f02bd4822fa42169 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 10 Jan 2025 18:54:53 +0200 Subject: [PATCH 1/6] chore(Grid): add kb for selectall with onRead --- knowledge-base/grid-select-all-onread.md | 147 +++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 knowledge-base/grid-select-all-onread.md diff --git a/knowledge-base/grid-select-all-onread.md b/knowledge-base/grid-select-all-onread.md new file mode 100644 index 000000000..ef039a626 --- /dev/null +++ b/knowledge-base/grid-select-all-onread.md @@ -0,0 +1,147 @@ +--- +title: Select All Items With CheckBox when Using OnRead +description: How Select All Items With CheckBox when Using OnRead in the Grid for Blazor +type: how-to +page_title: How Select All Items With CheckBox when Using OnRead +slug: grid-kb-select-all-onread +position: +tags: grid, selection, select all, checkbox, onread +ticketid: 1562945 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ + +## Description + +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. + +## Solution + +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). + +To ensure all item will be selected upon clicking the SelectAll CheckBox when using the `OnRead` event, you can implement a custom approach: + +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. +1. Handle the [`OnChange` event](slug:checkbox-events#onchange) of the CheckBox to track when the user checks/unchecks it to manage the selected items. + - When the CheckBox is checked, request all the data from your datasource and assign it to the `SelectedItems` collection, so you have all items selected. You may want to cache all the data for further usage, so you don't need to request it additionally upon clicking the custom SelectAll CheckBox. + - When the user deselects the CheckBox, clear the `SelectedItems` collection. +1. Manage the [`Indeterminate` state](slug:checkbox-indeterminate-state) of the CheckBox based on the selected items' count. +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. + +>caption Select all items with CheckBox when using OnRead + +````RAZOR +@using Telerik.DataSource.Extensions + + + + + + @{ + + } + + + + + + + + +@code { + private List SourceData { get; set; } + + private IEnumerable SelectedEmployees { get; set; } = Enumerable.Empty(); + + private bool SelectAllCheckBoxValue { get; set; } + + private int Total { get; set; } = 0; + + //Track when the user checks/unchecks the custom SelectAll CheckBox + private void HandleSelectAll() + { + if (SelectAllCheckBoxValue) + { + // Request all the data and assign it to the SelectedItems collection. Here we use the already available SourceData for brevity. + SelectedEmployees = SourceData; + } + else + { + SelectedEmployees = Enumerable.Empty(); + } + } + + // Ensure that clicking the custom SelectAll CheckBox when it is in its indeterminate state will always select all items. + // This mimics the default SelectAll CheckBox behavior. + private void HandleIndeterminateChanged(bool value) + { + if (!value) + { + SelectAllCheckBoxValue = true; + } + } + + protected async Task ReadItems(GridReadEventArgs args) + { + var datasourceResult = SourceData.ToDataSourceResult(args.Request); + + args.Data = datasourceResult.Data; + args.Total = datasourceResult.Total; + + Total = datasourceResult.Total; + } + + protected override void OnInitialized() + { + SourceData = GenerateData(); + } + + private List GenerateData() + { + var result = new List(); + var rand = new Random(); + for (int i = 0; i < 100; i++) + { + result.Add(new Employee() + { + ID = i, + Name = "Name " + i, + HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)) + }); + } + + return result; + } + + public class Employee + { + public int ID { get; set; } + public string Name { get; set; } + public DateTime HireDate { get; set; } + } +} +```` + +## See Also + +* [Grid Row Selection](slug:grid-selection-row) +* [Grid CheckBox Column](slug:components/grid/columns/checkbox) +* [CheckBox component](slug:checkbox-overview) \ No newline at end of file From 0c4821941ed528f020f8b35397fb679c66d957cc Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 19 Mar 2025 19:35:09 +0200 Subject: [PATCH 2/6] Update knowledge-base/grid-select-all-onread.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-select-all-onread.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-select-all-onread.md b/knowledge-base/grid-select-all-onread.md index ef039a626..426c0fe01 100644 --- a/knowledge-base/grid-select-all-onread.md +++ b/knowledge-base/grid-select-all-onread.md @@ -1,5 +1,5 @@ --- -title: Select All Items With CheckBox when Using OnRead +title: Select All Grid Items With CheckBox when Using OnRead description: How Select All Items With CheckBox when Using OnRead in the Grid for Blazor type: how-to page_title: How Select All Items With CheckBox when Using OnRead From 5c61956b44624b1769d9fc2e0788e098e4f345de Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 19 Mar 2025 19:35:16 +0200 Subject: [PATCH 3/6] Update knowledge-base/grid-select-all-onread.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-select-all-onread.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-select-all-onread.md b/knowledge-base/grid-select-all-onread.md index 426c0fe01..7ec02fbf9 100644 --- a/knowledge-base/grid-select-all-onread.md +++ b/knowledge-base/grid-select-all-onread.md @@ -2,7 +2,7 @@ title: Select All Grid Items With CheckBox when Using OnRead description: How Select All Items With CheckBox when Using OnRead in the Grid for Blazor type: how-to -page_title: How Select All Items With CheckBox when Using OnRead +page_title: How to Select All Grid Items With CheckBox when Using OnRead slug: grid-kb-select-all-onread position: tags: grid, selection, select all, checkbox, onread From 888ecab35de49412bec0870259a3636f3c4c0421 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 19 Mar 2025 19:35:31 +0200 Subject: [PATCH 4/6] Update knowledge-base/grid-select-all-onread.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-select-all-onread.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-select-all-onread.md b/knowledge-base/grid-select-all-onread.md index 7ec02fbf9..dc49d5318 100644 --- a/knowledge-base/grid-select-all-onread.md +++ b/knowledge-base/grid-select-all-onread.md @@ -1,6 +1,6 @@ --- title: Select All Grid Items With CheckBox when Using OnRead -description: How Select All Items With CheckBox when Using OnRead in the Grid for Blazor +description: How to select all Grid rows with checkBox when using the OnRead event in the Telerik Grid for Blazor. type: how-to page_title: How to Select All Grid Items With CheckBox when Using OnRead slug: grid-kb-select-all-onread From c5ee158aa6e3b2ea341fc6d79de1362f0a2abd01 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 25 Mar 2025 13:23:25 +0200 Subject: [PATCH 5/6] chore(grid): address feedback and update example --- knowledge-base/grid-select-all-onread.md | 153 ++++++++++++++--------- 1 file changed, 94 insertions(+), 59 deletions(-) diff --git a/knowledge-base/grid-select-all-onread.md b/knowledge-base/grid-select-all-onread.md index dc49d5318..e94288c2f 100644 --- a/knowledge-base/grid-select-all-onread.md +++ b/knowledge-base/grid-select-all-onread.md @@ -26,15 +26,17 @@ res_type: kb 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. -## Solution +## Cause 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). -To ensure all item will be selected upon clicking the SelectAll CheckBox when using the `OnRead` event, you can implement a custom approach: +## Solution + +To ensure all items will be selected upon clicking the SelectAll CheckBox when using the `OnRead` event, you can implement a custom approach: 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. -1. Handle the [`OnChange` event](slug:checkbox-events#onchange) of the CheckBox to track when the user checks/unchecks it to manage the selected items. - - When the CheckBox is checked, request all the data from your datasource and assign it to the `SelectedItems` collection, so you have all items selected. You may want to cache all the data for further usage, so you don't need to request it additionally upon clicking the custom SelectAll CheckBox. +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. + - 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. - When the user deselects the CheckBox, clear the `SelectedItems` collection. 1. Manage the [`Indeterminate` state](slug:checkbox-indeterminate-state) of the CheckBox based on the selected items' count. 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. @@ -42,100 +44,133 @@ To ensure all item will be selected upon clicking the SelectAll CheckBox when us >caption Select all items with CheckBox when using OnRead ````RAZOR +@using Telerik.DataSource @using Telerik.DataSource.Extensions - + + + All Items Selected: @(SelectAllCheckBoxValue.HasValue && SelectAllCheckBoxValue.Value) + + GridSelectedItems Count: @GridSelectedItems.Count() + - + @{ - + } - - - + + + @code { - private List SourceData { get; set; } - - private IEnumerable SelectedEmployees { get; set; } = Enumerable.Empty(); + private List GridData { get; set; } = new(); + private IEnumerable GridSelectedItems { get; set; } = new List(); + private bool? SelectAllCheckBoxValue { get; set; } = false; + private IEnumerable GridCurrentData { get; set; } = Enumerable.Empty(); + private int GridCurrentTotal { get; set; } - private bool SelectAllCheckBoxValue { get; set; } - - private int Total { get; set; } = 0; - - //Track when the user checks/unchecks the custom SelectAll CheckBox - private void HandleSelectAll() + private void SelectAllCheckBoxValueChanged(bool? newValue) { - if (SelectAllCheckBoxValue) + SelectAllCheckBoxValue = newValue; + + if (SelectAllCheckBoxValue.HasValue && !SelectAllCheckBoxValue.Value) { - // Request all the data and assign it to the SelectedItems collection. Here we use the already available SourceData for brevity. - SelectedEmployees = SourceData; + GridSelectedItems = new List(); } else { - SelectedEmployees = Enumerable.Empty(); + AddItemsToSelection(); } - } + } - // Ensure that clicking the custom SelectAll CheckBox when it is in its indeterminate state will always select all items. - // This mimics the default SelectAll CheckBox behavior. - private void HandleIndeterminateChanged(bool value) + private void GridSelectedItemsChanged(IEnumerable newSelectedItems) { - if (!value) + if (SelectAllCheckBoxValue.HasValue) { - SelectAllCheckBoxValue = true; + SelectAllCheckBoxValue = null; } + + GridSelectedItems = newSelectedItems; } - protected async Task ReadItems(GridReadEventArgs args) + private void AddItemsToSelection() { - var datasourceResult = SourceData.ToDataSourceResult(args.Request); - - args.Data = datasourceResult.Data; - args.Total = datasourceResult.Total; - - Total = datasourceResult.Total; + GridCurrentData.Each(x => + { + var selectedItemsList = (List)GridSelectedItems; + if (!selectedItemsList.Contains(x)) + { + selectedItemsList.Add(x); + } + }); } - protected override void OnInitialized() + private async Task OnGridRead(GridReadEventArgs args) { - SourceData = GenerateData(); + DataSourceResult result = await GridData.ToDataSourceResultAsync(args.Request); + + args.Data = result.Data; + args.Total = result.Total; + args.AggregateResults = result.AggregateResults; + + GridCurrentData = result.Data.Cast(); + GridCurrentTotal = result.Total; + + if (SelectAllCheckBoxValue.HasValue && SelectAllCheckBoxValue.Value) + { + AddItemsToSelection(); + } } - private List GenerateData() + protected override void OnInitialized() { - var result = new List(); - var rand = new Random(); - for (int i = 0; i < 100; i++) + for (int i = 1; i <= 1000; i++) { - result.Add(new Employee() + GridData.Add(new SampleModel() { - ID = i, - Name = "Name " + i, - HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)) + Id = i, + Name = $"Name {i}", + GroupName = $"Group {i % 3 + 1}", + Price = Random.Shared.Next(1, 100) * 1.23m, + Quantity = Random.Shared.Next(0, 1000), + StartDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)), + IsActive = i % 4 > 0 }); } - - return result; } - public class Employee + public class SampleModel { - public int ID { get; set; } - public string Name { get; set; } - public DateTime HireDate { get; set; } + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + public string GroupName { get; set; } = string.Empty; + public decimal Price { get; set; } + public int Quantity { get; set; } + public DateTime StartDate { get; set; } + public bool IsActive { get; set; } + + public override bool Equals(object? obj) + { + return obj is SampleModel && ((SampleModel)obj).Id == Id; + } + + public override int GetHashCode() + { + return base.GetHashCode(); + } } } ```` From 96f9805f4d8bcccf901c5b8e89df2c8d126a458b Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 13:40:05 +0200 Subject: [PATCH 6/6] Update knowledge-base/grid-select-all-onread.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-select-all-onread.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-select-all-onread.md b/knowledge-base/grid-select-all-onread.md index e94288c2f..b1f3b9cdb 100644 --- a/knowledge-base/grid-select-all-onread.md +++ b/knowledge-base/grid-select-all-onread.md @@ -6,7 +6,7 @@ page_title: How to Select All Grid Items With CheckBox when Using OnRead slug: grid-kb-select-all-onread position: tags: grid, selection, select all, checkbox, onread -ticketid: 1562945 +ticketid: 1562945, 1680863 res_type: kb ---