Selection

The Grid enables the user to select single or multiple cells and rows. It also provides default selection implementation from the getSelectedState utility function.

The Grid Package is part of KendoReact, a professional UI components library designed and built from the ground up for React to make developers more productive. To try it out, sign up for a free 30-day trial.

Getting Started

The Grid selection can be enabled by:

  1. Set the selectable option.
  2. Set theselectedField option.
  3. Use the onSelectionChange event.
  4. Optionally use the getSelectedState utility function for default selection behavior.

As a result, the Grid allows you to select single or multiple cells and rows. The selectedField option represents a field inside the data collection which determines the rows that will render as selected.

Example
View Source
Edit In Stackblitz  
Change Theme:

Customizing the Selection

The Grid provides both checkbox and row-click selection options which can be applied to single or multiple records.

The checkbox selection enables selection upon a checkbox click and implements a master checkbox in the header that selects and deselects all items.

To configure the checkbox selection:

  1. Set a selection column by setting the field option and passing the select value to field.
  2. Handle the GridSelectionChangeEvent and the onHeaderSelectionChange events which will be fired once the user clicks a checkbox.
  3. Depending on the selected state of an item, set the selectedField value.

The following example demonstrates how to implement multiple selection both on row click and with checkboxes.

Example
View Source
Edit In Stackblitz  
Change Theme: