fix(grid): Recalculate horizontal size cache when scrolling horizontally with autosized columns - #17425
fix(grid): Recalculate horizontal size cache when scrolling horizontally with autosized columns#17425mddragnev wants to merge 7 commits into
Conversation
mddragnev
added
❌ status: awaiting-test
There was a problem hiding this comment.
Pull request overview
This PR aims to fix an IgxGrid horizontal virtualization issue where grids with many width="auto" columns can end up with incorrect horizontal size caching, resulting in a visible gap at the end of horizontal scrolling (issue #17392).
Changes:
- Triggers a manual “re-diff” attempt for the horizontal virtualization directives after auto-sizing columns in view.
- Adds a unit test intended to validate that horizontal size caching remains correct when navigating horizontally with many auto-sized columns.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts |
Adds calls intended to rebuild horizontal virtualization caches after autoSizeColumnsInView() updates column pixel widths. |
projects/igniteui-angular/grids/grid/src/column.spec.ts |
Adds a new test covering horizontal navigation with many width: 'auto' columns and imports scroll-detection helpers. |
viktorkombov
added
💥 status: in-test
|
The sizing now works correctly in a zone-based environment. In zoneless mode, however, the related issue is still reproducible. In the 
I we apply the changes from the PR #17328 that replaces 
A similar issue is reproducible with vertical virtualization. Navigating from the first row to the last one using 
|
|
@viktorkombov I've verified that now when we have zoneless support the issue is not reproducible in either zoneless or zone apps. Also, I do not reproduce the flickering now. Could you take a look and verify the behavior. I`ll take a look at the vertical scrolling issue soon. |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
Suppressed comments (3)
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7593
resolveDataDiff()onIgxGridForOfDirectiverebuilds caches by iterating over all items in the collection (seedirectives/src/directives/for-of/for_of.directive.tsaroundhandleCacheChanges()), and here it’s called for every rendered row virtDir (_horizontalForOfs). With many rendered rows and columns this can become unnecessarily expensive. Since horizontalsizesCacheis synced from the master, consider rebuilding only the master cache and then just re-applying the currentscrollLeftto row directives so they update their offsets without diffing/rebuilding per-row caches.
// Rebuild master's sizesCache once from updated calcPixelWidth values
this.headerContainer.resolveDataDiff();
this._horizontalForOfs.forEach(vfor => vfor.resolveDataDiff());
projects/igniteui-angular/grids/grid/src/column.spec.ts:1581
- The test data uses only small numeric values per column (
obj[col] = j), so the auto-size calculation may keep all columns at the same width, making it hard for this test to reliably detect a cache-rebuild regression. Setting at least one offscreen column to a noticeably longer string value will make the column’scalcPixelWidthchange when it’s scrolled into view, strengthening the assertion.
const obj = {};
for (let j = 0; j < cols.length; j++) {
const col = cols[j].field;
obj[col] = j;
}
projects/igniteui-angular/grids/grid/src/column.spec.ts:1611
- The assertions use a hard-coded magic width (
68) and only validate the currently-visible slice ofindividualSizeCache, which can pass even if the cache isn’t rebuilt for newly auto-sized offscreen columns. A more robust check is to assert that (1) the target column’scalcPixelWidthincreases after it’s scrolled into view and (2)individualSizeCache[targetIndex]matches the updatedcalcPixelWidthafter navigation.
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);
}
…mprove scroll detection
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
Suppressed comments (1)
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:7591
- The comment mentions rebuilding the “master's sizesCache once”, but this block also triggers cache rebuilds for the header container and all synced horizontal igxGridFor instances. Updating the wording avoids misleading future maintainers about what actually happens here.
// Rebuild master's sizesCache once from updated calcPixelWidth values
Closes #17392
Description
Motivation / Context
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
How Has This Been Tested?
Test Configuration:
Screenshots / Recordings
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)