Changing Nested GroupHeader appearance in C1GridView

DESCRIPTION

If we talk about C1GridView then we cannot miss exploring the features offered by it. One of the features offered by C1GridView is Grouping. Grouping can be implemented at a single level or can be nested in nature. In this blog article we will see how we can play with the GroupHeader appearance to give it a unique and appealing appearance. Here is what we will end up implementing, In this implementation we have assigned different colors to different level of Groups. Also the rows color inside the inner most group level is unique for each group. So let us see how we do it.

IMPLEMENTATION

We are basically using jQuery to loop through each row in C1GridView and depending on whether the row is a GroupHeader row and its level, we assign colors to it. Here is the client side code which we need to do the trick:

var newColor;  
$(document).ready(function () {  
   $("tr").each(function (e, args) {  
      if ($(this).hasClass("wijmo-wijgrid-groupheaderrow")) {  
         newColor = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6);  
         if ($(this).attr("arial-level") === "1") {  
            $(this).css("background-color", "#F7FE2E");  
         }  
         else {  
         $(this).css("background-color", "#FF0040");  
         }  
      }  
      else {  
         $(this).css("background-color", newColor);  
      }  
   });  
});

So add this code to the page and we are all set to go. A sample application demonstrating this implementation can be downloaded from the link below. Download Sample