The Grid enables the user to select a single row or multiple rows.

The Grid Package is part of KendoReact, a professionally built commercial UI library. To try out this Grid you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Getting Started

To implement row selection:

  1. Use the onRowClick event.
  2. Set theselectedField option.

As a result, the Grid allows you to set the currently clicked item as selected. The selectedField option represents a field inside the data collection which determines the rows that will render as selected.

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, selectionChange 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 row-click selection allows the selection of items on row click. Depending on the selection logic of the project, you can implement multiple row selection through the Ctrl and Shift keys by handling the onRowClick event and specifying the selectedField.

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

View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?