Hi team,Our project has requirements due to which there is a need to modify column headers in IGX tree grid and flat grid. Which are:-1. Height decrease: We need the height of the header of columns decreased, currently its taking a lot of space. We need a solution which is universal as we have multiple grids in our application and some has tree grid with and without column groups/parent child columns and different column schemas.2. Conditional Styling: We need to style the column headers (background colour, font colour) conditionally, currently there is a way to change theses styles by applying our own theme but its globally applied on all column headers and we need to add conditions based on which some styles will be applied and some not on the headers.Please let us know with the solutions for these queries.Thank you.
Hello,I have been looking into your questions and prepared a small sample that demonstrates how your requirements could be achieved.
Regarding the first question, I believe that the best suggestion is to set the grid displayDensity to 'compact'. More about dispalayDensity could be found here.However, if you require to change only the headers' height, you could access them via their classes. In this case, you should also change some of the headers labels attributes in order to be displayed properly, depending on your requirement.In the attached sample both scenarios are added as comments - the first suggestion is demonstrated in the ngOnInit method and the second in the component scss file, so you could test them.Regarding your second question, in order to conditionally set styles to the column headers, my suggestion is to use the exposed headerStyles property on column level.The approach is exactly the same for both tree and flat grids.Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.
Sincerely,Teodosia HristodorovaSoftware Developer
Hi Teodosia,Thank you for the solution you've provided.In analysing, I found out that :1.Conditional Styling: There is a version mismatch of the solution and the version of our Infragistics.We currently are using version 10.0.0 and in that, the property (headerStyles) is not present.2.Height Decrease: The classes for overriding didn't work. Could you provide us with a solution which is for the version we are using ?Infragistics: 10.0.0Angular: 10.0.0Thanks