Highlight first row of kendo-grid

Question

I would like to highlight (or select) the first row of a kendo-grid. I need to get the first row in a typescript function and add ' k-state-selected '. The row doesn't have a unique id (except ' ng-reflect-logical-row-index="1" '). What is the best approach/ implementation to either select (fake a row click, so the row is automatically selected) or highlight the first row.

Answer 1

Kendo has a directive that allows you to add a class to a row based on callback.

CSS:

.k-grid tr.selected { background-color: yellow; }

HTML:

<kendo-grid [data]="gridData" [rowClass]="rowCallback"></kendo-grid>

TS:

public rowCallback(context: RowClassArgs) {
   if (context.index == 0) return 'selected';
}

Check this demo

for more information refer to their official documentation .

Answer 2

If you want to highlight the first row of your kendo Grid , you can try the following: In my example, the trigger is on page load. And, it is in jquery. Just convert it to typescript.

$(document).ready(function(){
var grid = $("#gridname").data("kendoGrid");
grid.select("tr:eq(1)");
})

See reference: http://dojo.telerik.com/@Kiril/Ocace