The native Vue Grid by Kendo UI enables the user to select a single row or multiple rows.
To implement row selection:
- Use the
- Set the
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
Shiftkeys by handling the
onRowClickevent and by specifying the
To configure the checkbox selection:
- Set a selection column by setting the
fieldoption and passing the
- Handle the
GridSelectionChangeEvent, and the
onHeaderSelectionChangeevents which will be fired once the user clicks a checkbox.
- Depending on the selected state of an item, set the
The following example demonstrates how to implement multiple selection both on row click and with checkboxes.