# Selection

By default, the selection functionality of the Telerik UI Grid for ASP.NET MVC is disabled.

> As of the 2022 R3 release, the [`Change`](https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.ui.fluent/grideventbuilder#changesystemstring) event will now be fired only when the Grid performs selection or deselection.

## Getting Started

To control the selection in the Grid, use the `Selectable` property.

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("rowSelection")
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple))
		...
    )
```

## Select Modes

The Grid supports the following select modes:

* [Single and multiple selection (demo)](https://demos.telerik.com/aspnet-mvc/grid/selection)
* [Checkbox selection (demo)](https://demos.telerik.com/aspnet-mvc/grid/checkbox-selection)

You can set the select mode of the Grid to `Multiple` or `Single`. Additionally, the component provides the `Row` and `Cell` select types which allow multiple or single selection of rows or cells.

> If the \[`Selectable.Mode`] configuration property is set to `GridSelectionMode.Single`, configuring the [`Select`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/gridcolumnfactory#select) column of the Grid overrides \[`Selectable.Mode`] and sets the selection mode to `Multiple`.

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("cellSelection")
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Cell))
        ...
    )
```

## Dragging to Select

The Grid allows you to conditionally drag to select when the multiple selection mode is configured for rows or cells through the `DragToSelect` property.

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("cellSelection")
        .Selectable(selectable => selectable
            .DragToSelect(false)
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row))
        ...
    )
```

## Persisting the Selection

The Grid also provides a built-in functionality for persisting the selection through the `PersistSelection` property and its setting it to `true`.

> To persist the selection in the Grid, you also need to configure the `ID` field in the schema of the DataSource. For a runnable example, refer to the [demo on persisting the state of the Grid](https://demos.telerik.com/aspnet-mvc/grid/persist-state).

```Razor HtmlHelper
    .PersistSelection(true)
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.OrderID))
        ...
    )
```

## Getting Selected Row Data

To get data from the selected rows, use the `Change` event of the Grid:

1. Specify the name of the JavaScript function which will handle the event.

   ```Razor HtmlHelper
       .Events(ev => ev.Change("onChange"))
   ```

2. Declare the event handler and access the selected data items.

   ```JS
   <script>
       function onChange(e) {
           var selectedRows = this.select(); //Get the selected Grid rows.
           var selectedDataItems = [];
           for (var i = 0; i < selectedRows.length; i++) { //Loop through the selected row elements.
               var dataItem = this.dataItem(selectedRows[i]); //Get the dataItem of each row.
               selectedDataItems.push(dataItem); //Store the dataItem of each selected row in the array.
           }

           console.log(selectedDataItems); // "selectedDataItems" contains all selected data items.
       }
   </script>
   ```

## Clearing Selected Row Data

To clear the selected row data, use the [`clearSelectionMethod`](https://docs.telerik.com/kendo-ui/api/ui/grid/methods/clearselection).

```JS
<script>
    function clearSelection(){ // Custom function.
        var grid = $("#grid").data("kendoGrid");
        grid.clearSelection();
    }
</script>
```

## See Also

* [Multiple Selection by the Grid HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/selection)
* [Checkbox Selection by the Grid HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/checkbox-selection)
* [Persisting the State of the Grid HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/persist-state)
* [Server-Side API of the Grid for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/api/grid)