and also want to know that how to change the color of grid..Please help me....
Thank you so much
Please let me know if we are able to change the css of entire header row of name and product . as the example given by you is only applicable for to change the single cell of that header. Thank you once again and waiting for your reply
Hello Mayuri,
This effect is possible to be achieved. A possible approach is editing the css elements which are associated with the headers which you need to edit. For example, the Name column header text in the parent grid is associated with the id “#hierarchicalGrid_Name” and the Product Name column header text in the first child grid could be accessed with “#hierarchicalGrid_0_Products_child_Name > .ui-iggrid-headertext”:
#hierarchicalGrid_Name{
color:blue !important;
}
#hierarchicalGrid_0_Products_child_Name > .ui-iggrid-headertext
{
color: yellow !important;
I have also attached the modified sample for your reference.
Please note that this CSS elements are named regarding the specific column names. So this solution an example and id names will be different for the different scenarios. In order to find easily the id names or paths to elements needed to be customized you might find it useful to test web tools such as the Page Inspector:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
Hope this helps. If have any additional questions feel free to notify me.
Thanks Dimka!!!
this is very useful for me
Checked your code now I have one another question as I want to add the different colors for name header and product header is that possible please help me
In order to create a custom CSS for the grid it is need all existing styles to be overridden.
I have made a research regarding the colors changing questions for the hierarchical grid. The effect you have described could be achieved for non-dynamically applied styles. I have attached a sample representing a possible solution:
$("#hierarchicalGrid").igHierarchicalGrid({
rendered: function(evt, ui){
var tr = $("#hierarchicalGrid").find('[data-id=0]');
tr.addClass('blue1');
var i = 0;
while (tr.length !== 0)
i = i + 1;
var br = '[data-id='+ i.toString() + ']';
var tr = $("#hierarchicalGrid").find(br);
}, …
All parent rows are selected and a custom class is added to them. Feel free to use the sample for custom projects. It could be customized by overriding the .blue1 class.
If you have any further questions or concerns please let me know.