chore(*): Add handling for variable row height.

Author: MKirova

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

@@ -32,11 +32,11 @@
         }
         <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
             @if (this.hasMergedCells) {
-                <div [style.height.px]="getRowHeight()"
+                <div [style.height.px]=" this.data.cellMergeMeta.get(col.field).rowSpan > 1 ? getRowHeight() : null"
                      class="igx-grid__mrl-block"
                      [style.visibility]="this.data.cellMergeMeta.get(col.field).root ? 'hidden' : 'visible'"
                      [ngStyle]="{
-                    'grid-template-rows':this.getMergeCellSpan(col)
+                    'grid-template-rows': this.data.cellMergeMeta.get(col.field).rowSpan > 1 ? this.getMergeCellSpan(col) : null
                 }">
                 <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : mergedCellTemplate; context: getContext(col, this)"></ng-container>
             </div>

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

@@ -599,11 +599,13 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
 
     protected getMergeCellSpan(col: ColumnType){
         const rowCount = this.data.cellMergeMeta.get(col.field).rowSpan;
-        return `repeat(${rowCount},51px)`;
+        const rowH = this.grid.verticalScrollContainer.getSizeAt(this.index);
+        return `repeat(${rowCount},${rowH}px)`;
     }
 
     protected getRowHeight() {
-        return this.grid.rowHeight;
+        const size = this.grid.verticalScrollContainer.getSizeAt(this.index) - 1;
+        return size || this.grid.rowHeight;
     }
 
     /**

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

@@ -1,6 +1,13 @@
 <h4 class="sample-title">Grid with cell merge</h4>
 <igx-grid [data]="data" width="800px" height="550px" [moving]="true" [cellMergeMode]="'always'" >
     <igx-column field="ProductID" header="Product ID" width="200px">
+        <ng-template igxCell let-cell="cell" let-val>
+        <div>
+            <button igxButton>Test</button>
+            <br/>
+            <button igxButton>Test 2</button>
+        </div>
+        </ng-template>
     </igx-column>
     <igx-column field="ReorderLevel" width="200px">
     </igx-column>

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

@@ -1,6 +1,8 @@
 import { Component, HostBinding, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
+    IgxButtonDirective,
+    IgxCellTemplateDirective,
     IgxColumnComponent,
     IgxGridComponent,
 } from 'igniteui-angular';
@@ -15,6 +17,8 @@ import { data, dataWithoutPK } from '../shared/data';
         FormsModule,
         IgxColumnComponent,
         IgxGridComponent,
+        IgxCellTemplateDirective,
+        IgxButtonDirective
     ]
 })
 export class GridCellMergingComponent {