Как изменить цвет фона пользовательского интерфейса Kendo для ячейки сетки MVC

С привязкой Ajax

Используя jquery, вы можете выбрать и изменить цвет фона ячейки сетки, используя uid (уникальный идентификатор) строки и выбрав n-й дочерний элемент этой строки.

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

Обновить

Алан Фишер в комментариях предложил другой способ решения этой проблемы, который он узнал от людей из KendoUI. Столбец QtyReceived использует ClientTemplate, который передает параметры событию с привязкой к данным.

@(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>

С привязкой к серверу

Если вы используете привязку данных сервера, а не привязку данных ajax, CellAction может быть лучшим способом сделать это.

@(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");
    })
)

Если вы заполняете сетку из модели представления MVC, вот простой способ сделать это. Создайте стили CSS:

   <style>
        .TrunkSummaryLightYellow {
            background: LightYellow;
        }

        .TrunkSummaryPink {
            background: Pink;
        }

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

Затем используйте готовую к документу функцию следующим образом:

$(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");
        }
    }
})

Спасибо Дейву Глику (ссылка) за это предложение.

Я понял, что цвет фона отдельной ячейки можно установить следующим образом:

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