Fixed header height issue for grouped headers

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -2259,9 +2259,6 @@ export abstract class IgxGridBaseDirective implements GridType,
  this._allowFiltering = value;
  this.filteringService.registerSVGIcons();
 
- if (!this._init) {
- this.calcGridHeadRow();
- }
 
  this.filteringService.isFilterRowVisible = false;
  this.filteringService.filteredColumn = null;
@@ -6813,25 +6810,11 @@ export abstract class IgxGridBaseDirective implements GridType,
  }
  }
 
- /**
- * @hidden
- * @internal
- */
- protected calcGridHeadRow() {
- if (this.maxLevelHeaderDepth) {
- this._baseFontSize = parseFloat(getComputedStyle(this.document.documentElement).getPropertyValue('font-size'));
- const hasFilterRow = this._allowFiltering && this._filterMode === FilterMode.quickFilter;
- const minSize = (this.maxLevelHeaderDepth + 1 + (hasFilterRow ? 1 : 0)) * this.defaultRowHeight / this._baseFontSize;
- this.theadRow.nativeElement.style.minHeight = `${minSize}rem`;
- }
- }
-
  /**
  * @hidden
  * Sets TBODY height i.e. this.calcHeight
  */
  protected calculateGridHeight() {
- this.calcGridHeadRow();
 
  this.calcHeight = this._calculateGridBodyHeight();
  if (this.pinnedRowHeight && this.calcHeight) {
@@ -7759,7 +7742,7 @@ export abstract class IgxGridBaseDirective implements GridType,
  } else {
  this._shouldRecalcRowHeight = true;
  }
- }
+ } 
  }
 
  // TODO: About to Move to CRUD

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -65,6 +65,19 @@ describe('IgxGrid - multi-column headers #grid', () => {
  expect(grid.getColumnByName('ContactName').level).toEqual(expectedLevel);
  });
 
+ it('should initialize a grid with correct header height', () => {
+ fixture = TestBed.createComponent(ColumnGroupTestComponent);
+ fixture.detectChanges();
+ grid = fixture.componentInstance.grid;
+
+ const expectedGridHeaderHeight = 151;
+ const headerHeight = grid.nativeElement
+ .querySelector("igx-grid-header-row")
+ .getBoundingClientRect().height;
+
+ expect(Math.round(headerHeight)).toEqual(expectedGridHeaderHeight);
+ });
+
  it('Should render column group headers correctly.', fakeAsync(() => {
  fixture = TestBed.createComponent(BlueWhaleGridComponent);
  fixture.detectChanges();

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -108,15 +108,6 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
  return this.selected;
  }
 
- @HostBinding('style.height.rem')
- public get height() {
- if (!this.grid.hasColumnGroups || this.grid.type === 'pivot') {
- return null;
- }
-
- return (this.grid.maxLevelHeaderDepth + 1 - this.column.level) * this.grid.defaultRowHeight / this.grid._baseFontSize;
- }
-
  /**
  * @hidden
  */

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -2080,13 +2080,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
  }
  }
 
- /**
- * @hidden
- * @internal
- */
- protected override calcGridHeadRow() {
- }
-
  protected override buildDataView(data: any[]) {
  this._dataView = data;
  }