Using jqueryjavascript to change a row color in a Kendo grid - Stack Overflow

admin管理员组

文章数量:1296846

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?

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?

• javascript
• jquery
• kendo-ui
• kendo-grid

Share Follow asked Feb 13, 2014 at 17:00 Nicklas Pouey-WingerNicklas Pouey-Winger 3,02377 gold badges4747 silver badges7676 bronze badges 3

• Where do I get a list of what color's are available – Ruvo Commented Oct 20, 2014 at 11:46
• Not sure I understand what you mean by "color's available". They're just regular colors, used as in CSS or hex. – Nicklas Pouey-Winger Commented Oct 20, 2014 at 18:02
• I meant where do I get a list of all the colors that I could use there, I know I can use the hex value and I found a site with a list of colors like 'LightGreen', 'DarkRed',etc. – Ruvo Commented Oct 21, 2014 at 7:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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

本文标签： Using jqueryjavascript to change a row color in a Kendo gridStack Overflow