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

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

@@ -248,6 +248,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.
@@ -643,6 +644,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
@@ -651,7 +659,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     @WatchChanges()
-    @HostBinding('style.width')
     @Input()
     public get width() {
         return this._width;
@@ -3007,6 +3014,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.
@@ -3987,7 +3999,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);
@@ -4140,9 +4152,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;
@@ -4206,20 +4216,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();
@@ -4317,6 +4346,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();
     }
 
     /**
@@ -4367,7 +4423,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

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

@@ -92,7 +92,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
@@ -139,7 +139,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

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

@@ -541,7 +541,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         return width;
     }
 
-    private getDefaultExpanderWidth(): number {
+     private getDefaultExpanderWidth(): number {
         switch (this.displayDensity) {
             case DisplayDensity.cosy:
                 return 57;
@@ -732,16 +732,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

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