如何在Kendo UI Grid中设置行背景颜色？

Question

我有21行的网格.我的要求是设置一些行背景颜色是浅绿色(如1,5,13行)这是可能实现的.

$("#gridSellIn")
     .kendoGrid({
         width: 1500,
         dataSource: data.d,
         resizable: true,
         selectable: true,                                
         rowTemplate: kendo.template($("#SellInrowTemplate").html()),
                            height: 500,
                            columns: [
                                            { title: 'RevProduct Name', field: 'ProductName', width: '22%', sortable: true },
                                            { title: 'Actuals', field: 'Actual', width: '8%', sortable: true },

                                      ]
                        }); 

Answer 1

你可以尝试这种条件方法

var grid = $("#gridSellIn").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
  if (row.ProductName == 'Apples')
     $('tr[data-uid="' + row.uid + '"] ').css("background-color", "green");
}

Answer 2

您可以使用jQuery设置任何HTML元素的任何CSS属性.这包括表格行和背景颜色.这是让你入门的东西:

$("#gridSellIn tr").css("background-color", "red");

有关更多信息,请参阅jQuery文档:

• jQuery css
• jQuery 选择器(检查eq()和nth-child())

Answer 3

在数据绑定事件中，您可以：

var rows = e.sender.tbody.children();
 
for (var j = 0; j < rows.length; j++) {
    var row = $(rows[j]);
    var dataItem = e.sender.dataItem(row);
 
    if (dataItem.get("PropertyName") != 0) {
        row.addClass("someCssColorClass");
    }
}