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

* 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(*): In case withd is null make sure scroll width is not taken into account when calculating virtualization width as it should be equal to the sum of column widths.

* chore(*): Include feature's column width to calculated body width when width is set to null.

* 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(*): Adding support for null width + mrl. Fixing getPossibleColumnWidth to depend on getFeatureColumnsWidth so that it takes in cosideration all possible feature columns (not just row selectors).

* 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 tests.

* 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

@@ -258,6 +258,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.
@@ -648,6 +649,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
@@ -656,7 +664,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     @WatchChanges()
-    @HostBinding('style.width')
     @Input()
     get width() {
         return this._width;
@@ -3063,6 +3070,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
      * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
@@ -4043,7 +4055,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) => {
                 if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
                     const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
@@ -4198,9 +4210,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                 parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
         }
 
-        if (this.showRowCheckboxes) {
-            computedWidth -= this.headerCheckboxContainer ? this.headerCheckboxContainer.nativeElement.offsetWidth : 0;
-        }
+        computedWidth -= this.getFeatureColumnsWidth();
 
         if (this.showDragIcons) {
             computedWidth -= this.headerDragContainer ? this.headerDragContainer.nativeElement.offsetWidth : 0;
@@ -4264,20 +4274,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.hasColumnLayouts ?
+         this.visibleColumns.filter(x => x.columnLayout) : 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();
@@ -4378,6 +4407,33 @@ 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();
     }
 
     /**
@@ -4428,7 +4484,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

@@ -3572,7 +3572,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

@@ -96,7 +96,7 @@
 <div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" 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)'
+        [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"
@@ -157,7 +157,7 @@
         [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

@@ -1383,6 +1383,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

@@ -130,7 +130,7 @@
         [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,7 +518,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         return width;
     }
 
-    private getDefaultExpanderWidth(): number {
+     private getDefaultExpanderWidth(): number {
         switch (this.displayDensity) {
             case DisplayDensity.cosy:
                 return 57;
@@ -709,16 +709,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         }
     }
 
-    /**
-     * @hidden
-     */
-    public getPossibleColumnWidth() {
-        let computedWidth = this.calcWidth || parseInt(
-            this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
-        computedWidth -= this.headerHierarchyExpander.nativeElement.clientWidth;
-        return super.getPossibleColumnWidth(computedWidth);
-    }
-
     protected getChildGrids(inDeph?: boolean) {
         return this.hgridAPI.getChildGrids(inDeph);
     }

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

@@ -111,7 +111,7 @@
         [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>