如何更改 MVC 网格单元的 Kendo UI 的背景颜色

Question

我正在使用 MVC 的 Kendo UI 开发一个应用程序，我希望能够更改单元格的背景，但我不知道如何获取列单元格背景属性的值，以便进行设置。

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

在我的脚本中，我的代码在 .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
          }



      });
   }

Answer 1

使用 Ajax 绑定

使用 jquery，您可以通过使用行的 uid（唯一 id）并选择该行的第 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");
      }
    });
}

更新

cmets 中的Alan Fisher 提出了另一种解决此问题的方法，这是他从 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");
    })
)

Answer 2

如果您从 MVC 视图模型中填充网格，这里有一个简单的方法。创建 CSS 样式：

   <style>
        .TrunkSummaryLightYellow {
            background: LightYellow;
        }

        .TrunkSummaryPink {
            background: Pink;
        }

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

然后使用一个document-ready函数如下：

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

感谢 Dave Glick (link) 的建议。

我研究出单个单元格的背景颜色可以设置如下：

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