Selection
By default, the selection functionality of the Telerik UI Grid for ASP.NET MVC is disabled.
As of the 2022 R3 release, the
Changeevent 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.
@(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:
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 toGridSelectionMode.Single, configuring theSelectcolumn of the Grid overrides [Selectable.Mode] and sets the selection mode toMultiple.
@(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.
@(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
IDfield in the schema of the DataSource. For a runnable example, refer to the demo on persisting the state of the Grid.
.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:
-
Specify the name of the JavaScript function which will handle the event.
.Events(ev => ev.Change("onChange")) -
Declare the event handler and access the selected data items.
Clearing Selected Row Data
To clear the selected row data, use the clearSelectionMethod.
<script>
function clearSelection(){ // Custom function.
var grid = $("#grid").data("kendoGrid");
grid.clearSelection();
}
</script>