From 66f4da9f38599727943b1fadb2d13e560cddcbf4 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 9 Dec 2024 18:18:18 +0200 Subject: [PATCH 1/2] fix(igxGrid): Fix when grid and cols have % width in hidden container. --- .../src/lib/grids/columns/column.component.ts | 4 ++- .../src/lib/grids/common/grid.interface.ts | 5 +++- .../src/lib/grids/grid-base.directive.ts | 14 +++++++--- .../src/lib/grids/grid/grid.component.spec.ts | 26 +++++++++++++++++++ .../grids/pivot-grid/pivot-grid.component.ts | 2 +- 5 files changed, 45 insertions(+), 6 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 f5da1e3002c..0bf751a7d60 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -2527,7 +2527,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 5e75b8754ec..a262e72a029 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -718,7 +718,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 f8a0b4b0d13..e33fb10fc6e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3001,6 +3001,12 @@ export abstract class IgxGridBaseDirective implements GridType, * @hidden @internal */ public filteringPipeTrigger = 0; + + /** + * @hidden @internal + */ + public isColumnWidthSum = false; + /** * @hidden @internal */ @@ -3201,7 +3207,7 @@ export abstract class IgxGridBaseDirective implements GridType, private _columnSelectionMode: GridSelectionMode = GridSelectionMode.none; private lastAddedRowIndex; - protected isColumnWidthSum = false; + private _currencyPositionLeft: boolean; private rowEditPositioningStrategy = new RowEditPositionStrategy({ @@ -3234,7 +3240,7 @@ export abstract class IgxGridBaseDirective implements GridType, /** * @hidden @internal */ - protected get minColumnWidth() { + public get minColumnWidth() { return MINIMUM_COLUMN_WIDTH; } @@ -6488,8 +6494,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 ce3e8dd5977..e4148475c5a 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 @@ -1870,6 +1870,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); @@ -3100,6 +3115,17 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi } } +@Component({ + template: ` + + + `, + imports: [IgxGridComponent, IgxColumnComponent, NgFor] +}) +export class IgxGridColumnHiddenPercentageWidthComponent extends IgxGridDefaultRenderingComponent { + public hidden = true; +} + @Component({ template: `
Date: Tue, 10 Dec 2024 13:57:30 +0200 Subject: [PATCH 2/2] chore(*): Mark test component as standalone explicitly. --- .../igniteui-angular/src/lib/grids/grid/grid.component.spec.ts | 1 + 1 file changed, 1 insertion(+) 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 e4148475c5a..91f8adf107e 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 @@ -3120,6 +3120,7 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi `, + standalone: true, imports: [IgxGridComponent, IgxColumnComponent, NgFor] }) export class IgxGridColumnHiddenPercentageWidthComponent extends IgxGridDefaultRenderingComponent {