How do I change the Background color of a Kendo UI for MVC grid cell

I'm developing an app using Kendo UI for MVC and I want to be able to change the background of a cell but I don't know how to get the value of the column cell background property so I can set it.

 @(Html.Kendo().Grid(Model)
        .Name("LineItems")
        .Events(e=> e
            .DataBound("LineItems_Databound")
        )
        .Columns(columns =>
            {
                columns.Bound(o => o.Ui).Title("UI").Width(20);
                columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
                columns.Bound(o => o.Nomenclature).Width(200);
                columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
                columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx");
                columns.Bound(o => o.ReqID).Width(50);
                columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
                columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
                columns.Bound(o => o.Requestor).Width(100).Title("Requestor");
            })
                     .ToolBar(toolbar =>
                     {
                         //toolbar.Create();
                         toolbar.Save();
                     })


                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Sortable()
                .Selectable()
                .Resizable(resize => resize.Columns(true))
                .Reorderable(reorder => reorder.Columns(true))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(p => p.ID))
                    .Batch(true)
                    .ServerOperation(false)
                    .Read(read => read.Action("Editing_Read", "Shipping"))
                    .Update(update => update.Action("UpdateShipment", "Shipping"))
                    //.Destroy(update => update.Action("Editing_Destroy", "Shipping"))
                )
)

In my script I have code that loops through my grid on .databound

 function LineItems_Databound() {
      var grid = $("#LineItems").data("kendoGrid");
      var data = grid.dataSource.data();
      $.each(data, function (i, row) {
          var qtyRx = row.QtyReceived;
          var qtySx = row.QtyShipped;


          if (qtyRx < qtySx) {
             // Change the background color of QtyReceived here
          }



      });
   }

Daniel

With Ajax Binding

Using jquery, you can select and change the background color of a cell of the grid by using the uid (unique id) of the row and selecting the nth-child of that row.

function LineItems_Databound() {
    var grid = $("#LineItems").data("kendoGrid");
    var data = grid.dataSource.data();
    $.each(data, function (i, row) {
      var qtyRx = row.QtyReceived;
      var qtySx = row.QtyShipped;

      if (qtyRx < qtySx) {
        //Change the background color of QtyReceived here
        $('tr[data-uid="' + row.uid + '"] td:nth-child(5)').css("background-color", "red");
      }
    });
}

Update

Alan Fisher in the comments suggested another way to solve this that he learned from the people at KendoUI. The QtyReceived column uses a ClientTemplate that passes parameters to the databound event.

@(Html.Kendo().Grid(Model)
  .Name("LineItems")
  .Events(e => e.DataBound("LineItems_Databound"))
  .Columns(columns =>
  {
    columns.Bound(o => o.Ui).Title("UI").Width(20);
    columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
    columns.Bound(o => o.Nomenclature).Width(200);
    columns.Bound(o => o.Requestor).Width(100);
    columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
    columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx")
      .ClientTemplate("#= LineItems_Databound(QtyShipped,QtyReceived)#");
    columns.Bound(o => o.ReqID).Width(50);
    columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
    columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
    columns.Bound(o => o.ReceivedBy).Width(100).Title("Received By");
    columns.Bound(o => o.RecAtSiteDate).Width(100).Title("Received Date")
      .Format("{0:dd MMM, yy}");
  })
)

<script>
  function LineItems_Databound(qtySx, qtyRx) {
      if (qtyRx < qtySx) {
        return "<div style='background: pink'>" + qtyRx + " </div>";
      }
      else {
       return qtyRx;
      }
  }
</script>

With Server Binding

If you are using server data binding and not ajax data binding, CellAction might be a better way to do this.

@(Html.Kendo().Grid(Model)
    .Name("LineItems")
    .CellAction(cell =>
    {
      if (cell.Column.Title.Equals("QtyReceived"))
      {
        if (cell.DataItem.QtyReceived.Value < cell.DataItem.QtyShipped.Value)
        {
          cell.HtmlAttributes["style"] = "background-color: red";
        }
      }
    })
    .Columns(columns =>
    {
        columns.Bound(o => o.Ui).Title("UI").Width(20);
        columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
        columns.Bound(o => o.Nomenclature).Width(200);
        columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
        columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx");
        columns.Bound(o => o.ReqID).Width(50);
        columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
        columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
        columns.Bound(o => o.Requestor).Width(100).Title("Requestor");
    })
)

If you are populating the grid from the MVC view model, here's a simple way to do it. Create CSS styles:

   <style>
        .TrunkSummaryLightYellow {
            background: LightYellow;
        }

        .TrunkSummaryPink {
            background: Pink;
        }

        .TrunkSummaryLightGreen {
            background: LightGreen;
        }
    </style>

Then use a document-ready function as follows:

$(document).ready(function () {
    var grid = $("#TrunkSummaryGrid").data("kendoGrid");
    var gridData = grid.dataSource.view();

    for (var i = 0; i < gridData.length; i++) {
        if (gridData[i].SomeProperty == SomeValue) {
            grid.table.find("tr[data-uid='" + gridData[i].uid + "']").addClass("TrunkSummaryLightYellow");
        }
    }
})

Thanks to Dave Glick (link) for this suggestion.

I have worked out that the background colour of an individual cell can be set as follows:

grid.table.find("tr[data-uid='" + gridData[i].uid + "']")[0].cells[4].style.backgroundColor = 'pink';

来源：https://stackoverflow.com/questions/11270288/how-do-i-change-the-background-color-of-a-kendo-ui-for-mvc-grid-cell

标签

kendo-ui