New to Kendo UI for Vue? Start a free 30-day trial

Selection

Updated over 6 months ago

The Kendo UI for Vue Native Grid enables the user to select a single row or multiple rows.

Getting Started

To implement row selection:

Use the onRowClick event.
Set the selectedField 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.

Change Theme

Theme

Loading ...

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 the selection upon a checkbox click and implements a master checkbox in the header which selects and deselects all items.
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 by specifying the selectedField.

To configure the checkbox selection:

Set a selection column by setting the field option and passing the select value to field.
Handle the onSelectionchange, and the onHeaderselectionchange events which will be fired once the user clicks a checkbox.
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.