From 0d60ec815ca2408724623cf1cd5ef702a0393742 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 12 Jul 2019 11:33:09 +0300 Subject: [PATCH 01/15] 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 fc3dafb7bc5..0fc40e81d7a 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; @@ -4348,7 +4360,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 a424677efc4..65386b5d4f0 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 @@ -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(grid.nativeElement.offsetWidth).toBe(30 * 136); + }); }); describe('IgxGrid - API methods', () => { From 667e7e05b8ea1a6781dcfe3a27896cae14b8ec4e Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 12 Jul 2019 13:23:30 +0300 Subject: [PATCH 02/15] 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 0fc40e81d7a..ad8e05e7118 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 efb9fdcb21905a089ef29e548133e4c841760d48 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 18 Jul 2019 11:01:34 +0300 Subject: [PATCH 03/15] 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 9987559abf6..5f47508317e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -654,10 +654,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 b6401c3deb9..46808c5bf5f 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 @@ -503,7 +503,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone return width; } - private getDefaultExpanderWidth(): number { + private getDefaultExpanderWidth(): number { switch (this.displayDensity) { case DisplayDensity.cosy: return 57; From fb2ee81c560b4ad43cf6c9eb1a0d2c26e66a42ee Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 18 Jul 2019 16:10:30 +0300 Subject: [PATCH 04/15] 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. --- 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 a5a87aea76f..80a11577ee6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4258,7 +4258,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0); } - if (this.hasVerticalSroll()) { + if (this.hasVerticalSroll() && this.width !== null) { width -= this.scrollWidth; } if (Number.isFinite(width) && width !== this.calcWidth) { From a1ac9efdb8d50702fcb75fa0e0f51efd86603e0d Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 19 Jul 2019 17:05:24 +0300 Subject: [PATCH 05/15] chore(*): Include feature's column width to calculated body width when width is set to null. --- 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 80a11577ee6..c766b8cfff0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4254,8 +4254,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } - if (!width) { + if (this.width === null || !width) { width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0); + width += this.getFeatureColumnsWidth(); } if (this.hasVerticalSroll() && this.width !== null) { From 624275570b58a6dc7f14eb1a61640824b0bf5b5f Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 25 Jul 2019 18:07:48 +0300 Subject: [PATCH 06/15] 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 | 53 +++++++++++++------ .../src/lib/grids/grid/grid.component.spec.ts | 4 +- 2 files changed, 40 insertions(+), 17 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 c766b8cfff0..969d96faab6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/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. @@ -653,19 +654,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 @@ -4255,8 +4245,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements if (this.width === null || !width) { - width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0); - width += this.getFeatureColumnsWidth(); + width = this.getColumnWidthSum(); } if (this.hasVerticalSroll() && this.width !== null) { @@ -4269,6 +4258,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(); @@ -4356,6 +4356,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; } /** @@ -4406,7 +4429,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 3f5acab25db..884bb068648 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 @@ -1390,14 +1390,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 d8747270b11d0e1454c8626a367958c5bc68eb33 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 25 Jul 2019 18:58:06 +0300 Subject: [PATCH 07/15] 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 969d96faab6..0ec5366ef73 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4358,8 +4358,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 26e59bc6ad3b3520a549dcfa1178f5e8747ede6c Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 26 Jul 2019 15:50:07 +0300 Subject: [PATCH 08/15] 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 0ec5366ef73..7fe4af32dc3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4182,9 +4182,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); @@ -4260,8 +4258,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 b94145bb3f9..6d8678f1dea 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 46808c5bf5f..816df3a0ed1 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 @@ -694,16 +694,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 fe3c12263495bab1b9d4f46af405f22d5658b710 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 26 Jul 2019 18:01:20 +0300 Subject: [PATCH 09/15] 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 7fe4af32dc3..7f222e7ad1e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4261,7 +4261,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 c900da0864bf82013a8da1a78ffc60bf8d1c20ae Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 31 Jul 2019 18:16:23 +0300 Subject: [PATCH 10/15] 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 7f222e7ad1e..94d4f45b34d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4249,7 +4249,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(); } @@ -4262,8 +4262,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 30251c86cb2..4d3d9273e81 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -129,7 +129,7 @@
Date: Thu, 1 Aug 2019 11:28:07 +0300 Subject: [PATCH 11/15] chore(*): Fixing issues with width = null. --- .../src/lib/grids/grid-base.component.ts | 13 ++++++++++--- .../src/lib/grids/grid/grid.component.html | 2 +- .../hierarchical-grid.component.html | 2 +- .../lib/grids/tree-grid/tree-grid.component.html | 2 +- 4 files changed, 13 insertions(+), 6 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 a2eb287060e..c10d2275f06 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -3065,6 +3065,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. @@ -4373,7 +4378,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements }); } else { this.zone.onStable.pipe(first()).subscribe(() => { - this._applyWidthHostBinding(); + this.zone.run(() => { + this._applyWidthHostBinding(); + }); }); } } @@ -4387,9 +4394,9 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } width = currentWidth + 'px'; this.resetCaches(); - this.cdr.markForCheck(); } this._hostWidth = width; + this.cdr.markForCheck(); } /** @@ -4440,7 +4447,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); + parseInt(this.width, 10) || parseInt(this.hostWidth, 10) || this.calcWidth; if (this.hasVerticalSroll() && !this.isPercentWidth) { width -= this.scrollWidth; } 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 4d3d9273e81..5a388d122b9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -190,7 +190,7 @@ [style.width.px]="scrollWidth">
-
+
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 01a58ed8e7b..3ede32d1e01 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 @@ -162,7 +162,7 @@ [style.width.px]="scrollWidth">
-
+
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 01ff7d76fe7..4e7acfd4770 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 @@ -143,7 +143,7 @@ [style.width.px]="scrollWidth">
-
+
From c520ce02a3bfb4ade339a92410de3d35f4b5b58d Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 11:52:51 +0300 Subject: [PATCH 12/15] 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 c10d2275f06..9e36fef8814 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4032,7 +4032,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 b5b8bfd133409e07b8cacc0739cc1fa15ad1e222 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 11:54:45 +0300 Subject: [PATCH 13/15] 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 9e36fef8814..fa58db536f4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4032,7 +4032,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 9a5539dcb2a4434f281da80dad64d208f73a1ba1 Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 1 Aug 2019 14:33:04 +0300 Subject: [PATCH 14/15] 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 08633a55b6d..3ba2334a661 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 @@ -3509,7 +3509,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 0a1fae1716020361f2671e7b1f3f73c47774eef9 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 2 Aug 2019 11:29:25 +0300 Subject: [PATCH 15/15] 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 fa58db536f4..d9e8bc099f6 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4275,6 +4275,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements if (!colSum) { return null; } + this.cdr.detectChanges(); colSum += this.getFeatureColumnsWidth(); return colSum; }