Apply Different Style for Multi-level Hierarchical Grid Headers

Environment

Product	Progress® Telerik® UI Grid for ASP.NET MVC
Product	Progress® Kendo UI® Grid for jQuery

Description

I have a four-level hierarchical Kendo UI Grid for ASP.NET MVC.

How can I provide different header styles for each level of the Grid?

Solution 

Use the following CSS rules to style a simple four-level Kendo UI Grid. These rules rely on the number of the nested levels of Grids, that is, they target ".k-grid tbody", and do not count on custom class names. 

<style>
  /* second level grid header */
  .k-grid tbody .k-grid .k-grid-header .k-header{
    background-color: lightblue;
  }

  /* third level grid header */
  .k-grid tbody .k-grid tbody .k-grid .k-grid-header .k-header {
    background-color: yellowgreen;
  }

  /* forth level grid header */
  .k-grid tbody .k-grid tbody .k-grid tbody .k-grid .k-grid-header .k-header {
    background-color: orange;
  }
</style>

<div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        columns: [
          { field: "name" }
        ],
        dataSource: [{
          name: "Beverages",
          products: [{
            name: "Tea",
            brands: [{
              name: "PG tips", distributors: [{name:"Tesco"},{name: "Sainsbury's"}]
            },{
              name: "Lipton", distributors: [{name: "ASDA"}, {name: "Iceland"}]}]
          },{
            name: "Coffee",
            brands: [{
              name:"Lavaza", distributors: [{name: "Coca-Cola"}]
            },{
              name: "Kenco", distributors: [{name: "ASDA"}, {name: "Morrisons"}]}]
          }]},{
            name: "Food",
            products: [{
              name: "Ham", brands: [{ name: "Cook's ham"},{ name: "Honey and mustard breaded ham"}]
            },{
              name: "Bread", brands:[{ name: "KingsMill"},{ name: "Hovis"}]
            }]
          }],
        detailTemplate: 'Products: <div class="second-level-grid"></div>',
        detailInit: function(e) {
          e.detailRow.find(".second-level-grid").kendoGrid({
            dataSource: e.data.products,
            columns: ["name"],
            detailTemplate: 'Brands: <div class="third-level-grid"></div>',
            detailInit: function(e){
              e.detailRow.find(".third-level-grid").kendoGrid({
                dataSource: e.data.brands,
                columns:["name"],
                detailTemplate: 'Distributors: <div class="fourth-level-grid"></div>',
                detailInit: function(e){
                  e.detailRow.find(".fourth-level-grid").kendoGrid({
                    dataSource: e.data.distributors,
                  })
                }
              })
            }
          })
        }
      });
    </script>
    <style>
      /* second level grid header */
      .k-grid tbody .k-grid .k-grid-header .k-header{
        background-color: lightblue;
      }

      /* third level grid header */
      .k-grid tbody .k-grid tbody .k-grid .k-grid-header .k-header {
        background-color: yellowgreen;
      }

      /* forth level grid header */
      .k-grid tbody .k-grid tbody .k-grid tbody .k-grid .k-grid-header .k-header {
        background-color: orange;
      }
    </style>