This is a migrated thread and some comments may be shown as answers.

Select All Box and filtered rows

2 Answers 442 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Philipp
Top achievements
Rank 1
Philipp asked on 24 Feb 2021, 11:43 AM

Hi there,

I'm trying to use the select-all checkbox in a grid header using the following code:

<kendo-grid-checkbox-column width="45" showSelectAll="true">

Selecting all rows on the initial grid works just fine, as is expected.

However, applying a column filter from the column's menu, thus hiding some of the existing rows and then pressing the select-all checkbox results in both visible and hidden rows being selected. Is there any way or property that allows me to get only the visible selected rows?

Also, it appears that the selected rows are not reset when applying the column filter. Is that intended behavior or is that somehow configurable. When applying the column filter which hides selected rows, I'd like them to be deselected as well.

Best regards
Philipp

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 26 Feb 2021, 08:58 AM

Hi Philipp,

The described behavior is by design so that when the end user applies some filter, and then clears it, or applies a different one which brings back some items that were previously filtered out, they can be rendered as selected, if they were part of the selection before applying the filter.

A possible approach to achieve the desired behavior and synchronize the filtering and selection functionalities,  is to gain control over the selected items, as described in the following documentation sections:

https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting/#toc-persisting-the-row-selection

https://www.telerik.com/kendo-angular-ui/components/grid/selection/persisting/#toc-with-the-select-all-feature

Then on the filterChange or dataStateChange event handler, filter the 'selectedKeys' collection in accordance with the currently applied filters.

The following example demonstrates the suggested approach:

https://stackblitz.com/edit/angular-cdkasd-yui1s4?file=app/app.component.ts

To sum up - using the kendoGridSelectBy directive and the selectedKeys collection allows the developer to take programmatic control over the current selection. Applying the desired custom logic to deselect items that were filtered out by the Grid filtering mechanism can be performed in the filterChange or dataStateChange event in accordance with the new data set, displayed in the Grid as a result of the applied filter(s).

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Philipp
Top achievements
Rank 1
answered on 26 Feb 2021, 12:44 PM

Hi Dimiter,

thanks a lot for the suggestion, that indeed worked perfectly!

Best regards
Philipp

Tags
Grid
Asked by
Philipp
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Philipp
Top achievements
Rank 1
Share this question
or