Question

我需要根据特定条件更改kendo 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

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

kendo ui grid row如何设置背景颜色？

1 个答案: