fix(igxGrid): Fix merge cell offset when using virtual scrollbar with ratio. by MayaKirova · Pull Request #16331 · IgniteUI/igniteui-angular

MayaKirova · 2025-10-20T13:12:26Z

In case scrollbar size exceeds max browser allowed and uses ratio to calc. positions, adjust offset of merged cells accordingly.

Additional information (check all that apply):

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

…rged rows.

github-actions · 2026-01-26T00:17:44Z

There has been no recent activity and this PR has been marked inactive.

github-actions · 2026-03-28T00:22:34Z

There has been no recent activity and this PR has been marked inactive.

Copilot

Pull request overview

Fixes igxGrid merged-cell overlay positioning when the virtual scrollbar is scaled using a ratio (due to exceeding the browser’s max scroll size), addressing layout breaks during navigation/search over large datasets.

Changes:

Use virtualized scroll position (_virtScrollPosition) when computing merged-cell overlay offsets.
Rework merged-top overlay row detection to use merge roots from the current start row.
Track and reuse merged-record indices via merge metadata (adds index into merge results).

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts	Changes unmerge logic to use merge-metadata index instead of `indexOf`.
projects/igniteui-angular/src/lib/grids/grid-base.directive.ts	Adjusts merged-cell offset calculation and rewrites merged overlay row detection.
projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts	Exposes `_virtScrollPosition` and fixes scrollPosition scaling when using a virtual ratio; updates scroll offset computation.
projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts	Adds `index` to default merge result objects to support faster/consistent lookups.

Comments suppressed due to low confidence (1)

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts:3726

This change switches merged-cell positioning logic to use _virtScrollPosition (virtualized scroll position) and changes how merged-top overlay rows are computed. There are existing cell merging specs, but nothing that covers the scrollbar ratio/virtual-size scenario that triggered issues #16292/#16408. Adding a unit test that forces _virtRatio !== 1 (via large total size) and verifies merged overlay row top offset stays aligned during navigation/scroll would help prevent regressions.


    protected getMergeCellOffset(rowData) {
        const index = rowData.dataIndex;
        let offset = this.verticalScrollContainer._virtScrollPosition - this.verticalScrollContainer.getScrollForIndex(index);
        if (this.hasPinnedRecords && this.isRowPinningToTop) {
            offset -= this.pinnedRowHeight;
        }
        return -offset;

Copilot · 2026-04-06T12:04:19Z

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

        let result = cloneArray(collection) as any;
        uniqueRoots.forEach(x => {
-            const index = collection.indexOf(x);
+            const index = x.index;


IgxGridUnmergeActivePipe now relies on x.index being present on merged-record metadata. IGridMergeStrategy.merge() does not document/guarantee an index property on its output objects, so a custom merge strategy that returns cellMergeMeta without index will make index undefined here and can break unmerge (e.g., activeRowIndexes.map(ri => ri - index) becomes NaN). Consider keeping backwards compatibility by falling back to collection.indexOf(x) when x.index is null/undefined, or formalize index as part of the merge-result contract and enforce/populate it for all strategies.

Suggested change

const index = x.index;

const index = x.index ?? collection.indexOf(x);

if (index < 0 || !x.cellMergeMeta) {

return;

}

Copilot · 2026-04-06T12:04:19Z

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

+                this.columnsToMerge.forEach((col) => {
+                    const root = rec.cellMergeMeta?.get(col.field)?.root;
+                    if (root) {
+                        data.push({ record: root, index: root.index, dataIndex: root.index });


updateMergedData() now sets rowData.index to root.index, but root.index is the unpinned data index. When row pinning is to top, row components expect a view index that includes the pinned area offset (see getDataViewIndex()), otherwise the overlay row for merged cells can be rendered/treated as the wrong row index. Use a view index here (e.g., this.getDataViewIndex(root.index, /*pinned*/ false) or apply + this.pinnedRecordsCount when isRowPinningToTop).

Suggested change

data.push({ record: root, index: root.index, dataIndex: root.index });

data.push({

record: root,

index: this.getDataViewIndex(root.index, false),

dataIndex: root.index

});

Copilot · 2026-04-06T12:04:19Z

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

+            const rec = this.verticalScrollContainer.igxForOf[startIndex];
+            if (rec && rec.cellMergeMeta) {
+                this.columnsToMerge.forEach((col) => {
+                    const root = rec.cellMergeMeta?.get(col.field)?.root;
+                    if (root) {
+                        data.push({ record: root, index: root.index, dataIndex: root.index });
+                    }
+                })


updateMergedData() can push the same root multiple times (once per merged column) when different merged columns share the same merge root. The templates use @for (rowData of mergedDataInView; track rowData.record;), so duplicates can lead to non-unique track keys and incorrect rendering/diffing of the merged-top overlay rows. Consider de-duplicating roots (e.g., by root reference or root.index) before assigning to _mergedDataInView.

Suggested change

const rec = this.verticalScrollContainer.igxForOf[startIndex];

if (rec && rec.cellMergeMeta) {

this.columnsToMerge.forEach((col) => {

const root = rec.cellMergeMeta?.get(col.field)?.root;

if (root) {

data.push({ record: root, index: root.index, dataIndex: root.index });

}

})

const addedRoots = new Set<any>();

const rec = this.verticalScrollContainer.igxForOf[startIndex];

if (rec && rec.cellMergeMeta) {

this.columnsToMerge.forEach((col) => {

const root = rec.cellMergeMeta?.get(col.field)?.root;

if (root && !addedRoots.has(root)) {

addedRoots.add(root);

data.push({ record: root, index: root.index, dataIndex: root.index });

}

});

Copilot · 2026-04-06T12:04:20Z

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

+    /**
+     * @hidden
+     */
    /** Internal track for scroll top that is being virtualized */
-    protected _virtScrollPosition = 0;
+    public _virtScrollPosition = 0;
    /** If the next onScroll event is triggered due to internal setting of scrollTop */


Making _virtScrollPosition public exposes an underscored internal field as part of the generated typings/API surface. To avoid effectively “publishing” an internal implementation detail, consider keeping the field non-public and exposing a @hidden/@internal getter (e.g., get virtScrollPosition()), which also allows you to keep invariants (like ensuring it stays in sync when resetScrollPosition() is called).

fix(igxGrid): Fix offset when using virtual scrollbar with ratio.

7bd92df

MayaKirova assigned dkamburov Oct 20, 2025

MayaKirova added ❌ status: awaiting-test PRs awaiting manual verification version: 20.1.x grid: cell-merging labels Oct 20, 2025

MKirova added 5 commits November 3, 2025 11:11

fix(forOf): Full recalculate scroll position after large data change.

6e8b845

chore(*): Add special handling for virtual ratio scrollbar.

babc2b6

chore(*): Improve scroll and pipe performance.

5dad728

fix(igxGrid): Ensure same classes and borders between unmerged and me…

30a7ecc

…rged rows.

chore(*): Add null checks.

a361804

github-actions bot added the status: inactive Used to stale issues and pull requests label Jan 26, 2026

dkamburov removed the status: inactive Used to stale issues and pull requests label Jan 26, 2026

github-actions bot added the status: inactive Used to stale issues and pull requests label Mar 28, 2026

dkamburov requested a review from mddragnev April 2, 2026 12:21

mddragnev previously approved these changes Apr 2, 2026

View reviewed changes

dkamburov removed the status: inactive Used to stale issues and pull requests label Apr 2, 2026

dkamburov assigned IMinchev64 Apr 3, 2026

IMinchev64 added 💥 status: in-test PRs currently being tested ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification 💥 status: in-test PRs currently being tested labels Apr 3, 2026

Merge branch '20.1.x' into mkirova/fix-16292-20.1.x

65a1b76

Copilot AI review requested due to automatic review settings April 6, 2026 11:57

MayaKirova dismissed mddragnev’s stale review via 65a1b76 April 6, 2026 11:57

Copilot started reviewing on behalf of MayaKirova April 6, 2026 11:58 View session

Copilot AI reviewed Apr 6, 2026

View reviewed changes

dkamburov requested a review from mddragnev April 6, 2026 14:27

dkamburov approved these changes Apr 6, 2026

View reviewed changes

dkamburov merged commit 325b5a3 into 20.1.x Apr 6, 2026
9 checks passed

dkamburov deleted the mkirova/fix-16292-20.1.x branch April 6, 2026 14:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(igxGrid): Fix merge cell offset when using virtual scrollbar with ratio.#16331

fix(igxGrid): Fix merge cell offset when using virtual scrollbar with ratio.#16331
dkamburov merged 7 commits into20.1.xfrom
mkirova/fix-16292-20.1.x

MayaKirova commented Oct 20, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jan 26, 2026

Uh oh!

github-actions bot commented Mar 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Copilot AI Apr 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

-            const index = x.index;
+            const index = x.index ?? collection.indexOf(x);
+            if (index < 0 || !x.cellMergeMeta) {
+                return;
+            }

Conversation

MayaKirova commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Additional information (check all that apply):

Checklist:

Uh oh!

github-actions bot commented Jan 26, 2026

Uh oh!

github-actions bot commented Mar 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

MayaKirova commented Oct 20, 2025 •

edited

Loading