Multi-row SelectionPremium
Multiple row selection can be enabled by setting enabled
prop of the GridSelectableSettings
to true
and its mode
prop to multiple
.
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
GridSelectableSettings
as follows:jsxselectable={{ enabled: true, drag: false, cell: false, mode: 'multiple' }}
-
Handle the
GridSelectionChangeEvent
and theonHeaderSelectionChange
events which will be fired once the user clicks a checkbox. -
Update the built-in
select
in 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.
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.