如何更改字段组Kendo Grid的颜色？

Question

我正在尝试更改网格中字段组的颜色，该颜色应通过值来更改，例如：如果字段的值为'Pedro'，则背景色为绿色，如果为'八月的背景颜色是红色...

在下面的示例中检查我到目前为止所做的事情以及我想做的事情。

这是我按UnitsInStock分组的示例： https://dojo.telerik.com/AJomALET

我想做什么： picture of what I want to do

Answer 1

您可以使用groupHeaderTemplate字段标记每个组。然后使用javascript将类应用于父TD。

  columns: [
        { field: "ProductName", title: "Product Name"},
        { field: "UnitPrice", title: "Unit Price" },
        { field: "UnitsOnOrder", title: "Units On Order"},
        { 
          field: "UnitsInStock", 
          title: "Units In Stock" ,
          groupHeaderTemplate: "<span class='UIS #= value #'>Units In Stock: #= value #</span>"
        }
  ],
  dataBound: function(e) {                       
    $(".UIS.0").closest("td").css("backgroundColor", "red"); 
    $(".UIS.3").closest("td").css("backgroundColor", "#009C00");
    $(".UIS.4").closest("td").css("backgroundColor", "#7F7F7F");
  }