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

Selection

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

Getting Started

To implement row selection:

  1. Use the onRowClick event.
  2. 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.

Example
View Source
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 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:

  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
Change Theme: