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

我有21行的网格。我的要求是设置一些行背景颜色是浅绿色（如1,5,13行），这是可能实现的。如何在Kendo UI Grid中设置行背景颜色？

$("#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 }, 

             ] 
         });

来源

2012-12-06 shankar.parshimoni

您可以使用jQuery来设置任何HTML元素的CSS属性。这包括表格行和背景颜色。下面是一些让你开始：

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

参考jQuery文档进一步信息：

jQuery的css
jQuery的selectors（检查eq()和nth-child()）

来源

2012-12-06 13:24:27

如何删除此红色再次 – GANI

你可以试试这个有条件的方法

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

来源

2013-07-17 20:57:46

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

来源

2015-08-25 00:52:30 PatWill

上，你可以数据绑定事件：

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

来源

2015-12-09 20:04:12 Freewi

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

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

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

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

来源

2015-12-11 15:33:50 KeyOfJ

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

回答

相关问题