Merge pull request #12961 from IgniteUI/skrastev/fix-12669

fix(grid): Fix filtering row not included correctly into header row size calculation.

Author: ChronosSF

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

@@ -177,7 +177,6 @@ import { IgxGridValidationService } from './grid/grid-validation.service';
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
 const MINIMUM_COLUMN_WIDTH = 136;
-const FILTER_ROW_HEIGHT = 50;
 // By default row editing overlay outlet is inside grid body so that overlay is hidden below grid header when scrolling.
 // In cases when grid has 1-2 rows there isn't enough space in grid body and row editing overlay should be shown above header.
 // Default row editing overlay height is higher then row height that is why the case is valid also for row with 2 rows.
@@ -6643,10 +6642,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     protected calcGridHeadRow() {
         if (this.maxLevelHeaderDepth) {
             this._baseFontSize = parseFloat(getComputedStyle(this.document.documentElement).getPropertyValue('font-size'));
-            let minSize = (this.maxLevelHeaderDepth + 1) * this.defaultRowHeight / this._baseFontSize;
-            if (this._allowFiltering && this._filterMode === FilterMode.quickFilter) {
-                minSize += (FILTER_ROW_HEIGHT + 1) / this._baseFontSize;
-            }
+            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`;
         }
     }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -2535,6 +2535,23 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
         }));
 
         // Filtering + Column Groups
+        it('should size correctly the header based on display density.', () => {
+            grid.displayDensity = "comfortable";
+            fix.detectChanges();
+
+            const thead = GridFunctions.getGridHeader(grid).nativeElement;
+            expect(thead.getBoundingClientRect().height).toEqual(grid.defaultRowHeight * 4 + 1);
+
+            grid.displayDensity = "cosy";
+            fix.detectChanges();
+            expect(thead.getBoundingClientRect().height).toEqual(grid.defaultRowHeight * 4 + 1);
+
+            grid.displayDensity = "compact";
+            fix.detectChanges();
+            expect(thead.getBoundingClientRect().height).toEqual(grid.defaultRowHeight * 4 + 1);
+
+        });
+
         it('should position filter row correctly when grid has column groups.', fakeAsync(() => {
             const thead = GridFunctions.getGridHeader(grid).nativeElement;
 

src/app/grid-column-groups/grid-column-groups.sample.css

@@ -0,0 +1,4 @@
+.density-chooser {
+    margin-bottom: 16px;
+    min-width: 900px;
+}

src/app/grid-column-groups/grid-column-groups.sample.html

@@ -1,8 +1,11 @@
 <section class="sample-content">
+    <div class="density-chooser">
+        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+    </div>
     <ng-template igxCollapsibleIndicator let-column="column" #ind >
         <igx-icon [attr.draggable]="false">{{column.expanded ? 'remove' : 'add'}} </igx-icon>
     </ng-template>
-    <igx-grid [allowFiltering]="true" [moving]="true" [pinning]="pinningConfig" [rowSelection]="selectionMode" #grid [data]="data" displayDensity="compact">
+    <igx-grid [displayDensity]="density" [allowFiltering]="true" [moving]="true" [pinning]="pinningConfig" [rowSelection]="selectionMode" #grid [data]="data" displayDensity="compact">
         <igx-grid-toolbar [displayDensity]="grid.displayDensity">
             <igx-grid-toolbar-actions>
                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>

src/app/grid-column-groups/grid-column-groups.sample.ts

@@ -12,6 +12,7 @@ import { IgxGridComponent } from '../../../projects/igniteui-angular/src/lib/gri
 import { IgxIconComponent } from '../../../projects/igniteui-angular/src/lib/icon/icon.component';
 import { IgxCollapsibleIndicatorTemplateDirective } from '../../../projects/igniteui-angular/src/lib/grids/columns/templates.directive';
 import { ColumnPinningPosition, GridSelectionMode } from '../../../projects/igniteui-angular/src/lib/grids/common/enums';
+import { DisplayDensity } from '../../../projects/igniteui-angular/src/lib/core/density';
 
 @Component({
     selector: 'app-grid-column-groups-sample',
@@ -61,12 +62,19 @@ export class GridColumnGroupsSampleComponent {
     ];
     /* eslint-enable max-len */
 
+    public density: string = DisplayDensity.compact;
+    public displayDensities;
 
     constructor() {
         for (const item of this.data) {
             item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`;
         }
         this.selectionMode = GridSelectionMode.none;
+        this.displayDensities = [
+            { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+            { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+            { label: 'compact', selected: this.density === 'compact', togglable: true }
+        ];
     }
 
     public pinGroup() {
@@ -110,4 +118,8 @@ export class GridColumnGroupsSampleComponent {
 
         this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
     }
+
+    public selectDensity(event) {
+        this.density = this.displayDensities[event.index].label;
+    }
 }