chore(*): Add handling if different rows have different sizes.

Author: MKirova

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

@@ -599,8 +599,12 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
 
     protected getMergeCellSpan(col: ColumnType){
         const rowCount = this.data.cellMergeMeta.get(col.field).rowSpan;
-        const rowH = this.grid.verticalScrollContainer.getSizeAt(this.index);
-        return `repeat(${rowCount},${rowH}px)`;
+        let sizeSpans = "";
+        for (let index = this.index; index < this.index + rowCount; index++) {
+            const size = this.grid.verticalScrollContainer.getSizeAt(index);
+            sizeSpans += size + 'px ';
+        }
+        return `${sizeSpans}`;
     }
 
     protected getRowHeight() {

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

@@ -4,8 +4,11 @@ <h4 class="sample-title">Grid with cell merge</h4>
         <ng-template igxCell let-cell="cell" let-val>
         <div>
             <button igxButton>Test</button>
-            <br/>
-            <button igxButton>Test 2</button>
+            @if (cell.row.index % 2 == 0) {
+                <br/>
+                <button igxButton>Test 2</button>
+            }
+
         </div>
         </ng-template>
     </igx-column>