Igx tree grid & grid column header modifications

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 Hristodorova
Software 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.0
Angular: 10.0.0

Thanks 

Hello,

After an investigation, I have determined that as it is mentioned in the release notes here, headerStyles property was introduced in version 12.2.0.

In addition, please keep in mind that according to our policy we provide support for the latest version and two major versions back of the igniteui-angular product. This means that version 10 is considered retired and it is no longer eligible for Developer Support Services.

Having this in mind, my suggestion is to update to the latest version.

However, having in mind that the headerStyles property is setting a style to the igx-grid-header element, a possible approach which could be used in earlier versions is to access these elements and modify their properties based on some condition:

 public ngAfterViewInit(): void {
  const headers = document.querySelectorAll('igx-grid-header');
  headers.forEach(header => {
    if((header as any).innerText === 'Name' || (header as any).innerText === 'Age') {
      header.setAttribute('style', 'background: red');
    }
  });
}

Let me know if I may be of any further assistance.

Sincerely,
Teodosia Hristodorova
Software Developer

Hi, 

The solution you've provided (for earlier version) did work. However, since our grid has many columns, there is a horizontal scroll bar. The issue is, once the styling is applied on the earlier columns and we scroll further right, and then scroll back, the applied style is removed (possibly because of column virtualisation). 
How can we have it persistent.

Thanks

Hello,

Please note that as I previously mentioned version 10 is s considered retired and it is no longer eligible for Developer Support Services. In addition, since conditional header styling is not provided out of the box for this particular version and the suggested approach is a workaround, it is possible to not work as expected in all scenarios. What I could suggest is to handle the grid's onScroll event as follows:

scroll(ev){
    if(ev.direction === 'horizontal') {
      const headers = document.querySelectorAll('igx-grid-header');
    headers.forEach(header => {
      if((header as any).innerText === 'Name' || (header as any).innerText === 'Age') {
        header.setAttribute('style', 'background: red');
      }else {
        header.removeAttribute('style')
      }
    });
    }
  }

However, please keep in mind that this behavior should be handled entirely on application level and could be considered beyond the scope of Infragistics support.

My suggestion in order to be able to take advantage of all newer features like conditional header styling is to update to the latest version of igniteui-angular.

Let me know if I may be of any further assistance.

Sincerely,
Teodosia Hristodorova
Software Developer