How to change the color of a field group kendo Grid?

Question

I'm trying to change the color of my fields group in a grid, the color should be changed by the value, example: if the value of the field is 'Pedro' the background-color is green, if is 'August' background-color is red...

Check below the example that I have done till the moment and what I'd like to do.

this is my example grouped by UnitsInStock: https://dojo.telerik.com/AJomALET

what i would like to do: picture of what I want to do

Answer 1

You could use the groupHeaderTemplate field to mark each group. Then use javascript to apply classes to the parent 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");
  }