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 selectors（选中eq()和nth-child()）

Answer 3

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

＆＃13;

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

＆＃13;

Answer 4

我注意到你正在使用行模板：

rowTemplate: kendo.template($("#SellInrowTemplate").html())

如果您的数据集中有一个值绑定到网格，该值确定需要突出显示该行，则可以在模板绑定时设置颜色：

# if (data.columnvalue === condition) { #
<tr class="highlight">
#} else {#
<tr>
#} #

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

4 个答案: