chore(*): Implement with rows that are retained outside the virt.frame.

Author: MKirova

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

@@ -3652,6 +3652,11 @@ export abstract class IgxGridBaseDirective implements GridType,
         return rec.cellMergeMeta;
     }
 
+    public getMergeCellOffset(rec) {
+        const index = this.verticalScrollContainer.igxForOf.indexOf(rec);
+        return -(this.verticalScrollContainer.scrollPosition - this.verticalScrollContainer.getScrollForIndex(index));
+    }
+
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -199,7 +199,6 @@
     [style.max-width]="col.resolvedWidth"
     [style.flex-basis]="col.resolvedWidth"
     [width]="col.getCellWidth()"
-    [style.background]="'white'"
     #cell>
 </igx-grid-cell>
 </ng-template>

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -47,6 +47,14 @@
         }
         <ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
         </ng-container>
+
+
+        @for (rowData of mergedData; track rowData; let rowIndex = $index) {
+            <igx-grid-row [style.background]="'red'" [style.position]="'absolute'" [gridID]="id" [index]="rowIndex" [data]="rowData" [style.top.px]="getMergeCellOffset(rowData)"
+            [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
+            [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
+            </igx-grid-row>
+        }
         <ng-template #pinnedRecordsTemplate>
             @if (data
                 | gridTransaction:id:pipeTrigger

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

@@ -389,6 +389,17 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     private _groupByRowSelectorTemplate: TemplateRef<IgxGroupByRowSelectorTemplateContext>;
     private _detailTemplate;
 
+    public get mergedData() {
+        const startIndex = this.verticalScrollContainer.state.startIndex;
+        const chunkSize = this.verticalScrollContainer.state.chunkSize;
+        const mergeRecs = this.verticalScrollContainer.igxForOf?.filter((x, index) => {
+            if (!x.cellMergeMeta) { return false;}
+            const maxSpan = Math.max(...x.cellMergeMeta.values().toArray().map(x => x.rowSpan));
+           return startIndex > index && startIndex <= (index + maxSpan) && startIndex + chunkSize >= (index + maxSpan);
+    });
+        return mergeRecs;
+    }
+
 
     /**
      * Gets/Sets the array of data that populates the component.

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

@@ -99,15 +99,15 @@ export class IgxGridCellMergePipe implements PipeTransform {
                     //TODO condition can be a strategy or some callback that the user can set.
                     //TODO can also be limited to only sorted columns
                     if ( prev && prev.recordRef[col.field] === rec[col.field]) {
-                        // const root = prev.cellMergeMeta.get(col.field)?.root ?? prev;
-                        // root.cellMergeMeta.get(col.field).rowSpan += 1;
-                        // recData.cellMergeMeta.get(col.field).root = root;
-                        recData.cellMergeMeta.get(col.field).prev = prev;
-                        let curr = prev;
-                        while(curr) {
-                            curr.cellMergeMeta.get(col.field).rowSpan += 1;
-                            curr =  curr.cellMergeMeta.get(col.field).prev;
-                        }
+                        const root = prev.cellMergeMeta.get(col.field)?.root ?? prev;
+                        root.cellMergeMeta.get(col.field).rowSpan += 1;
+                        recData.cellMergeMeta.get(col.field).root = root;
+                        // recData.cellMergeMeta.get(col.field).prev = prev;
+                        // let curr = prev;
+                        // while(curr) {
+                        //     curr.cellMergeMeta.get(col.field).rowSpan += 1;
+                        //     curr =  curr.cellMergeMeta.get(col.field).prev;
+                        // }
                     }
             }
             prev = recData;

src/app/grid-cellMerging/grid-cellMerging.component.html

@@ -1,5 +1,5 @@
 <h4 class="sample-title">Grid with cell merge</h4>
-<igx-grid [data]="data" width="800px" height="550px" [moving]="true" [cellMergeMode]="'always'">
+<igx-grid [data]="data" width="800px" height="550px" [moving]="true" [cellMergeMode]="'always'" >
     <igx-column field="ProductID" header="Product ID" width="200px">
     </igx-column>
     <igx-column field="ReorderLevel" width="200px">
@@ -10,6 +10,4 @@ <h4 class="sample-title">Grid with cell merge</h4>
     </igx-column>
     <igx-column field="OrderDate" width="200px">
     </igx-column>
-    <igx-column field="Discontinued" header="Discontinued">
-    </igx-column>
 </igx-grid>