and also want to know that how to change the color of grid..Please help 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
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.
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
In order to change text color in all header cells it is needed to use the style below:
.ui-iggrid-headertext
If this does not fit your requirements could please give more details on them? Is it needed to change the text color of just particular child grid headers?
A mockup image would be appreciated to investigate further if needed.
Look forward to hearing from you.
yes I want the same background color for first child of parent as shown in image but for my grid the number of columns are not fixed as they coming from data base and as the solution given by you previously defines the color with proper name but for that the issue is we have add that much css class for every child cell. Is there any solution that we can get the entire row of child header's of that grid so that's why we are able to add the same css for that row.
and one more thing I want that blue header(parent header ) repetitive for every child with same css.suppose I expand the 3rd row then it should be repetitive for that child also means whatever number of expanded rows there should be same number of repetitive parent header