剑道ui网格行如何设置背景颜色？答案

【问题标题】：kendo ui grid row how to set background color?剑道ui网格行如何设置背景颜色？
【发布时间】：2013-06-12 11:33:09
【问题描述】：

我需要根据特定条件更改剑道 ui 网格的行颜色。我正在使用带有 MVC 的服务器端绑定。我的代码如下，

var grid = Html.Kendo().Grid<AllocateCOESGridViewModel>();
grid.Name("AllocateResultGrid")
.RowAction(row =>
{
   if (row.DataItem.COESNo == 13054915)
   {
       row.HtmlAttributes["style"] = "background:blue";
   }
   else
   {
       row.HtmlAttributes["style"] = "background:red";
   }                
})  
.Columns(columns =>
{   
    columns.Bound(s => s.COESNo).Title(@Allocate.COESGridHeading);                  
    columns.Bound(s => s.Street).Title(@Allocate.StreetGridHeading);
    columns.Bound(s => s.Suburb).Title(@Allocate.SuburbGridHeading);
    columns.Bound(s => s.Postcode).Title(@Allocate.PostcodeGridHeading);
    columns.Bound(s => s.InspectorName).Title(@Allocate.InspectorGridHeading);
    columns.Bound(s => s.COESNo).Title(@Allocate.AllocateGridHeading + "<input type ='checkbox' id ='SelectAll'  />").ClientTemplate("<input type ='checkbox' data-id='#= COESNo #' class='allocate' />").Sortable(false);
});

网格可以工作，但根本没有行颜色？没有蓝色或红色..我只是得到标准的白色和灰色..有什么想法吗？

谢谢

这就是我让它工作的方式，只是想知道是否还有其他选择，因为在网格中循环似乎不是一个好主意......尤其是如果网格很长

 var grid = $("#AllocateResultGrid").data("kendoGrid");
 grid.bind("dataBound", updateGridRows);

 updateGridRows: function()
{
    dataView = this.dataSource.view();
    for (var i = 0; i < dataView.length; i++) 
    {
        if (dataView[i].Selected == false) 
        {
            var uid = dataView[i].uid;
            $("#AllocateResultGrid tbody").find("tr[data-uid=" + uid + "]").addClass("customClass");
        }
    }

}

我在样式表中添加了 customClass

【问题讨论】：

在 RowAction 中中断调试器时会发生什么？
它不会中断...现在我刚刚意识到的一件事是我正在通过数据源获取网格的数据...我已经更新了上面的代码
RowAction 会起作用吗？因为我正在使用 ajax 来获取数据
我实际上是通过绑定网格的数据绑定事件来实现的。它可以工作，但它涉及遍历网格，我当前的网格有 1200 个条目，因此渲染网格需要更多时间。还有另一种方法可以实现这一目标吗？（见上面我更新的代码）

标签： kendo-ui

【解决方案1】：

我也遇到了同样的问题，如果你找到没有循环的请告诉我！

var grid = $("#AllocateResultGrid").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
  if (row.Selected == false)
     $('tr[data-uid="' + row.uid + '"] ').addClass("customClass");
}

【讨论】：