From 84183e999d1e0a0ab7a71bef1414e2c9f0c7fd0b Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 12 Jul 2019 11:33:09 +0300 Subject: [PATCH 01/13] 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 71f61181b35..9ec872dfa87 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -595,6 +595,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 @@ -603,7 +616,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * @memberof IgxGridBaseComponent */ @WatchChanges() - @HostBinding('style.width') @Input() public get width() { return this._width; @@ -4181,7 +4193,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 cde98ce1252..7ec4b7e8f26 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 cc8390ef9dd2d82fff7bb45256cb0570aa8f80fa Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 12 Jul 2019 13:23:30 +0300 Subject: [PATCH 02/13] 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 9ec872dfa87..e932a5c8e84 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -595,8 +595,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 98819da575d7bd20f2af0b2d666b2177107ba7b4 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 18 Jul 2019 11:01:34 +0300 Subject: [PATCH 03/13] chore(*): Handling null width inetgration with other grid features that change the total grid width (row selectors, expansion indicators etc.). --- .../src/lib/grids/grid-base.component.ts | 19 ++++++++++++++++++- .../hierarchical-grid.component.ts | 13 +++++++++++++ 2 files changed, 31 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 e932a5c8e84..7fff227ea02 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -601,10 +601,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; @@ -4164,6 +4166,21 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } } + /** + * @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; + } + /** * Gets calculated width of the pinned area. * ```typescript 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 3577536095f..cd341479812 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 @@ -502,6 +502,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: From 87754e948c15073908bde289b729a0537a631944 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 25 Jul 2019 18:07:48 +0300 Subject: [PATCH 04/13] 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 7fff227ea02..5402d6c178c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/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. @@ -600,19 +601,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 @@ -4058,11 +4048,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) { @@ -4072,6 +4062,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(); @@ -4164,6 +4165,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; } /** @@ -4213,7 +4237,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 7ec4b7e8f26..848bf18ae8e 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 cfdc27580855a7f5ced8095bd90a4d84f3f1d609 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 25 Jul 2019 18:58:06 +0300 Subject: [PATCH 05/13] 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 00c1a41bdeb..426c2654db8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4168,8 +4168,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 25902a39e60e25ddf5bb98a3739515e2d7e6c6b4 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 26 Jul 2019 18:01:20 +0300 Subject: [PATCH 06/13] 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 426c2654db8..96d33ae2e5d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4068,7 +4068,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements const cols = 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 ebb59c8cab533b2275c1a37aa99c95166884d453 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 31 Jul 2019 18:16:23 +0300 Subject: [PATCH 07/13] 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 96d33ae2e5d..4a4bd17d1e6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4056,7 +4056,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(); } @@ -4069,8 +4069,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements .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 d7023a04be9..98031656e97 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -77,7 +77,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 3c6863a3225..55a311f080d 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 @@ -115,7 +115,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 b1d93d3a9dc..ffd877b208e 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 @@ -91,7 +91,7 @@
-
+
From 0295f0a01fdc3d80a128b36f8831361fe89db88d Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 11:52:51 +0300 Subject: [PATCH 09/13] chore(*): In case width is null, always apply minwidth to columns as default. --- .../igniteui-angular/src/lib/grids/grid-base.component.ts | 4 ++-- 1 file changed, 2 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 b5ca93213ef..c9de1f2c791 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -3860,8 +3860,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * Sets columns defaultWidth property */ protected _derivePossibleWidth() { - if (!this._columnWidthSetByUser) { - this._columnWidth = this.getPossibleColumnWidth(); + if (!this.columnWidthSetByUser) { + this._columnWidth = this.width ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px'; this.columnList.forEach((column: IgxColumnComponent) => { column.defaultWidth = this._columnWidth; }); From 3332aecc2c16f28a7a84274f3db732f0889955e6 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 11:54:45 +0300 Subject: [PATCH 10/13] 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 c9de1f2c791..0ac084d0f58 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -3861,7 +3861,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) => { column.defaultWidth = this._columnWidth; }); From 8fa02ab81471058a00fb4101d3459f1daedd38c5 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 13:50:28 +0300 Subject: [PATCH 11/13] chore(*): Fixing merge issue. --- 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 0ac084d0f58..d5f76c85e42 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -3860,7 +3860,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements * Sets columns defaultWidth property */ protected _derivePossibleWidth() { - if (!this.columnWidthSetByUser) { + if (!this._columnWidthSetByUser) { this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px'; this.columnList.forEach((column: IgxColumnComponent) => { column.defaultWidth = this._columnWidth; From 3a9b5975f136afd7281eea10a93e5ec2675f2d9d Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 14:33:04 +0300 Subject: [PATCH 12/13] 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 bcd52c7661f..5ec62265129 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 @@ -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(); From d3d95878563069162d57e762b19241ba33c60f4e Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 2 Aug 2019 11:29:25 +0300 Subject: [PATCH 13/13] 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 d5f76c85e42..2ade98b1d12 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4082,6 +4082,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements if (!colSum) { return null; } + this.cdr.detectChanges(); colSum += this.getFeatureColumnsWidth(); return colSum; }