如何更改 MVC 网格单元的 Kendo UI 的背景颜色 [英] How do I change the Background color of a Kendo UI for MVC grid cell

问题描述

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

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

在我的脚本中，我的代码在 .databound 上循环遍历我的网格

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
          }



      });
   }

推荐答案

With Ajax Binding

使用jquery，您可以通过使用行的uid(唯一ID)并选择该行的第n个子项来选择和更改网格单元格的背景颜色.

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

更新

Alan Fisher 在评论中提出了另一种解决方法，这是他从 KendoUI 的人那里学到的.QtyReceived 列使用 ClientTemplate 将参数传递给数据绑定事件.

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>

使用服务器绑定

如果您使用的是服务器数据绑定而不是 ajax 数据绑定，那么 CellAction 可能是一个更好的方法.

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

这篇关于如何更改 MVC 网格单元的 Kendo UI 的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！