Using jquery / javascript to change a row color in a Kendo grid

Question

I've got an ajax-bound grid that display a list of alarms. Based on some condition in the row object, I need to change the color of the row. This worked before, when my grid was server bound (I'm aware that this is the way it's supposed to work), but due to changes the grid needs to be updated with ajax. This is my grid, and what used to work when server bound (Notice I've changed to .Ajax() :

@(Html.Kendo().Grid(Model.Alarms)
      .Name("grid")
      .DataSource(dataSource => dataSource
          .Ajax()
                  .ServerOperation(false)
                  .Model(m => m.Id(s => s.AlarmComment))
                  .Read(read => read.Action("Alarms_Read", "Alarms", new { id = Model.ViewUnitContract.Id }).Type(HttpVerbs.Get))
                  .AutoSync(true)
                  .ServerOperation(true)
      )
      .RowAction(row =>
      {
          if (row.DataItem.DateOff == null && row.DataItem.DateAck == null)
          {
              row.HtmlAttributes["style"] = "backgrcolor:red";
          }
          if (row.DataItem.DateOff != null && row.DataItem.DateAck == null)
          {
              row.HtmlAttributes["style"] = "color: green";
          }
          if (row.DataItem.DateOff == null && row.DataItem.DateAck != null)
          {
              row.HtmlAttributes["style"] = "color: blue";
          }
      })
      .Columns(col =>
      {
          col.Bound(p => p.DateOn).Format("{0:u}").Title("Date");
          col.Bound(p => p.Priority).Width(50);
          col.Bound(p => p.ExtendedProperty2).Width(100).Title("Action");
          col.Bound(p => p.AlarmTag).Title("Name");
          col.Bound(p => p.AlarmComment).Title("Comment");
          col.Bound(p => p.ExtendedProperty1).Title("AlarmID");
          col.Bound(x => x.DateOff).Title("Value");
      })
      .HtmlAttributes(new {style = "height:430px;"})
      .Events(e => e.DataBound("setColors"))
      )

Now, this is what I'm doing in my script:

function setColors() {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource.data();

    $.each(data, function(i, row) {
        if (row.DateOff != null && row.DateAck == null) {
           // Add color to that rows text
        }
    });
}

I cannot for the life of me figure out how to change the colors of the text on that row. Any suggestions?

Answer 1

Finally found a solution:

function setColors() {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource.data();

    grid.tbody.find('>tr').each(function () {
        var dataItem = grid.dataItem(this);
        if (dataItem.DateOff == null && dataItem.DateAck == null) {
            $(this).css('color', 'red');
        }

        if (dataItem.DateOff != null && dataItem.DateAck == null) {
            $(this).css('color', 'green');
        }

        if (dataItem.DateOff == null && dataItem.DateAck != null) {
            $(this).css('color', 'blue');
        }
    });