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

Author: MayaKirova

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<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;

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

@@ -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 */
     protected _bScrollInternal = false;
     // End properties related to virtual height handling
@@ -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) {
@@ -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';
     }

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

@@ -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;
         }
@@ -8258,16 +8258,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();

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

@@ -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;
             const colKeys = [...x.cellMergeMeta.keys()];
             const cols = colsToMerge.filter(col => colKeys.indexOf(col.field) !== -1);
             for (const col of cols) {