Customizing WijGrid Using CellStyleFormatter

Some of our customers have posted queries where they're trying to customize the cells (backcolor, alignment, etc) but find it hard to do so. Well, wijgrid gives an easy way to do this. It's called CellStyleFormatter. You can refer to the documentation to know more about this option. In this article I'll give you a brief idea on how you can use this powerful option to customize the GroupHeaders and the RowHeaders i.e 1. How to change the alignment of GroupHeaders 2. Display row number in RowHeaders

Changing the alignment of Group Headers

WijGrid has an option called groupIndent which allows you to set an indent to the groups. However, this does work for level 0 groups and the Group Headers would still be left aligned. Lets try and align the Group Headers to the center. To accomplish this, all we need to do is check if the row type is a groupHeader (i.e 16 using the RowType enum) and change the textAlign attribute of the corresponding cell.

cellStyleFormatter: function (args) {  
    //center align the Group Headers  
   if (args.row.type === 16) {  
      if (args.$cell[0].cellIndex === 1) {  
         args.$cell.css("textAlign", "center");  
      }  
   }  
}

Display Row Number in RowHeaders

This is pretty easy to implement. What we'll do in the cellStyleFormatter function is check if a column contains the class name ("rowheader"). If it does, we'll set the text of this cell to the index of the dataitem plus one (since the indexing start from 0). This works well even while filtering the grid.

cellStyleFormatter: function (args) {  
   //display row number in Row Header  
   if (args.column === null) {  
      if (args.$cell[0].className.indexOf("wijmo-wijgrid-rowheader") != -1 && args.row.dataRowIndex != -1)   {  
         args.$cell[0].innerText = args.row.dataRowIndex + 1;  
      }  
   }  
}

This is how your grid will appear

Conclusion

This article briefly describes the usefulness of the CellStyleFormatter in WijGrid. You can accomplish a lot more using this option. View Sample