Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dkamburov merged 7 commits into from
Apr 6, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7bd92df
fix(igxGrid): Fix offset when using virtual scrollbar with ratio.
Oct 20, 2025
6e8b845
fix(forOf): Full recalculate scroll position after large data change.
Nov 3, 2025
babc2b6
chore(*): Add special handling for virtual ratio scrollbar.
Nov 3, 2025
5dad728
chore(*): Improve scroll and pipe performance.
Nov 3, 2025
30a7ecc
fix(igxGrid): Ensure same classes and borders between unmerged and me…
Oct 20, 2025
a361804
chore(*): Add null checks.
Nov 3, 2025
65a1b76
Merge branch '20.1.x' into mkirova/fix-16292-20.1.x
MayaKirova Apr 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export class DefaultMergeStrategy implements IGridMergeStrategy {
index++;
continue;
}
const recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map<string, IMergeByResult>(), ghostRecord: rec.ghostRecord };
const recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map<string, IMergeByResult>(), ghostRecord: rec.ghostRecord, index: index };
recToUpdateData.cellMergeMeta.set(field, { rowSpan: 1, childRecords: [] });
if (prev && comparer.call(this, prev.recordRef, recToUpdateData.recordRef, field, isDate, isTime) && prev.ghostRecord === recToUpdateData.ghostRecord) {
const root = prev.cellMergeMeta.get(field)?.root ?? prev;
Expand Down
16 changes: 10 additions & 6 deletions projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,8 +271,11 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
protected _differ: IterableDiffer<T> | null = null;
protected _trackByFn: TrackByFunction<T>;
protected individualSizeCache: number[] = [];
/**
* @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 */
Comment on lines +274 to 279
Copy link

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copilot uses AI. Check for mistakes.
protected _bScrollInternal = false;
// End properties related to virtual height handling
Expand Down Expand Up @@ -867,7 +870,7 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
const maxVirtScrollTop = this._virtSize - containerSize;
this._bScrollInternal = true;
this._virtScrollPosition = maxVirtScrollTop;
this.scrollPosition = maxVirtScrollTop;
this.scrollPosition = maxVirtScrollTop / this._virtRatio;
return;
}
if (this._adjustToIndex) {
Expand Down Expand Up @@ -1470,11 +1473,12 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
let currentScroll = this.scrollPosition;
if (this._virtRatio !== 1) {
this._calcVirtualScrollPosition(this.scrollPosition);
currentScroll = this._virtScrollPosition;
scrollOffset = this.fixedUpdateAllElements(this._virtScrollPosition);
} else {
const scroll = this.scrollComponent.nativeElement;
scrollOffset = scroll && this.scrollComponent.size ?
currentScroll - this.sizesCache[this.state.startIndex] : 0;
}
const scroll = this.scrollComponent.nativeElement;
scrollOffset = scroll && this.scrollComponent.size ?
currentScroll - this.sizesCache[this.state.startIndex] : 0;
const dir = this.igxForScrollOrientation === 'horizontal' ? 'left' : 'top';
this.dc.instance._viewContainer.element.nativeElement.style[dir] = -(scrollOffset) + 'px';
}
Expand Down
20 changes: 10 additions & 10 deletions projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3719,7 +3719,7 @@ export abstract class IgxGridBaseDirective implements GridType,

protected getMergeCellOffset(rowData) {
const index = rowData.dataIndex;
let offset = this.verticalScrollContainer.scrollPosition - this.verticalScrollContainer.getScrollForIndex(index);
let offset = this.verticalScrollContainer._virtScrollPosition - this.verticalScrollContainer.getScrollForIndex(index);
if (this.hasPinnedRecords && this.isRowPinningToTop) {
offset -= this.pinnedRowHeight;
}
Expand Down Expand Up @@ -8251,16 +8251,16 @@ export abstract class IgxGridBaseDirective implements GridType,
// recalc merged data
if (this.columnsToMerge.length > 0) {
const startIndex = this.verticalScrollContainer.state.startIndex;
const prevDataView = this.verticalScrollContainer.igxForOf?.slice(0, startIndex);
const data = [];
for (let index = 0; index < startIndex; index++) {
const rec = prevDataView[index];
if (rec.cellMergeMeta &&
// index + maxRowSpan is within view
startIndex < (index + Math.max(...rec.cellMergeMeta.values().toArray().map(x => x.rowSpan)))) {
const visibleIndex = this.isRowPinningToTop ? index + this.pinnedRecordsCount : index;
data.push({ record: rec, index: visibleIndex, dataIndex: index });
}
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 });
Copy link

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
}
})
Comment on lines +8255 to +8262
Copy link

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.

}
this._mergedDataInView = data;
this.notifyChanges();
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export class IgxGridUnmergeActivePipe implements PipeTransform {

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

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
const colKeys = [...x.cellMergeMeta.keys()];
const cols = colsToMerge.filter(col => colKeys.indexOf(col.field) !== -1);
for (const col of cols) {
Expand Down
Loading