From 1bef973f332497ccbbc82c3747bb742f358c88c7 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 12 Jul 2019 11:33:09 +0300 Subject: [PATCH 01/14] fix(igxGrid): Grid should render all columns when grid width is set to null. --- .../src/lib/grids/grid-base.component.ts | 16 ++++++++++++++-- .../src/lib/grids/grid/grid.component.spec.ts | 16 ++++++++++++++++ 2 files changed, 30 insertions(+), 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 index 4487f1dcfa6..5837501b6bd 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -643,6 +643,19 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } } + @HostBinding('style.width') + protected get hostWidth() { + if (this.width === null && this.columnList && this.columnList.length > 0) { + let width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0); + if (this.hasVerticalSroll()) { + width += this.scrollWidth; + } + return width + 'px'; + } else { + return this.width; + } + } + /** * Returns the width of the `IgxGridComponent`. * ```typescript @@ -651,7 +664,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * @memberof IgxGridBaseComponent */ @WatchChanges() - @HostBinding('style.width') @Input() public get width() { return this._width; @@ -4329,7 +4341,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements protected getUnpinnedWidth(takeHidden = false) { let width = this.isPercentWidth ? this.calcWidth : - parseInt(this._width, 10); + parseInt(this.hostWidth, 10); if (this.hasVerticalSroll() && !this.isPercentWidth) { width -= this.scrollWidth; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 828a0bb7e7b..581034877ce 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/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(grid.nativeElement.offsetWidth).toBe(30 * 136); + }); }); describe('IgxGrid - API methods', () => { From 958ed3839b4d6c0ca8492661f43e0db0a457ee3e Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 12 Jul 2019 13:23:30 +0300 Subject: [PATCH 02/14] chore(*): Fixing build. --- .../igniteui-angular/src/lib/grids/grid-base.component.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 5837501b6bd..7ce099af1ab 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -643,8 +643,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } } + /** + * @hidden + */ @HostBinding('style.width') - protected get hostWidth() { + get hostWidth() { if (this.width === null && this.columnList && this.columnList.length > 0) { let width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0); if (this.hasVerticalSroll()) { From d054a7da22db531bbf873c60bb613ff9546509fe Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 18 Jul 2019 11:01:34 +0300 Subject: [PATCH 03/14] chore(*): Handling null width inetgration with other grid features that change the total grid width (row selectors, expansion indicators etc.). --- .../igniteui-angular/src/lib/grids/grid-base.component.ts | 4 +++- .../grids/hierarchical-grid/hierarchical-grid.component.ts | 2 +- 2 files changed, 4 insertions(+), 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 index 7ce099af1ab..e5590dda6ec 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -649,10 +649,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements @HostBinding('style.width') get hostWidth() { if (this.width === null && this.columnList && this.columnList.length > 0) { - let width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0); + let width = this.columnList.filter(x => !x.columnGroup) + .reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0); if (this.hasVerticalSroll()) { width += this.scrollWidth; } + width += this.getFeatureColumnsWidth(); return width + 'px'; } else { return this.width; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 9963c6c07a2..1fb561b25d9 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -525,7 +525,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone return width; } - private getDefaultExpanderWidth(): number { + private getDefaultExpanderWidth(): number { switch (this.displayDensity) { case DisplayDensity.cosy: return 57; From d416b1d29f769bc4f180f986a3b5636593a9cb32 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 25 Jul 2019 18:07:48 +0300 Subject: [PATCH 04/14] 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. --- .../src/lib/grids/grid-base.component.ts | 56 +++++++++++++------ .../src/lib/grids/grid/grid.component.spec.ts | 4 +- 2 files changed, 42 insertions(+), 18 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 index 558f7dea1f1..4de05fea1bd 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/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. @@ -648,19 +649,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements */ @HostBinding('style.width') get hostWidth() { - if (this.width === null && this.columnList && this.columnList.length > 0) { - let width = this.columnList.filter(x => !x.columnGroup) - .reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0); - if (this.hasVerticalSroll()) { - width += this.scrollWidth; - } - width += this.getFeatureColumnsWidth(); - return width + 'px'; - } else { - return this.width; - } + return this._width || this._hostWidth; } - /** * Returns the width of the `IgxGridComponent`. * ```typescript @@ -4196,11 +4186,11 @@ 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) { @@ -4210,6 +4200,17 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements this._derivePossibleWidth(); } + private getColumnWidthSum(): number { + let colSum = 0; + const cols = this.visibleColumns + .filter(x => !x.columnGroup); + cols.forEach((item) => { + colSum += parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH; + }); + colSum += this.getFeatureColumnsWidth(); + return colSum; + } + public hasVerticalSroll() { if (!this._ngAfterViewInitPassed) { return false; } const isScrollable = this.verticalScrollContainer.isScrollable(); @@ -4297,6 +4298,29 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements this.cdr.detectChanges(); this.resetCaches(); } + + if (this.zone.isStable) { + this._applyWidthHostBinding(); + this.cdr.detectChanges(); + } else { + this.zone.onStable.pipe(first()).subscribe(() => { + 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.cdr.markForCheck(); + } + this._hostWidth = width; } /** @@ -4347,7 +4371,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements protected getUnpinnedWidth(takeHidden = false) { let width = this.isPercentWidth ? this.calcWidth : - parseInt(this.hostWidth, 10); + parseInt(this.width, 10) || parseInt(this.hostWidth, 10); if (this.hasVerticalSroll() && !this.isPercentWidth) { width -= this.scrollWidth; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index cf4b9793539..aad75313939 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -1361,14 +1361,14 @@ describe('IgxGrid Component Tests', () => { const grid = fix.componentInstance.grid; fix.detectChanges(); - grid.width = null; + 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(grid.nativeElement.offsetWidth).toBe(30 * 136); + expect(parseInt(grid.hostWidth, 10)).toBe(30 * 136); }); }); From 585e513961a277ecf440c1a49027523989222df0 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 25 Jul 2019 18:58:06 +0300 Subject: [PATCH 05/14] chore(*): Use zone.run for interactions that change the width when ran outside the zone (like resizing). --- .../igniteui-angular/src/lib/grids/grid-base.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 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 index 4de05fea1bd..ec159c41cad 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4300,8 +4300,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } if (this.zone.isStable) { - this._applyWidthHostBinding(); - this.cdr.detectChanges(); + this.zone.run(() => { + this._applyWidthHostBinding(); + this.cdr.detectChanges(); + }); } else { this.zone.onStable.pipe(first()).subscribe(() => { this._applyWidthHostBinding(); From aa0965c8fc4e05779a6fe6fa6a506a7040d81176 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 26 Jul 2019 15:50:07 +0300 Subject: [PATCH 06/14] 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). --- .../src/lib/grids/grid-base.component.ts | 8 +++----- .../src/lib/grids/grid/row-drag.directive.spec.ts | 2 ++ .../hierarchical-grid/hierarchical-grid.component.ts | 10 ---------- 3 files changed, 5 insertions(+), 15 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 index ec159c41cad..f902c0a17e5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4124,9 +4124,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(); const visibleChildColumns = this.visibleColumns.filter(c => !c.columnGroup); @@ -4202,8 +4200,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements private getColumnWidthSum(): number { let colSum = 0; - const cols = this.visibleColumns - .filter(x => !x.columnGroup); + const cols = this.hasColumnLayouts ? + this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup); cols.forEach((item) => { colSum += parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH; }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts index 159fb8bec28..621f75e412a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts @@ -213,6 +213,7 @@ describe('IgxGrid - Row Drag Tests', () => { })); it('should align horizontal scrollbar with first column when column pinning is disabled', fakeAsync(() => { // has no draggable and selectable rows + grid.width = '400px'; grid.rowSelectable = false; grid.rowDraggable = false; tick(); @@ -248,6 +249,7 @@ describe('IgxGrid - Row Drag Tests', () => { expect(rowSelectRect.right).toBe(horizontalScrollbarRect.left); })); it('should align horizontal scrollbar with first non-pinned column when column pinning is enabled', fakeAsync(() => { + grid.width = '400px'; grid.pinColumn('ProductName'); tick(); fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 1fb561b25d9..fb850ea75e3 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -716,16 +716,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); } From ffcfc204298fada16ae238c9df09224e98952f99 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 26 Jul 2019 18:01:20 +0300 Subject: [PATCH 07/14] chore(*): If width is in % when grid width is null use min width. --- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index f902c0a17e5..1afd207725f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4203,7 +4203,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements const cols = this.hasColumnLayouts ? this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup); cols.forEach((item) => { - colSum += parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH; + const isWidthInPercent = item.width && typeof item.width === 'string' && item.width.indexOf('%') !== -1; + colSum += !isWidthInPercent ? parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH : MINIMUM_COLUMN_WIDTH; }); colSum += this.getFeatureColumnsWidth(); return colSum; From 2e0406e218292e59bd0834b4dd8e78ef3e27a420 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 31 Jul 2019 18:16:23 +0300 Subject: [PATCH 08/14] 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. --- .../src/lib/grids/grid-base.component.ts | 10 ++++++++-- .../src/lib/grids/grid/grid.component.html | 2 +- 2 files changed, 9 insertions(+), 3 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 index 1afd207725f..7ab9ae9195a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4191,7 +4191,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements 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(); } @@ -4204,8 +4204,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements 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; - colSum += !isWidthInPercent ? parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH : MINIMUM_COLUMN_WIDTH; + if (isWidthInPercent) { + item.width = MINIMUM_COLUMN_WIDTH + 'px'; + } + colSum += parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH; }); + if (!colSum) { + return null; + } colSum += this.getFeatureColumnsWidth(); return colSum; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 65556407687..bc33cb7a490 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -88,7 +88,7 @@
-
+
-
+
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index 98b9864a6dc..014bee82492 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -125,7 +125,7 @@
-
+
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 2e8328ef32b..12da680d524 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -99,7 +99,7 @@
-
+
From 99ba070bc5d6674df7ab496d19a1603115f9278e Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 11:52:51 +0300 Subject: [PATCH 10/14] chore(*): In case width is null, always apply minwidth to columns as default. --- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index ce6e1793712..23f66d5ba63 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -3999,7 +3999,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements */ protected _derivePossibleWidth() { if (!this.columnWidthSetByUser) { - this._columnWidth = this.getPossibleColumnWidth(); + this._columnWidth = this.width ? 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); From 489cde2e1b45c745d6677eb64f3364b62ee30d0d Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 11:54:45 +0300 Subject: [PATCH 11/14] chore(*): Make check more specific to null. --- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 23f66d5ba63..1cf7bdf2416 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -3999,7 +3999,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements */ protected _derivePossibleWidth() { if (!this.columnWidthSetByUser) { - this._columnWidth = this.width ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px'; + 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); From d0b9126ba2c1144ddca00b8e4e681e191c28c1b3 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 14:19:21 +0300 Subject: [PATCH 12/14] chore(*): Fixing tests. --- .../src/lib/grids/grid/row-drag.directive.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts index 37c8b5294e4..bf8fe5c361c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts @@ -213,7 +213,6 @@ describe('IgxGrid - Row Drag Tests', () => { })); it('should align horizontal scrollbar with first column when column pinning is disabled', fakeAsync(() => { // has no draggable and selectable rows - grid.width = '400px'; grid.rowSelectable = false; grid.rowDraggable = false; tick(); @@ -248,7 +247,6 @@ describe('IgxGrid - Row Drag Tests', () => { expect(horizontalScrollbarRect.left).toBe(0); })); it('should align horizontal scrollbar with first non-pinned column when column pinning is enabled', fakeAsync(() => { - grid.width = '400px'; grid.pinColumn('ProductName'); tick(); fixture.detectChanges(); From c78e4ad0b92290e5e7ef212d1e61831a32f0fb5e Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 14:33:04 +0300 Subject: [PATCH 13/14] chore(*): Fixing another test. --- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 31619aeb1b9..d76592266b8 100644 --- 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 @@ -3504,7 +3504,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(); From 0769d681a14fe2a27d3b9ec8f021e4bb87856d8b Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 2 Aug 2019 11:29:25 +0300 Subject: [PATCH 14/14] chore(*): DetectChanges before feature's column width is calculated so that all option changes are applied. --- projects/igniteui-angular/src/lib/grids/grid-base.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 1cf7bdf2416..2e0f4373bc7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4244,6 +4244,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements if (!colSum) { return null; } + this.cdr.detectChanges(); colSum += this.getFeatureColumnsWidth(); return colSum; }