New to Kendo UI for VueStart a free 30-day trial

Multi-row Selection

Updated on Aug 14, 2026

Enable multiple-row selection by setting the enabled prop of GridSelectableSettings to true and its mode prop to multiple.

vue
<Grid :selectable="{ enabled: true, mode: 'multiple' }" />

The following example demonstrates multiple-row selection with enabled drag selection where the select state is handled internally by the Grid.

Loading ...

Multiple Checkbox Selection

Checkbox selection enables users to select and deselect multiple rows. Add a checkbox column to display selection checkboxes in the Grid.

  1. Configure the GridSelectableSettings as follows:

    html
    <Grid
        :selectable="{
            enabled: true,
            drag: false,
            cell: false,
            mode: 'multiple'
        }"
    >
  2. Set the dataItemKey prop to the field that uniquely identifies each data item.

  3. Add a column with columnType set to checkbox.

  4. Optionally set the defaultSelect prop to select rows when the Grid initializes.

The following example demonstrates multiple-row checkbox selection with built-in state management.

Loading ...

Combining Selection with Data Operations (filtering, sorting, and paging)

Data operations can change the displayed order and subset of data items. Keep the select state separate from the data-operation state, provide a dataItemKey, and update the selection in the selectionchange and headerselectionchange event handlers.

The following example demonstrates checkbox selection with grouping, filtering, sorting, and paging.

Loading ...

Persisting Multiple Rows Selection

To persist the selection state and restore it later, follow these steps:

  1. Set the selectable prop.
  2. Bind the select prop and update it in the selectionchange event handler.
  3. Store the select state in localStorage and restore it when the Grid initializes.

The following example demonstrates how to persist the selection state of the Kendo UI for Vue Data Grid in localStorage and restore it using the button above the Grid.

Loading ...