Using jquery / javascript to change the color of a string in a Kendo grid

Question

I have an ajax-bound grid that displays a list of alarms. Based on some condition in the row object, I need to change the color of the row. This worked until when my grid was bound to the server (I know that it should work that way), but due to changes the grid should be updated using ajax. This is my grid and what used to work when binding to the server (note that I 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 am 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 can’t understand for life how to change the colors of the text in this line. Any suggestions?

Answer 1

:

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');
        }
    });