diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index a0ba1af08c3..f0d0e358b2e 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,53 @@ describe('IgxGrid - Column properties #grid', () => { expect(grid.columns.find(x => x.field === 'Fax').width).toBe('130px'); })); + it('should rebuild horizontal size cache for auto-sized columns 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 < 100; 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); + 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); + for (const val of visibleColumnSizes) { + expect(val).toBe(68); + } + } finally { + clearGridSubs(); + } + })); + it('should auto-size correctly when cell has custom template', fakeAsync(() => { const fix = TestBed.createComponent(ResizableColumnsComponent); const grid = fix.componentInstance.instance; 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 9201378861b..fac177ca3f6 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -7610,6 +7610,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) {