Two questions regarding grid selection

1 Answer 340 Views
Top achievements
Rank 1
Philipp asked on 30 Apr 2021, 11:29 AM | edited on 30 Apr 2021, 11:31 AM

Hi there,

recently we've been implementing row selection on all grids in our application. We've implemented persisting the selection and the custom select-all logic that also selects rows from all pages when using pagination according to:

Question #1

With this logic implemented, we're now running into an issue though. Selecting all rows using the select-all checkbox and afterwards clicking a single row on any page (without using Ctrl):

  • selects that single row (expected)
  • deselects all other rows on the page (expected), but
  • keeps all rows on other pages selected (not expected)

Is there any way to override the selection mechanism to include all pages when selecting a single item via regular click after applying the custom select-all logic? I've tried using the selectionChange event, but since we're adding the other pages' rows via the custom logic above, the provided event data does not contain enough information out of the box to detect whether the user just deselected all rows on a page by selecting a single row.

We could try to figure out whether the user selected a single row by comparing:

pageSize === deselectedRows.length - selectedRows.length

Is there any more elegant way to do this?

Question #2

When using the KendoGridCheckbox component, by clicking on the checkbox of a row, we can de-/select a single row in addition to the other already selected rows. When clicking a row's cells though, this behavior is inverted, de-/selecting the single row and deselecting all other rows. Is there any way to match the two behaviors without relying on the Ctrl key to do so?

Best Regards

1 Answer, 1 is accepted

Sort by
Dimiter Madjarov
Telerik team
answered on 05 May 2021, 09:05 AM

Hi Philipp,

In general when operating with the Grid rows, the selection is only aware of the currently rendered items i.e. the current page. Any modifications we perform to the items from the other pages, are done manually in the corresponding event handlers (similarly to the way we select all items on all pages). To answer the current questions specifically:

1. The selectionChange event will be fired before the selectedKeysChange event. You could use the information in the selectionChange event to determine the specifics of the performed operation e.g. if the Ctrl key was pressed. Then based on this information update the selectedKeys collection to the desired result - for example if the Ctrl key was not pressed, leave only the current row as selected.

2. The described behaviour is by design. Checking/Unchecking the selection checkbox affects only the current row. In order to deselect only this specific row by clicking outside the checkbox, it is expected that the ctrl/cmd key is pressed. There is not straight forward way to match those two scenarios, unless involving custom logic in the previously discussed event handlers. If only the checkbox behaviour is intended, the checkboxOnly option of the selection setting could be enabled. 

I hope this information helps. Let me know if I could provide further assistance.

Dimiter Madjarov
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

Asked by
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question