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

Posted 2023-05-07

【中文标题】如何更改 MVC 网格单元的 Kendo UI 的背景颜色

【英文标题】：How do I change the Background color of a Kendo UI for MVC grid cell

【发布时间】：2012-07-01 11:41:17

【问题描述】：

我正在使用 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
          



      );
   

【参考方案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");
    )
)

【讨论】：

我尝试了您的解决方案，但此时网格似乎没有绑定，我没有可比较的数据。

我看的不够仔细，看不到您正在使用 ajax 绑定。这仅适用于服务器绑定。

我更新了我的答案，添加了一种适用于 ajax 数据绑定的方法。

@AlanFisher 我刚刚发现有一种更简单的方法可以使用 row.style.backgroundColor 更改背景颜色。我更新了答案以包含此内容。

我试过了，但我得到“row.style”是未定义的。你真的让这个工作吗？我

【参考方案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';