From 8ed1cfedd1480da921750624de3a5a5c7a26e3f2 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 16 Jul 2026 14:23:19 +0300 Subject: [PATCH 1/5] test(grid): add auto-size column test on scroll into view --- .../grids/grid/src/column.spec.ts | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index 5d875b8fb09..608e85d0332 100644 --- a/projects/igniteui-angular/grids/grid/src/column.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column.spec.ts @@ -20,6 +20,7 @@ import { import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions, wait } from '../../../test-utils/ui-interactions.spec'; import { GridFunctions, GridSummaryFunctions } from '../../../test-utils/grid-functions.spec'; +import { clearGridSubs, setupGridScrollDetection } from '../../../test-utils/helper-utils.spec'; import { IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, INPUT_DEBOUNCE_TIME_DEFAULT, IgxSummaryTemplateDirective } from 'igniteui-angular/grids/core'; import { IgxGridRowComponent } from './grid-row.component'; import { GridColumnDataType, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core'; @@ -1539,6 +1540,49 @@ describe('IgxGrid - Column properties #grid', () => { expect(grid.columns.find(x => x.field === 'Fax').width).toBe('130px'); })); + it('should auto-size column when scrolled into view.', (async () => { + const fix = TestBed.createComponent(ResizableColumnsComponent); + const cols = []; + const data = []; + for (let j = 0; j < 20; j++) { + cols.push({ + field: (j + 1).toString(), + width: 'auto' + }); + } + const obj = {}; + for (let j = 0; j < cols.length; j++) { + const col = cols[j].field; + obj[col] = j; + } + + for (let i = 0; i < 100000; i++) { + const newObj = Object.create(obj); + newObj['ID'] = i; + data.push(newObj); + } + fix.componentInstance.columns = cols; + fix.componentInstance.data = data; + fix.detectChanges(); + await fix.whenStable(); + const grid = fix.componentInstance.instance; + let state = grid.headerContainer.state; + let visibleColumnSizes = (grid.headerContainer as any).individualSizeCache.slice(state.startIndex, state.startIndex + state.chunkSize); + for (const val of visibleColumnSizes) { + expect(val).toBe(68); + } + + setupGridScrollDetection(fix, grid); + grid.navigateTo(0, fix.componentInstance.columns.length -1); + + state = grid.headerContainer.state; + visibleColumnSizes = (grid.headerContainer as any).individualSizeCache.slice(state.startIndex, state.startIndex + state.chunkSize); + for (const val of visibleColumnSizes) { + expect(val).toBe(68); + } + clearGridSubs(); + })); + it('should auto-size correctly when cell has custom template', fakeAsync(() => { const fix = TestBed.createComponent(ResizableColumnsComponent); const grid = fix.componentInstance.instance; From 578f88292ed6869505b59005bd52d0be9dfa26b2 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 16 Jul 2026 14:55:04 +0300 Subject: [PATCH 2/5] fix(grid): rebuild sizesCache on column auto-size to ensure accurate layout --- .../igniteui-angular/grids/grid/src/grid-base.directive.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index ee11fce0646..b45c567dc34 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -7587,6 +7587,9 @@ export abstract class IgxGridBaseDirective implements GridType, if (colResized) { this.resetCachedWidths(); this.cdr.detectChanges(); + // Rebuild master's sizesCache once from updated calcPixelWidth values + this.headerContainer.resolveDataDiff(); + this._horizontalForOfs.forEach(vfor => vfor.resolveDataDiff()); } if (this.isColumnWidthSum) { From ef01fc830f66b0d917bb67dce0c3911cdaa98e70 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 16 Jul 2026 16:30:09 +0300 Subject: [PATCH 3/5] test(grid): update test description for auto-sized columns to clarify size cache rebuilding --- projects/igniteui-angular/grids/grid/src/column.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index 608e85d0332..3c18ff687f1 100644 --- a/projects/igniteui-angular/grids/grid/src/column.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column.spec.ts @@ -1540,7 +1540,7 @@ describe('IgxGrid - Column properties #grid', () => { expect(grid.columns.find(x => x.field === 'Fax').width).toBe('130px'); })); - it('should auto-size column when scrolled into view.', (async () => { + it('should rebuild horizontal size cache for auto-sized columns when scrolled into view.', (async () => { const fix = TestBed.createComponent(ResizableColumnsComponent); const cols = []; const data = []; From b9f5aa625dae6fcb393f8d6f58508d62e62d3b41 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 16 Jul 2026 16:34:43 +0300 Subject: [PATCH 4/5] fix(grid): reduce test data size and ensure proper cleanup in column properties test --- .../grids/grid/src/column.spec.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index 3c18ff687f1..16bc16c7bc6 100644 --- a/projects/igniteui-angular/grids/grid/src/column.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column.spec.ts @@ -1556,7 +1556,7 @@ describe('IgxGrid - Column properties #grid', () => { obj[col] = j; } - for (let i = 0; i < 100000; i++) { + for (let i = 0; i < 100; i++) { const newObj = Object.create(obj); newObj['ID'] = i; data.push(newObj); @@ -1573,14 +1573,17 @@ describe('IgxGrid - Column properties #grid', () => { } setupGridScrollDetection(fix, grid); - grid.navigateTo(0, fix.componentInstance.columns.length -1); + try { + grid.navigateTo(0, fix.componentInstance.columns.length - 1); - state = grid.headerContainer.state; - visibleColumnSizes = (grid.headerContainer as any).individualSizeCache.slice(state.startIndex, state.startIndex + state.chunkSize); - for (const val of visibleColumnSizes) { - expect(val).toBe(68); + state = grid.headerContainer.state; + visibleColumnSizes = (grid.headerContainer as any).individualSizeCache.slice(state.startIndex, state.startIndex + state.chunkSize); + for (const val of visibleColumnSizes) { + expect(val).toBe(68); + } + } finally { + clearGridSubs(); } - clearGridSubs(); })); it('should auto-size correctly when cell has custom template', fakeAsync(() => { From dea6a76fcda3653444d4719928e7132da717dbfd Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 16 Jul 2026 17:56:45 +0300 Subject: [PATCH 5/5] test(grid): add wait for grid navigation to ensure accurate state retrieval --- projects/igniteui-angular/grids/grid/src/column.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index 16bc16c7bc6..dd5a4487993 100644 --- a/projects/igniteui-angular/grids/grid/src/column.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column.spec.ts @@ -1575,6 +1575,7 @@ describe('IgxGrid - Column properties #grid', () => { setupGridScrollDetection(fix, grid); try { grid.navigateTo(0, fix.componentInstance.columns.length - 1); + await wait(); state = grid.headerContainer.state; visibleColumnSizes = (grid.headerContainer as any).individualSizeCache.slice(state.startIndex, state.startIndex + state.chunkSize);