Color out a row in Kendo Grid [duplicate]

问题:

This question is an exact duplicate of:

• Gray out a row in kendo grid based on column value 2 answers

I have a Kendo Grid whose values get populated based on a post call. I need to gray out an entire row if one of the column has a value "REGISTERED".

Is there a way we can achieve this?

Here is my code:

$("#grid").kendoGrid({
  columns: [
    { field: "name", title: "Release Name" },
    { field: "number", title: "Number" },
    { field: "status", title: "Registration Status" }
  ],
  dataSource: [
    { name: "Jane Doe", number: "50", status: "REGISTERED" },
    { name: "John Doe", number: "60", status: "NOT REGISTERED" }
  ]
});

回答1:

If you want to change the style of a kendo grid element, you should do it on the dataBound event. When this event will be fired, all the view element will be rendered and you'll be able to retrieve a specific DOM element based on the dataItem's uid.

$("#YourGrid").kendoGrid({
    dataBound: function() {
        $.each($("#YourGrid").data("kendoGrid").dataSource.view(), function (index, viewDataItem) {
            var row = $("#YourGrid").find("tbody>tr[data-uid='" + viewDataItem.uid + "']");
            if (viewDataItem.status == "REGISTERED") {
                row.css("background-color", "red"); //Use row.find("td") if you want to set the style at the cell level
            } else {
                row.css("background-color", "");
            }
        });
    }
});

回答2:

just check this fiddle link

I have created demo grid example using kendo's dataSource

Fiddle Link For Kendo Grid Row Background Color

Hope This May Help You.