fix(grid): Recalculate horizontal size cache when scrolling horizontally with autosized columns

[mddragnev]

Closes #17392

Description

Motivation / Context

Type of Change (check all that apply):

• Bug fix
• New functionality
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Refactoring (no functional changes)
• Documentation
• Demos
• CI/CD
• Tests
• Changelog
• Skills/Agents

Component(s) / Area(s) Affected:

How Has This Been Tested?

• Unit tests
• Manual testing
• Automated e2e tests

Test Configuration:

• Angular version:
• Browser(s):
• OS:

Screenshots / Recordings

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR includes API docs for newly added methods/properties (api docs guidelines)
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes (migrations guidelines)
• This PR includes behavioral changes and the feature specification has been updated with them
• Accessibility (ARIA, keyboard navigation, focus management) has been verified

[Copilot]

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]

The sizing now works correctly in a zone-based environment.

In zoneless mode, however, the related issue is still reproducible. In the gridFinJs sample, navigating horizontally with Ctrl + Arrow leaves a large white space at the end of the grid that does not recover. The column widths also become disproportionate to their corresponding headers.

I we apply the changes from the PR #17328 that replaces NgZone.onStable with afterNextRender the persistent white space is removed. A visible flicker still remains, which I think is not present in the zone-based environment.

A similar issue is reproducible with vertical virtualization. Navigating from the first row to the last one using Ctrl + Arrow Down leaves a gap in the vertical scroll area. I have logged it - #17432.

[mddragnev]

@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.

[Copilot]

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() on IgxGridForOfDirective rebuilds caches by iterating over all items in the collection (see directives/src/directives/for-of/for_of.directive.ts around handleCacheChanges()), and here it’s called for every rendered row virtDir (_horizontalForOfs). With many rendered rows and columns this can become unnecessarily expensive. Since horizontal sizesCache is synced from the master, consider rebuilding only the master cache and then just re-applying the current scrollLeft to 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’s calcPixelWidth change 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 of individualSizeCache, 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’s calcPixelWidth increases after it’s scrolled into view and (2) individualSizeCache[targetIndex] matches the updated calcPixelWidth after 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);
            }