Selection

The Kendo UI for Vue Native Grid 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.

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.

Suggested Links

• dataStateChange
• API Reference of the Grid
• Grid Custom Cell template with Grouping and Selection