CODEWITHSUNDEEP
angulartypescriptkendo-grid
Odrai
Odrai

Reputation: 2353

Highlight first row of kendo-grid

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.

Upvotes: 0

Views: 1856

Answers (2)

Rigel1121
Rigel1121

Reputation: 2016

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

Upvotes: -1

Stavm
Stavm

Reputation: 8131

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.

Upvotes: -1

Related Questions