# Multi-row Selection

Enable multiple-row selection by setting the [`enabled`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridselectablesettings#enabled) prop of [`GridSelectableSettings`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridselectablesettings) to `true` and its [`mode`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridselectablesettings#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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/selection/multi-row-selection/built-in/source.txt)

## 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`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridselectablesettings) as follows:

   ```html
   <Grid
       :selectable="{
           enabled: true,
           drag: false,
           cell: false,
           mode: 'multiple'
       }"
   >
   ```

2. Set the [`dataItemKey`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#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`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#defaultselect) prop to select rows when the Grid initializes.

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/selection/multiple-checkboxes/source.txt)

## 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/selection/data-operations/source.txt)

## Persisting Multiple Rows Selection

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

1. Set the [`selectable`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#selectable) prop.
2. Bind the [`select`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#select) prop and update it in the [`selectionchange`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#onselectionchange) 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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/selection/multi-row-selection/persisting-selection/source.txt)

## Suggested Links

* [Grid API Reference](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)
* [Grid API Index](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)