fix(grid): recalculate grid body when changing allowFiltering dynamic…

…ally #3290 # Conflicts: # projects/igniteui-angular/src/lib/grids/grid-base.component.ts # projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
IgniteUI · Dec 5, 2018 · c7f0d43 · c7f0d43
1 parent c6a0e6d
commit c7f0d43
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 2 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -747,6 +747,15 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             this._allowFiltering = value;
             this.filteringService.isFilterRowVisible = false;
             this.filteringService.filteredColumn = null;
+
+            this.calcHeight += value ? -this.defaultFilterRowHeight : this.defaultFilterRowHeight;
+            if (this._ngAfterViewInitPaassed) {
+                if (this.maxLevelHeaderDepth) {
+                    this.theadRow.nativeElement.style.height = `${(this.maxLevelHeaderDepth + 1) * this.defaultRowHeight +
+                        (value ? this.defaultFilterRowHeight : 0) + 1}px`;
+                }
+            }
+
             this.filteringService.registerSVGIcons();
             if (this.gridAPI.get(this.id)) {
                 this.markForCheck();
@@ -2379,6 +2388,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    get defaultFilterRowHeight(): number {
+        return 50;
+    }
+
     /**
      * Returns the maximum width of the container for the pinned `IgxColumnComponent`s.
      * ```typescript
@@ -3456,7 +3469,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         // TODO: Calculate based on grid density
         if (this.maxLevelHeaderDepth) {
             this.theadRow.nativeElement.style.height = `${(this.maxLevelHeaderDepth + 1) * this.defaultRowHeight +
-                (this.allowFiltering ? this._rowHeight : 0) + 1}px`;
+                (this.allowFiltering ? this.defaultFilterRowHeight : 0) + 1}px`;
         }
 
         if (!this._height) {

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
@@ -2710,6 +2710,48 @@ describe('IgxGrid - Filtering Row UI actions', () => {
         filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
         expect(filteringRow).toBeNull();
     }));
+
+    it('Should size grid correctly if enable/disable filtering in run time.', fakeAsync(() => {
+        const fix = TestBed.createComponent(IgxGridFilteringComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+        const head = grid.nativeElement.querySelector('.igx-grid__thead');
+        const body = grid.nativeElement.querySelector('.igx-grid__tbody');
+
+        expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top);
+
+        fix.componentInstance.activateFiltering(false);
+        fix.detectChanges();
+
+        expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top);
+
+        fix.componentInstance.activateFiltering(true);
+        fix.detectChanges();
+
+        expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top);
+    }));
+
+    it('Should size grid correctly if enable/disable filtering in run time - MCH.', fakeAsync(() => {
+        const fix = TestBed.createComponent(IgxGridFilteringMCHComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+        const head = grid.nativeElement.querySelector('.igx-grid__thead');
+        const body = grid.nativeElement.querySelector('.igx-grid__tbody');
+
+        expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top);
+
+        fix.componentInstance.activateFiltering(false);
+        fix.detectChanges();
+
+        expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top);
+
+        fix.componentInstance.activateFiltering(true);
+        fix.detectChanges();
+
+        expect(head.getBoundingClientRect().bottom).toEqual(body.getBoundingClientRect().top);
+    }));
 });
 
 export class CustomFilter extends IgxFilteringOperand {
@@ -2822,6 +2864,11 @@ export class IgxGridFilteringComponent {
     ];
 
     @ViewChild(IgxGridComponent) public grid: IgxGridComponent;
+
+    public activateFiltering(activate: boolean) {
+        this.grid.allowFiltering = activate;
+        this.grid.cdr.markForCheck();
+    }
 }
 
 @Component({
@@ -2858,7 +2905,15 @@ export class IgxGridFilteringScrollComponent extends IgxGridFilteringComponent {
         </igx-column>
     </igx-grid>`
 })
-export class IgxGridFilteringMCHComponent extends IgxGridFilteringComponent { }
+export class IgxGridFilteringMCHComponent extends IgxGridFilteringComponent {
+
+    @ViewChild(IgxGridComponent) public grid: IgxGridComponent;
+
+    public activateFiltering(activate: boolean) {
+        this.grid.allowFiltering = activate;
+        this.grid.cdr.markForCheck();
+    }
+ }
 
 const expectedResults = [];