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

Answer 4

    var grid = $("#Grid").data("kendoGrid");
    var data = grid.dataSource.data();
    // the section below is using JQuery each function to loop
    // over the grid data then checking the row index if its an odd or even number
    //by finding the modulus of the number.
    // In this case i'm checking for odd number

    $.each(data, (i, row) => {        
        if (i % 2) {
            $('tr[data-uid="' + row.uid + '"]').css("background-color","rgb(247, 244, 244)");
        }
    });

Answer 5

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

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

如果您要綁定到網格的數據集中有一個值確定需要突出顯示該行，則可以在綁定時在模板中設置顏色：

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