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 knowledge of jQuery). Any help appreciated. Thank you in advance.

Answer 1

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')
})

Answer 2

Its also possible to do this another way

Method 1

Bind the grid to the onDataBound event via

<div data-bind="source: mydataSource, events: {
  dataBound: onDataBound
}" > 

for MVVM or via the

("#gridName").data("kendoGrid").dataBound(..) (not exact)

Method 2

Inside of the

databound: function() {
  var uid = data[0].uid;
  var row = roomGrid.table.find('tr[data-uid="' + uid + '"]');
  roomGrid.select(row);
}

This works in my case. Hope it helps.