Multi-row Selection
Premium

Multiple row selection can be enabled by setting enabled prop of the GridSelectableSettings to true and its mode prop to multiple.

ninja-iconThe Multi-row Selection feature of the Grid is part of KendoReact premium, an enterprise-grade UI library with 120+ free and premium components for building polished, performant apps. Test-drive all features with a free 30-day trial.Start Free Trial

The following example demonstrates multiple-row selection with enabled drag selection where the select state is handled internally by the Grid.

Change Theme
Theme
Loading ...

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.

  1. Configure the GridSelectableSettings as follows:

    jsx
    selectable={{
        enabled: true,
        drag: false,
        cell: false,
        mode: 'multiple'
    }}
  2. Handle the GridSelectionChangeEvent and the onHeaderSelectionChange events which will be fired once the user clicks a checkbox.

  3. 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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...