chore(*): Add integration with pinning.

Author: MKirova

projects/igniteui-angular/src/lib/data-operations/merge-strategy.ts

@@ -31,7 +31,17 @@ export class DefaultMergeStrategy implements IGridMergeStrategy {
         let prev = null;
         let index = 0;
         for (const rec of data) {
+
             const recData = result[index];
+            // if this is some special record type - add and skip merging
+            if (rec.ghostRecord) {
+                if(!recData) {
+                    result.push(rec);
+                }
+                prev = null;
+                index++;
+                continue;
+            }
             let recToUpdateData = recData ?? { recordRef: rec, cellMergeMeta: new Map<string, IMergeByResult>() };
             recToUpdateData.cellMergeMeta.set(field, { rowSpan: 1 });
             if (prev && comparer(prev.recordRef, recToUpdateData.recordRef, field)) {

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

@@ -3668,7 +3668,11 @@ export abstract class IgxGridBaseDirective implements GridType,
 
     public getMergeCellOffset(rec) {
         const index = this.verticalScrollContainer.igxForOf.indexOf(rec);
-        return -(this.verticalScrollContainer.scrollPosition - this.verticalScrollContainer.getScrollForIndex(index));
+        let offset = this.verticalScrollContainer.scrollPosition - this.verticalScrollContainer.getScrollForIndex(index);
+        if (this.hasPinnedRecords && this.isRowPinningToTop) {
+            offset -= this.pinnedRowHeight;
+        }
+        return -offset;
     }
 
     /**

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

@@ -967,7 +967,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
                 id: null
             },
             disabled: this.isGhostRecord(rowData),
-            metaData: rowData
+            metaData: this.isRecordMerged(rowData) ? rowData : null
         };
     }
 

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -611,15 +611,17 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
     protected getMergeCellSpan(col: ColumnType){
         const rowCount = this.metaData.cellMergeMeta.get(col.field).rowSpan;
         let sizeSpans = "";
-        for (let index = this.index; index < this.index + rowCount; index++) {
+        const indexInData = this.grid.verticalScrollContainer.igxForOf.indexOf(this.metaData);
+        for (let index = indexInData; index < indexInData + rowCount; index++) {
             const size = this.grid.verticalScrollContainer.getSizeAt(index);
             sizeSpans += size + 'px ';
         }
         return `${sizeSpans}`;
     }
 
     protected getRowHeight() {
-        const size = this.grid.verticalScrollContainer.getSizeAt(this.index) - 1;
+        const indexInData  = this.grid.verticalScrollContainer.igxForOf.indexOf(this.metaData);
+        const size = this.grid.verticalScrollContainer.getSizeAt(indexInData) - 1;
         return size || this.grid.rowHeight;
     }
 

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

@@ -3,7 +3,7 @@ <h4 class="sample-title">Grid with cell merge</h4>
     <igx-column field="ProductID" header="Product ID" width="200px">
         <ng-template igxCell let-cell="cell" let-val>
         <div>
-            <button igxButton>Test {{val}}</button>
+            <button igxButton>Test {{cell.row.index}}</button>
             <!-- @if (cell.row.index % 2 == 0) {
                 <br/>
                 <button igxButton>Test 2</button>
@@ -22,4 +22,7 @@ <h4 class="sample-title">Grid with cell merge</h4>
     </igx-column>
     <igx-paginator [perPage]="20">
     </igx-paginator>
+    <igx-action-strip>
+        <igx-grid-pinning-actions></igx-grid-pinning-actions>
+    </igx-action-strip>
 </igx-grid>

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

@@ -1,10 +1,12 @@
 import { Component, HostBinding, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
+    IgxActionStripComponent,
     IgxButtonDirective,
     IgxCellTemplateDirective,
     IgxColumnComponent,
     IgxGridComponent,
+    IgxGridPinningActionsComponent,
     IgxPaginatorComponent,
 } from 'igniteui-angular';
 
@@ -20,7 +22,9 @@ import { data, dataWithoutPK } from '../shared/data';
         IgxGridComponent,
         IgxCellTemplateDirective,
         IgxButtonDirective,
-        IgxPaginatorComponent
+        IgxPaginatorComponent,
+        IgxActionStripComponent,
+        IgxGridPinningActionsComponent
     ]
 })
 export class GridCellMergingComponent {