From eb0ef3e79b1dd84f7124e62209b34c152393a793 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 9 Dec 2024 18:18:18 +0200 Subject: [PATCH] fix(igxGrid): Fix when grid and cols have % width in hidden container. --- .../src/lib/grids/columns/column.component.ts | 10 ++++--- .../src/lib/grids/common/grid.interface.ts | 5 +++- .../src/lib/grids/grid-base.directive.ts | 16 +++++++++--- .../src/lib/grids/grid/grid.component.spec.ts | 26 +++++++++++++++++++ .../grids/pivot-grid/pivot-grid.component.ts | 2 +- 5 files changed, 49 insertions(+), 10 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 cf9eb20e996..0f05119cecc 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1437,7 +1437,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy } const unpinnedColumns = this.grid.unpinnedColumns.filter(c => !c.columnGroup); const pinnedColumns = this.grid.pinnedColumns.filter(c => !c.columnGroup); - + let col = this; let vIndex = -1; @@ -2326,10 +2326,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy columns = columns.filter(c => c.level >= this.level && c !== this && c.parent !== this && c.topLevelParent === this.topLevelParent); } - + // If isPreceding, find a target such that when the current column is placed after it, current colummn will receive a visibleIndex === index. This takes into account visible children of the columns. // If !isPreceding, finds a column of the same level and visible index that equals the passed index agument (c.visibleIndex === index). No need to consider the children here. - + if (isPreceding) { columns = columns.filter(c => c.visibleIndex > this.visibleIndex); target = columns.find(c => c.level === this.level && c.visibleIndex + (c as any).calcChildren() - this.calcChildren() === index); @@ -2558,7 +2558,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy const colWidth = this.width; const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1; const isAutoWidth = colWidth && typeof colWidth === 'string' && colWidth === 'fit-content'; - if (isPercentageWidth) { + if (isPercentageWidth && this.grid.isColumnWidthSum) { + this._calcWidth = this.grid.minColumnWidth; + } else if (isPercentageWidth ) { this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth); } else if (!colWidth || isAutoWidth && !this.autoSize) { // no width diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index 767f042ce9f..782f5276ec1 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -719,7 +719,10 @@ export interface GridType extends IGridDataBindable { isLoading: boolean; /** @hidden @internal */ gridSize: Size; - + /** @hidden @internal */ + isColumnWidthSum: boolean; + /** @hidden @internal */ + minColumnWidth: number; /** Strategy, used for cloning the provided data. The type has one method, that takes any type of data */ dataCloneStrategy: IDataCloneStrategy; 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 b3ce4f4f7b8..585eaf12af2 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3007,6 +3007,12 @@ export abstract class IgxGridBaseDirective implements GridType, * @hidden @internal */ public filteringPipeTrigger = 0; + + /** + * @hidden @internal + */ + public isColumnWidthSum = false; + /** * @hidden @internal */ @@ -3208,7 +3214,7 @@ export abstract class IgxGridBaseDirective implements GridType, private _columnSelectionMode: GridSelectionMode = GridSelectionMode.none; private lastAddedRowIndex; - protected isColumnWidthSum = false; + private _currencyPositionLeft: boolean; private rowEditPositioningStrategy = new RowEditPositionStrategy({ @@ -3241,7 +3247,7 @@ export abstract class IgxGridBaseDirective implements GridType, /** * @hidden @internal */ - protected get minColumnWidth() { + public get minColumnWidth() { return MINIMUM_COLUMN_WIDTH; } @@ -4930,7 +4936,7 @@ export abstract class IgxGridBaseDirective implements GridType, * @param value * @param condition * @param ignoreCase - * @deprecated in version 19.0.0. + * @deprecated in version 19.0.0. */ public filterGlobal(value: any, condition, ignoreCase?) { this.filteringService.filterGlobal(value, condition, ignoreCase); @@ -6496,8 +6502,10 @@ export abstract class IgxGridBaseDirective implements GridType, if (this.width === null || !width) { - width = this.getColumnWidthSum(); this.isColumnWidthSum = true; + width = this.getColumnWidthSum(); + } else { + this.isColumnWidthSum = false; } if (this.hasVerticalScroll() && this.width !== null) { 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 9db4ce08fe8..77856d7b7e1 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 @@ -1900,6 +1900,21 @@ describe('IgxGrid Component Tests #grid', () => { expect(parseInt(grid.hostWidth, 10)).toBe(30 * 136); }); + it('should render grid and columns with correct width when all are in % and inside a hidden container.', () => { + // in this case since the grid width is 0, the grid will use the sum of the columns + // those should resolve to 136px, as per the docs + const fix = TestBed.createComponent(IgxGridColumnHiddenPercentageWidthComponent); + const grid = fix.componentInstance.grid; + grid.width = '100%'; + // 4 cols - 10% width + fix.componentInstance.initColumnsRows(5, 4); + fix.detectChanges(); + + expect(grid.calcWidth).toBe(136*4); + expect(grid.columns[0].calcWidth).toBe(136); + expect(grid.columns[1].calcWidth).toBe(136); + }); + it('should retain column with in % after hiding/showing grid with 100% width', () => { const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent); fix.componentInstance.initColumnsRows(5, 3); @@ -3123,6 +3138,17 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi } } +@Component({ + template: ` + + + `, + imports: [IgxGridComponent, IgxColumnComponent, NgFor] +}) +export class IgxGridColumnHiddenPercentageWidthComponent extends IgxGridDefaultRenderingComponent { + public hidden = true; +} + @Component({ template: `