diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index a4a525ae53f..b8884f5a291 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -2277,9 +2277,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; @@ -6859,25 +6856,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) { @@ -7805,7 +7788,7 @@ export abstract class IgxGridBaseDirective implements GridType, } else { this._shouldRecalcRowHeight = true; } - } + } } // TODO: About to Move to CRUD diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index edf75bfd968..96f9674ff9a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts @@ -67,6 +67,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(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 7947deeca60..afec5abd3a8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -2746,6 +2746,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { GridFunctions.clickFilterCellChip(fix, 'AnotherField'); fix.detectChanges(); + grid.cdr.detectChanges(); // check if it is positioned at the bottom of the thead. const theadWrapper = grid.theadRow.nativeElement.firstElementChild; diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index a6ca8e4b3a2..de803ae1ff1 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -109,15 +109,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 */ diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index d0992b4685c..ae50657cd0e 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -2106,13 +2106,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } } - /** - * @hidden - * @internal - */ - protected override calcGridHeadRow() { - } - protected override buildDataView(data: any[]) { this._dataView = data; }