Selection
The Grid enables users to select single or multiple cells and rows by using built-in selection state or using controlled selection state.
As a result, the Grid allows you to:
- Select single cell or single row
- Select multiple cells or multiple rows
- Select range of cells or range of rows by dragging
The following example demonstrates all selection options of the Kendo UI for Vue Data Grid, including single and multiple cell and row selection, as well as range selection. Choose the selection mode from the configuration panel above the Grid to see how the selection works in each mode.
Using the Built-in State Management for Selection
To enable selection in the Grid using the built-in state management mechanism, follow these steps:
- Set the
selectableprop. - Optionally set
defaultSelectto apply an initial selection. - Enable
autoProcessDatawhen the Grid manages data operations such as paging.
The following example demonstrates how to enable selection using the built-in state management of the Kendo UI for Vue Data Grid.
Using Selection in Controlled Mode
To enable the selection in Kendo UI for Vue Data Grid and use it in controlled mode, follow these steps:
- Set the
selectableprop. - Set the
selectprop. - Handle the
selectionchangeevent and update theselectstate with the event value.
The following example demonstrates how to use selection in controlled mode.
Single/Multiple Checkbox Selection
The Grid provides both checkbox and row-click selection options which can be applied to single or multiple records:
Selection Aggregates
The Grid enables you to select single or multiple cells or rows and calculate different metrics based on the selected data. You can find more details about this functionality and how to use it in this help article.