Multi-row SelectionPremium
Multiple row selection can be enabled by setting enabled prop of the GridSelectableSettings to true and its mode prop to multiple.
Start Free Trial
The following example demonstrates multiple-row selection with enabled drag selection where the select state is handled internally by the Grid.
Multiple Checkbox Selection
The checkbox selection enables selection upon a checkbox click and implements a master checkbox in the header that selects and deselects all items.
-
Configure the
GridSelectableSettingsas follows:jsxselectable={{ enabled: true, drag: false, cell: false, mode: 'multiple' }} -
Handle the
GridSelectionChangeEventand theonHeaderSelectionChangeevents which will be fired once the user clicks a checkbox. -
Update the built-in
selectin the events handled above.
The following example demonstrates how to implement multiple selection both on row click and with checkboxes.
Combining Selection with Data Operations (filtering, sorting, paging, etc.)
The following example demonstrates how to integrate checkbox selection with enabled grouping, filtering, sorting and paging. The main idea is to apply the selected state to the dataItems before or after processing the filter, group, and sort expressions.
Persisting Multiple Rows Selection
To persist the selection state and restore it later, follow these steps:
- Set the
selectableoption. - Store the selection object in
localStorage.
Multi-row Reordering
The KendoReact Grid comes with a built-in row-reordering feature that could be easily enhanced to allow the reordering of all selected rows.
The following example demonstrates how the row reordering functionality can be combined with multi-row selection.