how to change background color of kendo grids row using the row index

Question

i need to change the color of kendo grids row by using it's index no. i tried using this but nothing happened.

       var gview = $('#SearchResult').data().kendoGrid;//searchresult is grid's id
        var dataRows = gview.items();
        var rowIndex = dataRows.index(gview.select());
         gview.tbody.find("tr:eq("+rowIndex+")").css("background-color", "green");

It's not throwing any error in debugger but not giving any result.

Answer 1

You need to find Uid of a row by its index and find tr by its data-uid, check below function

function ChangeGridRowByIndex(index) {
    var grid = $("#SearchResult").data("kendoGrid");
    var gridData = grid.dataSource.view();
    var currentUid = gridData[index].uid;
    var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
    $(currenRow).addClass("red");
}

Hope this will help you :)

Answer 2

Given that kendo does not give an option to control the background color of a single row directly (that I know of). But you must apply the new color after the table is rendered and you might also need to apply it after every refresh of the table also (kendo should have events thrown for this). Once kendo finshes painting it, grab the table element in your page, by default kendo gives it a class="k-grid-content". Using jquery it would look something like this

var differentRowElement = $('.k-grid-content').find('tr').eq(index).css('background-color', 'red');

Tested it on http://demos.telerik.com/kendo-ui/grid/index running this in the console

$('.k-grid-content').find('tr').eq(3).css('background-color', 'red');