fix(igxGrid): Grid should render all columns when grid width is set to null. (#5395)

* fix(igxGrid): Grid should render all columns when grid width is set to null.

* chore(*): Fixing build.

* chore(*): Handling null width inetgration with other grid features that change the total grid width (row selectors, expansion indicators etc.).

* chore(*): Additional handling for null width in combination with: hidden columns, multi-column headers, auto-generated columns, columns with no width. Making sure host binded width prop is set only after zone is stable to prevent timing issues where the same prop value changes during same change detection cycle and throws errors.

* chore(*): Use zone.run for interactions that change the width when ran outside the zone (like resizing).

* chore(*): If width is in % when grid width is null use min width.

* chore(*): In case width is null allow setting null for width host bindings so that grid will expact based on content. In case width is null and column width in % then set width to min width explicitly.

* chore(*): Fixing issues with width = null.

* chore(*): In case width is null, always apply minwidth to columns as default.

* chore(*): Make check more specific to null.

* chore(*): Fixing merge issue.

* chore(*): Fixing another test.

* chore(*): DetectChanges before feature's column width is calculated so that all option changes are applied.

Author: MayaKirova

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

@@ -229,6 +229,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private _observer: MutationObserver;
     protected _destroyed = false;
     private overlayIDs = [];
+    private _hostWidth;
     /**
      * An accessor that sets the resource strings.
      * By default it uses EN resources.
@@ -595,6 +596,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * @hidden
+    */
+    @HostBinding('style.width')
+    get hostWidth() {
+        return this._width || this._hostWidth;
+    }
     /**
      * Returns the width of the `IgxGridComponent`.
      * ```typescript
@@ -603,7 +611,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     @WatchChanges()
-    @HostBinding('style.width')
     @Input()
     public get width() {
         return this._width;
@@ -2921,6 +2928,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this._unpinnedWidth;
     }
 
+    get isHorizontalScrollHidden() {
+        const diff = this.unpinnedWidth - this.totalWidth;
+        return this.width === null || diff >= 0;
+    }
+
     /**
      * @hidden
      */
@@ -3849,7 +3861,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      */
     protected _derivePossibleWidth() {
         if (!this._columnWidthSetByUser) {
-            this._columnWidth = this.getPossibleColumnWidth();
+            this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px';
             this.columnList.forEach((column: IgxColumnComponent) => {
                 column.defaultWidth = this._columnWidth;
             });
@@ -4042,20 +4054,39 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
 
 
-        if (!width) {
-            width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0);
+        if (this.width === null || !width) {
+            width = this.getColumnWidthSum();
         }
 
-        if (this.hasVerticalSroll()) {
+        if (this.hasVerticalSroll() && this.width !== null) {
             width -= this.scrollWidth;
         }
-        if (Number.isFinite(width) && width !== this.calcWidth) {
+        if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) {
             this.calcWidth = width;
             this.cdr.detectChanges();
         }
         this._derivePossibleWidth();
     }
 
+    private getColumnWidthSum(): number {
+        let colSum = 0;
+        const cols = this.visibleColumns
+        .filter(x => !x.columnGroup);
+        cols.forEach((item) => {
+            const isWidthInPercent = item.width && typeof item.width === 'string' && item.width.indexOf('%') !== -1;
+            if (isWidthInPercent) {
+                item.width = MINIMUM_COLUMN_WIDTH + 'px';
+            }
+            colSum +=  parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH;
+        });
+        if (!colSum) {
+            return null;
+        }
+        this.cdr.detectChanges();
+        colSum += this.getFeatureColumnsWidth();
+        return colSum;
+    }
+
     public hasVerticalSroll() {
         if (!this._ngAfterViewInitPassed) { return false; }
         const isScrollable = this.verticalScrollContainer.isScrollable();
@@ -4148,6 +4179,48 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             this.cdr.detectChanges();
             this.resetCaches();
         }
+
+        if (this.zone.isStable) {
+            this.zone.run(() => {
+                this._applyWidthHostBinding();
+                this.cdr.detectChanges();
+            });
+        } else {
+            this.zone.onStable.pipe(first()).subscribe(() => {
+                this.zone.run(() => {
+                    this._applyWidthHostBinding();
+                });
+            });
+        }
+    }
+
+    private _applyWidthHostBinding() {
+        let width = this._width;
+        if (width === null) {
+            let currentWidth = this.calcWidth;
+            if (this.hasVerticalSroll()) {
+                currentWidth += this.scrollWidth;
+            }
+            width = currentWidth + 'px';
+            this.resetCaches();
+        }
+        this._hostWidth = width;
+        this.cdr.markForCheck();
+    }
+
+    /**
+     * @hidden
+     * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
+     * Method used to override the calculations.
+     */
+    public getFeatureColumnsWidth() {
+        let width = 0;
+
+        if (this.headerCheckboxContainer) {
+            width += this.headerCheckboxContainer.nativeElement.getBoundingClientRect().width;
+        }
+
+        return width;
     }
 
     /**
@@ -4182,7 +4255,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     protected getUnpinnedWidth(takeHidden = false) {
         let width = this.isPercentWidth ?
             this.calcWidth :
-            parseInt(this._width, 10);
+            parseInt(this.width, 10) ||  parseInt(this.hostWidth, 10) || this.calcWidth;
         if (this.hasVerticalSroll() && !this.isPercentWidth) {
             width -= this.scrollWidth;
         }

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

@@ -3565,7 +3565,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             fix.detectChanges();
 
             const headers: DebugElement[] = fix.debugElement.queryAll(By.directive(IgxGridHeaderGroupComponent));
-            const headerResArea = headers[2].children[0].nativeElement;
+            const headerResArea = headers[2].children[1].nativeElement;
 
             const filterIcon = headerResArea.querySelector('.igx-excel-filter__icon');
             filterIcon.click();

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -77,7 +77,7 @@
 </div>
 
 <div igxGridBody class="igx-grid__tbody">
-    <div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event" (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [style.height.px]='calcHeight' [style.width.px]='calcWidth + 1' #tbody (scroll)='scrollHandler($event)' (wheel)="wheelHandler()">
+    <div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event" (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [style.height.px]='calcHeight' [style.width.px]='calcWidth ? calcWidth + 1 : null' #tbody (scroll)='scrollHandler($event)' (wheel)="wheelHandler()">
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-left"></span>
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
@@ -123,7 +123,7 @@
     <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalSroll()' [style.height.px]='summariesHeight' [style.width.px]="scrollWidth"></div>
 </div>
 
-<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="unpinnedWidth - totalWidth >= 0">
+<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
     <div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

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

@@ -1354,6 +1354,22 @@ describe('IgxGrid Component Tests', () => {
             expect(virtDir.getSizeAt(2)).toEqual(150);
 
         });
+
+        it('should render all columns if grid width is set to null.', async () => {
+            const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
+            fix.componentInstance.initColumnsRows(5, 30);
+            const grid = fix.componentInstance.grid;
+            fix.detectChanges();
+
+            grid.width = null;
+            fix.detectChanges();
+            await wait(16);
+
+             // grid should render all columns and all should be visible.
+            const cells = grid.getRowByIndex(0).cells;
+            expect(cells.length).toBe(30);
+            expect(parseInt(grid.hostWidth, 10)).toBe(30 * 136);
+        });
     });
 
     describe('IgxGrid - API methods', () => {

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -115,7 +115,7 @@
     <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalSroll()' [style.height.px]='summariesHeight' [style.width.px]="scrollWidth"></div>
 </div>
 
-<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="unpinnedWidth - totalWidth >= 0">
+<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
     <div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

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

@@ -518,6 +518,19 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         return width;
     }
 
+    /**
+     * @hidden
+     * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
+     * Method used to override the calculations.
+     */
+    public getFeatureColumnsWidth() {
+        let width = super.getFeatureColumnsWidth();
+        if (this.hasExpandableChildren) {
+            width += this.headerHierarchyExpander.nativeElement.clientWidth || this.getDefaultExpanderWidth();
+        }
+        return width;
+    }
+
      private getDefaultExpanderWidth(): number {
         switch (this.displayDensity) {
             case DisplayDensity.cosy:

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -91,7 +91,7 @@
     <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalSroll()' [style.height.px]='summariesHeight' [style.width.px]="scrollWidth"></div>
 </div>
 
-<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="unpinnedWidth - totalWidth >= 0">
+<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
     <div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>