From b2826120cbac4ecaeab35b67c3c19f84f20a96f4 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 22 Jun 2020 17:02:10 +0300 Subject: [PATCH 1/7] feat(igxGrid): Add handling for resizing when columns have % widths. --- .../lib/grids/resizing/resizing.service.ts | 88 ++++++++++++++----- .../grid-column-resizing.sample.html | 2 +- .../grid-column-resizing.sample.ts | 12 ++- 3 files changed, 75 insertions(+), 27 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index 64ccd414591..7372ac8a0dc 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -8,8 +8,6 @@ import { IgxColumnComponent } from '../columns/column.component'; @Injectable() export class IgxColumnResizingService { - private pinnedMaxWidth: string; - /** * @hidden */ @@ -57,9 +55,14 @@ export class IgxColumnResizingService { */ get restrictResizeMin(): number { const actualMinWidth = parseFloat(this.column.minWidth); - const minWidth = actualMinWidth < parseFloat(this.column.width) ? actualMinWidth : parseFloat(this.column.width); + const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; + const gridAvailableSize = this.column.grid.calcWidth - this.column.grid.featureColumnsWidth(); + const isMinPercentageWidth = this.column.minWidth && typeof this.column.minWidth === 'string' && + this.column.minWidth.indexOf('%') !== -1; + const calcMinWidth = isMinPercentageWidth ? actualMinWidth / 100 * gridAvailableSize : actualMinWidth; + const minWidth = calcMinWidth < actualWidth ? calcMinWidth : actualWidth; - return this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width - minWidth; + return actualWidth - minWidth; } /** @@ -67,8 +70,14 @@ export class IgxColumnResizingService { */ get restrictResizeMax(): number { const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; + const gridAvailableSize = this.column.grid.calcWidth - this.column.grid.featureColumnsWidth(); + const isMaxPercentageWidth = this.column.maxWidth && typeof this.column.maxWidth === 'string' && + this.column.maxWidth.indexOf('%') !== -1; + const calcMaxWidth = isMaxPercentageWidth ? + parseFloat(this.column.maxWidth) / 100 * gridAvailableSize : + parseFloat(this.column.maxWidth); if (this.column.maxWidth) { - return parseFloat(this.column.maxWidth) - actualWidth; + return calcMaxWidth - actualWidth; } else { return Number.MAX_SAFE_INTEGER; } @@ -109,12 +118,44 @@ export class IgxColumnResizingService { this.showResizer = false; const diff = event.clientX - this.startResizePos; - let currentColWidth = parseFloat(this.column.width); + const colWidth = this.column.width; + const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; + let currentColWidth = parseFloat(colWidth); + const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; + currentColWidth = Number.isNaN(currentColWidth) ? actualWidth : currentColWidth + 'px'; + + if (isPercentageWidth) { + this._handlePercentageResize(diff, this.column); + } else { + this._handlePixelResize(diff, this.column); + } + + + this.zone.run(() => {}); + + if (currentColWidth !== parseFloat(this.column.width)) { + this.column.grid.onColumnResized.emit({ + column: this.column, + prevWidth: isPercentageWidth ? currentColWidth + '%' : currentColWidth + 'px', + newWidth: this.column.width + }); + } + + this.isColumnResizing = false; + } + + protected _handlePixelResize(diff: number, column: IgxColumnComponent) { + let currentColWidth = parseFloat(column.width); + const gridAvailableSize = column.grid.calcWidth - column.grid.featureColumnsWidth(); const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; currentColWidth = Number.isNaN(currentColWidth) || (currentColWidth < actualWidth) ? actualWidth : currentColWidth; - const colMinWidth = this.getColMinWidth(this.column); - const colMaxWidth = this.getColMaxWidth(this.column); + const isMinPercentageWidth = column.minWidth && typeof column.minWidth === 'string' && column.minWidth.indexOf('%') !== -1; + const isMaxPercentageWidth = column.maxWidth && typeof column.maxWidth === 'string' && column.maxWidth.indexOf('%') !== -1; + const colMinWidth = !isMinPercentageWidth ? this.getColMinWidth(this.column) : + parseFloat(this.column.minWidth) / 100 * gridAvailableSize; + const colMaxWidth = !isMaxPercentageWidth ? parseFloat(column.maxWidth) : + parseFloat(this.column.maxWidth) / 100 * gridAvailableSize; if (this.column.grid.hasColumnLayouts) { this.resizeColumnLayoutFor(this.column, diff); } else { @@ -126,18 +167,25 @@ export class IgxColumnResizingService { this.column.width = (currentColWidth + diff) + 'px'; } } + } - this.zone.run(() => {}); + protected _handlePercentageResize(diff: number, column: IgxColumnComponent) { + const currentPercentWidth = parseFloat(column.width); + const gridAvailableSize = column.grid.calcWidth - column.grid.featureColumnsWidth(); - if (currentColWidth !== parseFloat(this.column.width)) { - this.column.grid.onColumnResized.emit({ - column: this.column, - prevWidth: currentColWidth.toString(), - newWidth: this.column.width - }); - } + const diffPercentage = (diff / gridAvailableSize) * 100; + const isMinPercentageWidth = column.minWidth && typeof column.minWidth === 'string' && column.minWidth.indexOf('%') !== -1; + const isMaxPercentageWidth = column.maxWidth && typeof column.maxWidth === 'string' && column.maxWidth.indexOf('%') !== -1; + const colMinWidth = isMinPercentageWidth ? parseFloat(column.minWidth) : parseFloat(column.minWidth) / gridAvailableSize * 100; + const colMaxWidth = isMaxPercentageWidth ? parseFloat(column.maxWidth) : parseFloat(column.maxWidth) / gridAvailableSize * 100; - this.isColumnResizing = false; + if (currentPercentWidth + diffPercentage < colMinWidth) { + this.column.width = colMinWidth + '%'; + } else if (colMaxWidth && (currentPercentWidth + diffPercentage > colMaxWidth)) { + this.column.width = colMaxWidth + '%'; + } else { + this.column.width = (currentPercentWidth + diffPercentage) + '%'; + } } protected getColMinWidth(column: IgxColumnComponent) { @@ -149,10 +197,6 @@ export class IgxColumnResizingService { return actualMinWidth < currentColWidth ? actualMinWidth : currentColWidth; } - protected getColMaxWidth(column: IgxColumnComponent) { - return column.pinned ? parseFloat(this.pinnedMaxWidth) : parseFloat(column.maxWidth); - } - protected resizeColumnLayoutFor(column: IgxColumnComponent, diff: number) { const relativeColumns = column.getResizableColUnderEnd(); const combinedSpan = relativeColumns.reduce((acc, col) => acc + col.spanUsed, 0); @@ -174,7 +218,7 @@ export class IgxColumnResizingService { const resizeScaled = (diff / updatedCombinedSpan) * col.target.gridColumnSpan; const minWidth = this.getColMinWidth(col.target); - const maxWidth = this.getColMaxWidth(col.target); + const maxWidth = parseFloat(col.target.maxWidth); if (currentResizeWidth + resizeScaled < minWidth) { col.target.width = minWidth + 'px'; updatedDiff += (currentResizeWidth - minWidth); diff --git a/src/app/grid-column-resizing/grid-column-resizing.sample.html b/src/app/grid-column-resizing/grid-column-resizing.sample.html index c3634a58641..df2e6186ce0 100644 --- a/src/app/grid-column-resizing/grid-column-resizing.sample.html +++ b/src/app/grid-column-resizing/grid-column-resizing.sample.html @@ -1,5 +1,5 @@
- + Date: Mon, 22 Jun 2020 20:28:26 +0300 Subject: [PATCH 2/7] feat(igxGrid): Autosizing with percentage column widths. Refactor to re-use width caculations. --- .../src/lib/grids/columns/column.component.ts | 46 ++++++++++++++++++- .../lib/grids/resizing/resizing.service.ts | 43 ++++------------- .../grid-column-resizing.sample.html | 2 +- .../grid-column-resizing.sample.ts | 6 +-- 4 files changed, 58 insertions(+), 39 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 7dff34bf350..844f37c190c 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -439,6 +439,32 @@ export class IgxColumnComponent implements AfterContentInit { @WatchColumnChanges() @Input() public maxWidth: string; + + get maxWidthPx() { + const gridAvailableSize = this.grid.calcWidth; + const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1; + return isPercentageWidth ? parseFloat(this.maxWidth) / 100 * gridAvailableSize : parseFloat(this.maxWidth); + } + + get maxWidthPercent() { + const gridAvailableSize = this.grid.calcWidth; + const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1; + return isPercentageWidth ? parseFloat(this.maxWidth) : parseFloat(this.maxWidth) / gridAvailableSize * 100; + } + + get minWidthPx() { + const gridAvailableSize = this.grid.calcWidth; + const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1; + return isPercentageWidth ? parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth); + } + + get minWidthPercent() { + const gridAvailableSize = this.grid.calcWidth; + const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1; + return isPercentageWidth ? parseFloat(this.minWidth) : parseFloat(this.minWidth) / gridAvailableSize * 100; + } + + /** * Sets/gets the minimum `width` of the column. * Default value is `88`; @@ -1753,7 +1779,23 @@ export class IgxColumnComponent implements AfterContentInit { */ public autosize() { if (!this.columnGroup) { - this.width = this.getLargestCellWidth(); + const size = this.getLargestCellWidth(); + const gridAvailableSize = this.grid.calcWidth; + let newWidth; + const isPercentageWidth = this.width && typeof this.width === 'string' && this.width.indexOf('%') !== -1; + if (isPercentageWidth) { + const percentageSize = parseFloat(size) / gridAvailableSize * 100; + newWidth = percentageSize + '%'; + } else { + newWidth = size; + } + if (this.maxWidth && (parseFloat(size) > this.maxWidthPx)) { + newWidth = isPercentageWidth ? this.maxWidthPercent + '%' : this.maxWidthPx + 'px'; + } else if (parseFloat(size) < this.minWidthPx) { + newWidth = isPercentageWidth ? this.minWidthPercent + '%' : this.minWidthPx + 'px'; + } + + this.width = newWidth; this.grid.reflow(); } } @@ -1863,7 +1905,7 @@ export class IgxColumnComponent implements AfterContentInit { const colWidth = this.width; const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; if (isPercentageWidth) { - this._calcWidth = parseInt(colWidth, 10) / 100 * (grid.calcWidth - grid.featureColumnsWidth()); + this._calcWidth = parseInt(colWidth, 10) / 100 * grid.calcWidth; } else if (!colWidth) { // no width this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth(); diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index 7372ac8a0dc..34abf81988f 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -54,13 +54,8 @@ export class IgxColumnResizingService { * Returns the minimal possible width to which the column can be resized. */ get restrictResizeMin(): number { - const actualMinWidth = parseFloat(this.column.minWidth); const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; - const gridAvailableSize = this.column.grid.calcWidth - this.column.grid.featureColumnsWidth(); - const isMinPercentageWidth = this.column.minWidth && typeof this.column.minWidth === 'string' && - this.column.minWidth.indexOf('%') !== -1; - const calcMinWidth = isMinPercentageWidth ? actualMinWidth / 100 * gridAvailableSize : actualMinWidth; - const minWidth = calcMinWidth < actualWidth ? calcMinWidth : actualWidth; + const minWidth = this.column.minWidthPx < actualWidth ? this.column.minWidthPx : actualWidth; return actualWidth - minWidth; } @@ -70,14 +65,9 @@ export class IgxColumnResizingService { */ get restrictResizeMax(): number { const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; - const gridAvailableSize = this.column.grid.calcWidth - this.column.grid.featureColumnsWidth(); - const isMaxPercentageWidth = this.column.maxWidth && typeof this.column.maxWidth === 'string' && - this.column.maxWidth.indexOf('%') !== -1; - const calcMaxWidth = isMaxPercentageWidth ? - parseFloat(this.column.maxWidth) / 100 * gridAvailableSize : - parseFloat(this.column.maxWidth); + const maxWidth = this.column.maxWidthPx; if (this.column.maxWidth) { - return calcMaxWidth - actualWidth; + return maxWidth - actualWidth; } else { return Number.MAX_SAFE_INTEGER; } @@ -93,14 +83,8 @@ export class IgxColumnResizingService { public autosizeColumnOnDblClick() { const currentColWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; - const size = this.column.getLargestCellWidth(); - if (this.column.maxWidth && (parseFloat(size) > parseFloat(this.column.maxWidth))) { - this.column.width = parseFloat(this.column.maxWidth) + 'px'; - } else if (parseFloat(size) < parseFloat(this.column.minWidth)) { - this.column.width = parseFloat(this.column.minWidth) + 'px'; - } else { - this.column.width = size; - } + + this.column.autosize(); this.zone.run(() => {}); @@ -146,16 +130,11 @@ export class IgxColumnResizingService { protected _handlePixelResize(diff: number, column: IgxColumnComponent) { let currentColWidth = parseFloat(column.width); - const gridAvailableSize = column.grid.calcWidth - column.grid.featureColumnsWidth(); const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; currentColWidth = Number.isNaN(currentColWidth) || (currentColWidth < actualWidth) ? actualWidth : currentColWidth; - const isMinPercentageWidth = column.minWidth && typeof column.minWidth === 'string' && column.minWidth.indexOf('%') !== -1; - const isMaxPercentageWidth = column.maxWidth && typeof column.maxWidth === 'string' && column.maxWidth.indexOf('%') !== -1; - const colMinWidth = !isMinPercentageWidth ? this.getColMinWidth(this.column) : - parseFloat(this.column.minWidth) / 100 * gridAvailableSize; - const colMaxWidth = !isMaxPercentageWidth ? parseFloat(column.maxWidth) : - parseFloat(this.column.maxWidth) / 100 * gridAvailableSize; + const colMinWidth = column.minWidthPx; + const colMaxWidth = column.maxWidthPx; if (this.column.grid.hasColumnLayouts) { this.resizeColumnLayoutFor(this.column, diff); } else { @@ -171,13 +150,11 @@ export class IgxColumnResizingService { protected _handlePercentageResize(diff: number, column: IgxColumnComponent) { const currentPercentWidth = parseFloat(column.width); - const gridAvailableSize = column.grid.calcWidth - column.grid.featureColumnsWidth(); + const gridAvailableSize = column.grid.calcWidth; const diffPercentage = (diff / gridAvailableSize) * 100; - const isMinPercentageWidth = column.minWidth && typeof column.minWidth === 'string' && column.minWidth.indexOf('%') !== -1; - const isMaxPercentageWidth = column.maxWidth && typeof column.maxWidth === 'string' && column.maxWidth.indexOf('%') !== -1; - const colMinWidth = isMinPercentageWidth ? parseFloat(column.minWidth) : parseFloat(column.minWidth) / gridAvailableSize * 100; - const colMaxWidth = isMaxPercentageWidth ? parseFloat(column.maxWidth) : parseFloat(column.maxWidth) / gridAvailableSize * 100; + const colMinWidth = column.minWidthPercent; + const colMaxWidth = column.maxWidthPercent; if (currentPercentWidth + diffPercentage < colMinWidth) { this.column.width = colMinWidth + '%'; diff --git a/src/app/grid-column-resizing/grid-column-resizing.sample.html b/src/app/grid-column-resizing/grid-column-resizing.sample.html index df2e6186ce0..b050ab2cb7c 100644 --- a/src/app/grid-column-resizing/grid-column-resizing.sample.html +++ b/src/app/grid-column-resizing/grid-column-resizing.sample.html @@ -1,5 +1,5 @@
- + Date: Tue, 23 Jun 2020 15:37:46 +0300 Subject: [PATCH 3/7] chore(*): Fix tests. --- .../src/lib/grids/columns/column.component.ts | 50 ++++++++++++------- .../lib/grids/grid/column-resizing.spec.ts | 5 +- .../lib/grids/resizing/resizing.service.ts | 15 +++--- 3 files changed, 44 insertions(+), 26 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 844f37c190c..bc665f41ddd 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -440,24 +440,36 @@ export class IgxColumnComponent implements AfterContentInit { @Input() public maxWidth: string; + /** + * @hidden + */ get maxWidthPx() { const gridAvailableSize = this.grid.calcWidth; const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1; return isPercentageWidth ? parseFloat(this.maxWidth) / 100 * gridAvailableSize : parseFloat(this.maxWidth); } + /** + * @hidden + */ get maxWidthPercent() { const gridAvailableSize = this.grid.calcWidth; const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1; return isPercentageWidth ? parseFloat(this.maxWidth) : parseFloat(this.maxWidth) / gridAvailableSize * 100; } + /** + * @hidden + */ get minWidthPx() { const gridAvailableSize = this.grid.calcWidth; const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1; return isPercentageWidth ? parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth); } + /** + * @hidden + */ get minWidthPercent() { const gridAvailableSize = this.grid.calcWidth; const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1; @@ -1779,27 +1791,29 @@ export class IgxColumnComponent implements AfterContentInit { */ public autosize() { if (!this.columnGroup) { - const size = this.getLargestCellWidth(); - const gridAvailableSize = this.grid.calcWidth; - let newWidth; - const isPercentageWidth = this.width && typeof this.width === 'string' && this.width.indexOf('%') !== -1; - if (isPercentageWidth) { - const percentageSize = parseFloat(size) / gridAvailableSize * 100; - newWidth = percentageSize + '%'; - } else { - newWidth = size; - } - if (this.maxWidth && (parseFloat(size) > this.maxWidthPx)) { - newWidth = isPercentageWidth ? this.maxWidthPercent + '%' : this.maxWidthPx + 'px'; - } else if (parseFloat(size) < this.minWidthPx) { - newWidth = isPercentageWidth ? this.minWidthPercent + '%' : this.minWidthPx + 'px'; - } - - this.width = newWidth; + const size = this.getAutoSize(); + this.width = size; this.grid.reflow(); } } + /** + * @hidden + */ + public getAutoSize() { + const size = this.getLargestCellWidth(); + const gridAvailableSize = this.grid.calcWidth; + let newWidth; + const isPercentageWidth = this.width && typeof this.width === 'string' && this.width.indexOf('%') !== -1; + if (isPercentageWidth) { + const percentageSize = parseFloat(size) / gridAvailableSize * 100; + newWidth = percentageSize + '%'; + } else { + newWidth = size; + } + return newWidth; + } + /** * @hidden */ @@ -1905,7 +1919,7 @@ export class IgxColumnComponent implements AfterContentInit { const colWidth = this.width; const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; if (isPercentageWidth) { - this._calcWidth = parseInt(colWidth, 10) / 100 * grid.calcWidth; + this._calcWidth = parseInt(colWidth, 10) / 100 * (grid.calcWidth - grid.featureColumnsWidth()); } else if (!colWidth) { // no width this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 5d272f439be..45f9ea3d16f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -392,7 +392,8 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { UIInteractions.simulateMouseEvent('mouseup', resizer, 350, 5); fixture.detectChanges(); - expect(grid.columns[1].width).toEqual('250px'); + // column has maxWidth='150px' + expect(grid.columns[1].width).toEqual('150px'); }); it('should autoresize column on double click.', async() => { @@ -490,7 +491,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { expect(grid.columns[0].width).toEqual('300px'); expect(fixture.componentInstance.count).toEqual(1); expect(fixture.componentInstance.column).toBe(grid.columns[0]); - expect(fixture.componentInstance.prevWidth).toEqual('150'); + expect(fixture.componentInstance.prevWidth).toEqual('150px'); expect(fixture.componentInstance.newWidth).toEqual('300px'); expect(grid.columns[1].width).toEqual('150px'); diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index 34abf81988f..3b78ec32bd6 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -77,14 +77,17 @@ export class IgxColumnResizingService { * Autosizes the column to the longest currently visible cell value, including the header cell. * If the column has a predifined maxWidth and the autosized column width will become bigger than it, * then the column is sized to its maxWidth. - * If the column is pinned and the autosized column width will cause the pinned area to become bigger - * than the maximum allowed pinned area width (80% of the total grid width), autosizing will be deismissed. */ public autosizeColumnOnDblClick() { const currentColWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; - - - this.column.autosize(); + const isPercentageWidth = this.column.width && typeof this.column.width === 'string' && this.column.width.indexOf('%') !== -1; + let size = this.column.getAutoSize(); + if (this.column.maxWidth && (parseFloat(size) > this.column.maxWidthPx)) { + size = isPercentageWidth ? this.column.maxWidthPercent + '%' : this.column.maxWidthPx + 'px'; + } else if (parseFloat(size) < this.column.minWidthPx) { + size = isPercentageWidth ? this.column.minWidthPercent + '%' : this.column.minWidthPx + 'px'; + } + this.column.width = size; this.zone.run(() => {}); @@ -106,7 +109,7 @@ export class IgxColumnResizingService { const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; let currentColWidth = parseFloat(colWidth); const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; - currentColWidth = Number.isNaN(currentColWidth) ? actualWidth : currentColWidth + 'px'; + currentColWidth = Number.isNaN(currentColWidth) ? parseFloat(actualWidth) : currentColWidth; if (isPercentageWidth) { this._handlePercentageResize(diff, this.column); From ec4206f2f937316750169407f66dcb486f5a1159 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 23 Jun 2020 17:06:36 +0300 Subject: [PATCH 4/7] chore(*): Handle percent resize for mrl columns. --- .../lib/grids/resizing/resizing.service.ts | 45 ++++++++++--------- .../grid-mrl.sample.html | 16 +++---- 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index 3b78ec32bd6..1f2df549f0d 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -111,7 +111,9 @@ export class IgxColumnResizingService { const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; currentColWidth = Number.isNaN(currentColWidth) ? parseFloat(actualWidth) : currentColWidth; - if (isPercentageWidth) { + if (this.column.grid.hasColumnLayouts) { + this.resizeColumnLayoutFor(this.column, diff); + } else if (isPercentageWidth) { this._handlePercentageResize(diff, this.column); } else { this._handlePixelResize(diff, this.column); @@ -133,21 +135,17 @@ export class IgxColumnResizingService { protected _handlePixelResize(diff: number, column: IgxColumnComponent) { let currentColWidth = parseFloat(column.width); - const actualWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; + const actualWidth = column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; currentColWidth = Number.isNaN(currentColWidth) || (currentColWidth < actualWidth) ? actualWidth : currentColWidth; const colMinWidth = column.minWidthPx; const colMaxWidth = column.maxWidthPx; - if (this.column.grid.hasColumnLayouts) { - this.resizeColumnLayoutFor(this.column, diff); + if (currentColWidth + diff < colMinWidth) { + column.width = colMinWidth + 'px'; + } else if (colMaxWidth && (currentColWidth + diff > colMaxWidth)) { + column.width = colMaxWidth + 'px'; } else { - if (currentColWidth + diff < colMinWidth) { - this.column.width = colMinWidth + 'px'; - } else if (colMaxWidth && (currentColWidth + diff > colMaxWidth)) { - this.column.width = colMaxWidth + 'px'; - } else { - this.column.width = (currentColWidth + diff) + 'px'; - } + column.width = (currentColWidth + diff) + 'px'; } } @@ -160,11 +158,11 @@ export class IgxColumnResizingService { const colMaxWidth = column.maxWidthPercent; if (currentPercentWidth + diffPercentage < colMinWidth) { - this.column.width = colMinWidth + '%'; + column.width = colMinWidth + '%'; } else if (colMaxWidth && (currentPercentWidth + diffPercentage > colMaxWidth)) { - this.column.width = colMaxWidth + '%'; + column.width = colMaxWidth + '%'; } else { - this.column.width = (currentPercentWidth + diffPercentage) + '%'; + column.width = (currentPercentWidth + diffPercentage) + '%'; } } @@ -196,16 +194,18 @@ export class IgxColumnResizingService { columnsToResize.forEach((col) => { const currentResizeWidth = parseFloat(col.target.calcWidth); const resizeScaled = (diff / updatedCombinedSpan) * col.target.gridColumnSpan; + const colWidth = col.target.width; + const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; - const minWidth = this.getColMinWidth(col.target); - const maxWidth = parseFloat(col.target.maxWidth); + const minWidth = col.target.minWidthPx; + const maxWidth = col.target.maxWidthPx; if (currentResizeWidth + resizeScaled < minWidth) { - col.target.width = minWidth + 'px'; + col.target.width = isPercentageWidth ? col.target.minWidthPercent + '%' : minWidth + 'px'; updatedDiff += (currentResizeWidth - minWidth); newCombinedSpan -= col.spanUsed; setMinMaxCols = true; } else if (maxWidth && (currentResizeWidth + resizeScaled > maxWidth)) { - col.target.width = maxWidth + 'px'; + col.target.width = isPercentageWidth ? col.target.maxWidthPercent + '%' : col.target.maxWidthPx + 'px'; updatedDiff -= (maxWidth - currentResizeWidth); newCombinedSpan -= col.spanUsed; setMinMaxCols = true; @@ -221,9 +221,14 @@ export class IgxColumnResizingService { // Those left that don't reach min/max size resize them normally. columnsToResize.forEach((col) => { - const currentResizeWidth = parseFloat(col.target.calcWidth); const resizeScaled = (updatedDiff / updatedCombinedSpan) * col.target.gridColumnSpan; - col.target.width = (currentResizeWidth + resizeScaled) + 'px'; + const colWidth = col.target.width; + const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; + if (isPercentageWidth) { + this._handlePercentageResize(resizeScaled, col.target); + } else { + this._handlePixelResize(resizeScaled, col.target); + } }); } } diff --git a/src/app/grid-multi-row-layout/grid-mrl.sample.html b/src/app/grid-multi-row-layout/grid-mrl.sample.html index 51904e47441..1b7d31beca6 100644 --- a/src/app/grid-multi-row-layout/grid-mrl.sample.html +++ b/src/app/grid-multi-row-layout/grid-mrl.sample.html @@ -7,22 +7,22 @@ - + - - - - + + + + - - - + + + Hide/Show second group From 994d21c816981fb9ff9041bf9fb6efba2d7d9c36 Mon Sep 17 00:00:00 2001 From: MKirova Date: Tue, 23 Jun 2020 19:19:11 +0300 Subject: [PATCH 5/7] chore(*): Adding tests. Fixing bugs. --- .../lib/grids/grid/column-resizing.spec.ts | 158 +++++++++++++++++- .../lib/grids/resizing/resizing.service.ts | 15 +- 2 files changed, 164 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 45f9ea3d16f..bbd03540223 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -369,6 +369,162 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { expect(grid.columns[1].width).toEqual('80px'); }); + it('should resize columns with % width.', async() => { + const fixture = TestBed.createComponent(ColPercentageGridComponent); + fixture.detectChanges(); + const grid = fixture.componentInstance.grid; + grid.height = null; + fixture.detectChanges(); + const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); + + expect(grid.columns[0].width).toBe('25%'); + + const headerResArea = headers[0].parent.children[2].nativeElement; + const startPos = headerResArea.getBoundingClientRect().x; + UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); + await wait(DEBOUNCE_TIME); + fixture.detectChanges(); + + const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement; + expect(resizer).toBeDefined(); + // resize with 100px, which is 25% + UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 100, 5); + UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 100, 5); + fixture.detectChanges(); + expect(grid.columns[0].width).toBe('50%'); + }); + + it('should resize columns with % width and % maxWidth.', async() => { + const fixture = TestBed.createComponent(ColPercentageGridComponent); + fixture.detectChanges(); + const grid = fixture.componentInstance.grid; + grid.height = null; + fixture.detectChanges(); + const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); + grid.columns[0].maxWidth = '30%'; + expect(grid.columns[0].width).toBe('25%'); + + const headerResArea = headers[0].parent.children[2].nativeElement; + const startPos = headerResArea.getBoundingClientRect().x; + UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); + await wait(DEBOUNCE_TIME); + fixture.detectChanges(); + + const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement; + expect(resizer).toBeDefined(); + // resize with +100px, which is 25% + UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 100, 5); + UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 100, 5); + fixture.detectChanges(); + + expect(grid.columns[0].width).toBe(grid.columns[0].maxWidth); + }); + + it('should resize columns with % width and % minWidth.', async() => { + + const fixture = TestBed.createComponent(ColPercentageGridComponent); + fixture.detectChanges(); + const grid = fixture.componentInstance.grid; + grid.height = null; + fixture.detectChanges(); + const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); + grid.columns[0].minWidth = '10%'; + expect(grid.columns[0].width).toBe('25%'); + + const headerResArea = headers[0].parent.children[2].nativeElement; + const startPos = headerResArea.getBoundingClientRect().x; + UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); + await wait(DEBOUNCE_TIME); + fixture.detectChanges(); + + const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement; + // resize with -100px + UIInteractions.simulateMouseEvent('mousemove', resizer, startPos - 100, 5); + UIInteractions.simulateMouseEvent('mouseup', resizer, startPos - 100, 5); + fixture.detectChanges(); + + expect(grid.columns[0].width).toBe(grid.columns[0].minWidth); + }); + + it('should resize columns with % width and pixel maxWidth.', async() => { + const fixture = TestBed.createComponent(ColPercentageGridComponent); + fixture.detectChanges(); + const grid = fixture.componentInstance.grid; + grid.height = null; + fixture.detectChanges(); + const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); + grid.columns[0].maxWidth = '200px'; + expect(grid.columns[0].width).toBe('25%'); + + const headerResArea = headers[0].parent.children[2].nativeElement; + const startPos = headerResArea.getBoundingClientRect().x; + UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); + await wait(DEBOUNCE_TIME); + fixture.detectChanges(); + + const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement; + expect(resizer).toBeDefined(); + // resize with +200px, which is 50% + UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 200, 5); + UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 200, 5); + fixture.detectChanges(); + expect(grid.columns[0].width).toBe('50%'); + }); + + it('should resize columns with % width and pixel minWidth.', async() => { + + const fixture = TestBed.createComponent(ColPercentageGridComponent); + fixture.detectChanges(); + const grid = fixture.componentInstance.grid; + grid.height = null; + fixture.detectChanges(); + const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); + // minWidth is 12.5% of the grid width - 400px + grid.columns[0].minWidth = '50px'; + expect(grid.columns[0].width).toBe('25%'); + + const headerResArea = headers[0].parent.children[2].nativeElement; + const startPos = headerResArea.getBoundingClientRect().x; + UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); + await wait(DEBOUNCE_TIME); + fixture.detectChanges(); + + const resizer = fixture.debugElement.queryAll(By.css(RESIZE_LINE_CLASS))[0].nativeElement; + // resize with -100px + UIInteractions.simulateMouseEvent('mousemove', resizer, startPos - 100, 5); + UIInteractions.simulateMouseEvent('mouseup', resizer, startPos - 100, 5); + fixture.detectChanges(); + + expect(grid.columns[0].width).toBe('12.5%'); + }); + + it('should autosize column with % width programmatically.', async() => { + const fixture = TestBed.createComponent(ColPercentageGridComponent); + fixture.detectChanges(); + const grid = fixture.componentInstance.grid; + grid.height = null; + fixture.detectChanges(); + expect(grid.columns[0].width).toBe('25%'); + grid.columns[0].autosize(); + fixture.detectChanges(); + expect(grid.columns[0].width).toBe('21%'); + }); + + it('should autosize column with % width on double click.', async() => { + const fixture = TestBed.createComponent(ColPercentageGridComponent); + fixture.detectChanges(); + const grid = fixture.componentInstance.grid; + grid.height = null; + fixture.detectChanges(); + expect(grid.columns[0].width).toBe('25%'); + const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); + const headerResArea = headers[0].parent.children[2].nativeElement; + UIInteractions.simulateMouseEvent('dblclick', headerResArea, 0, 0); + await wait(DEBOUNCE_TIME); + fixture.detectChanges(); + expect(grid.columns[0].width).toBe('21%'); + }); + it('should resize pinned column with preset max width.', async() => { const fixture = TestBed.createComponent(PinnedColumnsComponent); fixture.detectChanges(); @@ -894,7 +1050,7 @@ export class ColGridComponent implements OnInit { @Component({ template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``, - ` + ` ` diff --git a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts index 1f2df549f0d..286e2ad9bb5 100644 --- a/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts +++ b/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts @@ -82,10 +82,12 @@ export class IgxColumnResizingService { const currentColWidth = this.column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; const isPercentageWidth = this.column.width && typeof this.column.width === 'string' && this.column.width.indexOf('%') !== -1; let size = this.column.getAutoSize(); - if (this.column.maxWidth && (parseFloat(size) > this.column.maxWidthPx)) { - size = isPercentageWidth ? this.column.maxWidthPercent + '%' : this.column.maxWidthPx + 'px'; - } else if (parseFloat(size) < this.column.minWidthPx) { - size = isPercentageWidth ? this.column.minWidthPercent + '%' : this.column.minWidthPx + 'px'; + const maxWidth = isPercentageWidth ? this.column.maxWidthPercent : this.column.maxWidthPx; + const minWidth = isPercentageWidth ? this.column.minWidthPercent : this.column.minWidthPx; + if (this.column.maxWidth && (parseFloat(size) > maxWidth)) { + size = isPercentageWidth ? maxWidth + '%' : maxWidth + 'px'; + } else if (parseFloat(size) < minWidth) { + size = isPercentageWidth ? minWidth + '%' : minWidth + 'px'; } this.column.width = size; @@ -134,10 +136,7 @@ export class IgxColumnResizingService { } protected _handlePixelResize(diff: number, column: IgxColumnComponent) { - let currentColWidth = parseFloat(column.width); - const actualWidth = column.headerCell.elementRef.nativeElement.getBoundingClientRect().width; - currentColWidth = Number.isNaN(currentColWidth) || (currentColWidth < actualWidth) ? actualWidth : currentColWidth; - + const currentColWidth = parseFloat(column.width); const colMinWidth = column.minWidthPx; const colMaxWidth = column.maxWidthPx; if (currentColWidth + diff < colMinWidth) { From 5e2687193ab2243bc022ebbcf78fe094a26ece4e Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 29 Jun 2020 12:44:11 +0300 Subject: [PATCH 6/7] chore(*): Parse to float to retain precision. --- .../src/lib/grids/columns/column.component.ts | 4 ++-- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index e1d3add5727..501a90fd8a6 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1919,14 +1919,14 @@ export class IgxColumnComponent implements AfterContentInit { const colWidth = this.width; const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; if (isPercentageWidth) { - this._calcWidth = parseInt(colWidth, 10) / 100 * grid.calcWidth; + this._calcWidth = parseFloat(colWidth) / 100 * grid.calcWidth; } else if (!colWidth) { // no width this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth(); } else { this._calcWidth = this.width; } - this.calcPixelWidth = parseInt(this._calcWidth, 10); + this.calcPixelWidth = parseFloat(this._calcWidth); } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index fab308dec65..8761b191e61 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3552,7 +3552,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements if (this.hasColumnLayouts) { return ''; } - const colWidth = parseInt(column.calcWidth, 10); + const colWidth = parseFloat(column.calcWidth); const minWidth = this.defaultHeaderGroupMinWidth; if (colWidth < minWidth) { From 2568c068f33dda263d87c25805d12c9d9f4311a3 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 29 Jun 2020 15:02:40 +0300 Subject: [PATCH 7/7] chore(*): Fix lint. --- .../lib/grids/grid/column-resizing.spec.ts | 50 ++++++++----------- 1 file changed, 20 insertions(+), 30 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index 211c0b9ee6c..86ba5f03376 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -424,19 +424,19 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { fixture.detectChanges(); grid = fixture.componentInstance.grid; })); + it('should resize columns with % width.', fakeAsync(() => { grid.height = null; fixture.detectChanges(); const headers = GridFunctions.getColumnHeaders(fixture); - expect(grid.columns[0].width).toBe('25%'); - + const headerResArea = headers[0].parent.children[2].nativeElement; const startPos = headerResArea.getBoundingClientRect().x; UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); tick(200); fixture.detectChanges(); - + const resizer = GridFunctions.getResizer(fixture).nativeElement; expect(resizer).toBeDefined(); // resize with 100px, which is 25% @@ -445,65 +445,65 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { fixture.detectChanges(); expect(grid.columns[0].width).toBe('50%'); })); - + it('should resize columns with % width and % maxWidth.', fakeAsync(() => { grid.height = null; fixture.detectChanges(); const headers = GridFunctions.getColumnHeaders(fixture); grid.columns[0].maxWidth = '30%'; expect(grid.columns[0].width).toBe('25%'); - + const headerResArea = headers[0].parent.children[2].nativeElement; const startPos = headerResArea.getBoundingClientRect().x; UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); tick(200); fixture.detectChanges(); - + const resizer = GridFunctions.getResizer(fixture).nativeElement; expect(resizer).toBeDefined(); // resize with +100px, which is 25% UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 100, 5); UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 100, 5); fixture.detectChanges(); - + expect(grid.columns[0].width).toBe(grid.columns[0].maxWidth); })); - + it('should resize columns with % width and % minWidth.', fakeAsync(() => { grid.height = null; fixture.detectChanges(); const headers = GridFunctions.getColumnHeaders(fixture); grid.columns[0].minWidth = '10%'; expect(grid.columns[0].width).toBe('25%'); - + const headerResArea = headers[0].parent.children[2].nativeElement; const startPos = headerResArea.getBoundingClientRect().x; UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); tick(200); fixture.detectChanges(); - + const resizer = GridFunctions.getResizer(fixture).nativeElement; // resize with -100px UIInteractions.simulateMouseEvent('mousemove', resizer, startPos - 100, 5); UIInteractions.simulateMouseEvent('mouseup', resizer, startPos - 100, 5); fixture.detectChanges(); - + expect(grid.columns[0].width).toBe(grid.columns[0].minWidth); })); - + it('should resize columns with % width and pixel maxWidth.', fakeAsync(() => { grid.height = null; fixture.detectChanges(); const headers = GridFunctions.getColumnHeaders(fixture); grid.columns[0].maxWidth = '200px'; expect(grid.columns[0].width).toBe('25%'); - + const headerResArea = headers[0].parent.children[2].nativeElement; const startPos = headerResArea.getBoundingClientRect().x; UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); tick(200); fixture.detectChanges(); - + const resizer = GridFunctions.getResizer(fixture).nativeElement; expect(resizer).toBeDefined(); // resize with +200px, which is 50% @@ -512,38 +512,31 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { fixture.detectChanges(); expect(grid.columns[0].width).toBe('50%'); })); - + it('should resize columns with % width and pixel minWidth.', fakeAsync(() => { - - const fixture = TestBed.createComponent(ColPercentageGridComponent); - fixture.detectChanges(); - const grid = fixture.componentInstance.grid; grid.height = null; fixture.detectChanges(); const headers = GridFunctions.getColumnHeaders(fixture); // minWidth is 12.5% of the grid width - 400px grid.columns[0].minWidth = '50px'; expect(grid.columns[0].width).toBe('25%'); - + const headerResArea = headers[0].parent.children[2].nativeElement; const startPos = headerResArea.getBoundingClientRect().x; UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5); tick(200); fixture.detectChanges(); - + const resizer = GridFunctions.getResizer(fixture).nativeElement; // resize with -100px UIInteractions.simulateMouseEvent('mousemove', resizer, startPos - 100, 5); UIInteractions.simulateMouseEvent('mouseup', resizer, startPos - 100, 5); fixture.detectChanges(); - + expect(grid.columns[0].width).toBe('12.5%'); })); - + it('should autosize column with % width programmatically.', fakeAsync(() => { - const fixture = TestBed.createComponent(ColPercentageGridComponent); - fixture.detectChanges(); - const grid = fixture.componentInstance.grid; grid.height = null; fixture.detectChanges(); expect(grid.columns[0].width).toBe('25%'); @@ -551,11 +544,8 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => { fixture.detectChanges(); expect(grid.columns[0].width).toBe('21%'); })); - + it('should autosize column with % width on double click.', fakeAsync(() => { - const fixture = TestBed.createComponent(ColPercentageGridComponent); - fixture.detectChanges(); - const grid = fixture.componentInstance.grid; grid.height = null; fixture.detectChanges(); expect(grid.columns[0].width).toBe('25%');