From 3b00f0c3c4508b412895f9782b74de558e01418e Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 20 Oct 2025 16:09:42 +0300 Subject: [PATCH 1/6] fix(igxGrid): Fix offset when using virtual scrollbar with ratio. --- .../src/lib/directives/for-of/for_of.directive.ts | 5 ++++- .../igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index de6c031eede..c06311ba31b 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -271,8 +271,11 @@ export class IgxForOfDirective extends IgxForOfToken | null = null; protected _trackByFn: TrackByFunction; 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 */ protected _bScrollInternal = false; // End properties related to virtual height handling diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 8c7333526cf..09eb6ff2b6f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -3718,7 +3718,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; } From 7b2bfcfd27efa833a6cede99bf594a4eecce4a1c Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 3 Nov 2025 11:11:18 +0200 Subject: [PATCH 2/6] fix(forOf): Full recalculate scroll position after large data change. --- .../src/lib/directives/for-of/for_of.directive.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index c06311ba31b..da830c90c74 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -1469,15 +1469,7 @@ export class IgxForOfDirective extends IgxForOfToken Date: Mon, 3 Nov 2025 13:54:59 +0200 Subject: [PATCH 3/6] chore(*): Add special handling for virtual ratio scrollbar. --- .../src/lib/directives/for-of/for_of.directive.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index da830c90c74..62d70acb164 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -870,7 +870,7 @@ export class IgxForOfDirective extends IgxForOfToken extends IgxForOfToken Date: Mon, 3 Nov 2025 13:59:07 +0200 Subject: [PATCH 4/6] chore(*): Improve scroll and pipe performance. --- .../src/lib/data-operations/merge-strategy.ts | 2 +- .../src/lib/grids/grid-base.directive.ts | 18 +++++++++--------- .../src/lib/grids/grid/grid.pipes.ts | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts index a7a4f8c1059..ead74931b45 100644 --- a/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts @@ -75,7 +75,7 @@ export class DefaultMergeStrategy implements IGridMergeStrategy { index++; continue; } - const recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map(), ghostRecord: rec.ghostRecord }; + const recToUpdateData = recData ?? { recordRef: grid.isGhostRecord(rec) ? rec.recordRef : rec, cellMergeMeta: new Map(), 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; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 410e6b99c04..82501f4bda8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -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 }); + } + }) + } this._mergedDataInView = data; this.notifyChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index b6c2091ff0b..52eda88c7ac 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts @@ -131,7 +131,7 @@ export class IgxGridUnmergeActivePipe implements PipeTransform { } let result = cloneArray(collection) as any; uniqueRoots.forEach(x => { - const index = result.indexOf(x); + const index = x.index; const colKeys = [...x.cellMergeMeta.keys()]; const cols = colsToMerge.filter(col => colKeys.indexOf(col.field) !== -1); let res = []; From 0afa03ba6cffe443ece95f842f7a7a6fe5411aa6 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 20 Oct 2025 17:39:22 +0300 Subject: [PATCH 5/6] fix(igxGrid): Ensure same classes and borders between unmerged and merged rows. --- .../igniteui-angular/src/lib/grids/grid/grid.component.html | 6 +++--- .../hierarchical-grid/hierarchical-grid.component.html | 6 +++--- .../src/lib/grids/tree-grid/tree-grid.component.html | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 2c588d04f72..9e96d118d99 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -54,7 +54,7 @@ [IgxScrollInertiaDirection]="this.verticalScrollContainer.dc.instance.scrollDirection"> @for (rowData of mergedDataInView; track rowData.record;) { } @@ -117,13 +117,13 @@ diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index dd46674993c..e7683ef7c9b 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -37,7 +37,7 @@ [IgxScrollInertiaDirection]="this.verticalScrollContainer.dc.instance.scrollDirection"> @for (rowData of mergedDataInView; track rowData.record;) { } @@ -91,14 +91,14 @@ diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 3f435bdb30e..bc331c85ae6 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -37,7 +37,7 @@ [IgxScrollInertiaDirection]="this.verticalScrollContainer.dc.instance.scrollDirection"> @for (rowData of mergedDataInView; track rowData.record;) { } @@ -97,13 +97,13 @@ From 441549cb5bcf0e71356659769394119d1d97c52b Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 3 Nov 2025 14:19:15 +0200 Subject: [PATCH 6/6] chore(*): Add null checks. --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 82501f4bda8..47499d958d3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -8255,7 +8255,7 @@ export abstract class IgxGridBaseDirective implements GridType, const rec = this.verticalScrollContainer.igxForOf[startIndex]; if (rec && rec.cellMergeMeta) { this.columnsToMerge.forEach((col) => { - const root = rec.cellMergeMeta.get(col.field).root; + const root = rec.cellMergeMeta?.get(col.field)?.root; if (root) { data.push({ record: root, index: root.index, dataIndex: root.index }); }