Always show first row selected in Kendo grid

Question

I am working on a mvc4 project where I use a Kendo Grid. I want the user to see the first row of the grid selected by default. I have many rows so I use paging. When the user goes to page 2,3,...40 etc i also want to see the first row of each page selected. Below is my code where i create the grid ``` <%: Html.Kendo().Grid(Model) .Name("AuthorisationsGrid") .Columns(columns => { columns.Bound(p => p.Mis).Title("MIS").Width(80); columns.Bound(p => p.AuthorisationSerialNumber).Title("ΑΑ Προέγκρισης"); }) .Pageable() .Sortable() .Filterable() .Selectable(s => s.Mode(GridSelectionMode.Single)) .Resizable(resize => resize.Columns(true)) .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) .Model(model => model.Id(p => p.AuthorisationSerialNumber)) .Model(model => model.Field(p => p.Mis)) .Batch(true) .Read(read => read.Action("AuthorisationsPartial", "UserFilesDashboard")))%> ``` how can i achieve the above behavior? Maybe jQuery could be useful (but i have very few knowled…

Accepted Answer

Indeed you can use the dataBound event of the Grid and jQuery to add the k-state-selected class to the first tr element in the tbody of the Grid.

here is an example:

```
$('#GridName').data().kendoGrid.bind('dataBound',function(e){
    this.element.find('tbody tr:first').addClass('k-state-selected')
})
```

Always show first row selected in Kendo grid

Solution

Problem