chore(*): In case cell is merged cell placeholder, do not render content.

MKirova · MKirova · commit 5ab08a8872fc · 2025-07-28T11:56:34.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -57,6 +57,8 @@
         <img [src]="value" [alt]="value | igxCellImageAlt" />
     }
 </ng-template>
+
+<ng-template #emptyCell></ng-template>
 <ng-template #addRowCell let-cell="cell">
     @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {
         <div
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -144,6 +144,13 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     @Input()
     public column: ColumnType;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @Input()
+    public isPlaceholder: boolean;
+
 
     /**
      * @hidden
@@ -286,6 +293,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
      * @memberof IgxGridCellComponent
      */
     public get template(): TemplateRef<any> {
+        if (this.isPlaceholder) {
+            return this.emptyCellTemplate;
+        }
         if (this.editMode && this.formGroup) {
             const inlineEditorTemplate = this.column.inlineEditorTemplate;
             return inlineEditorTemplate ? inlineEditorTemplate : this.inlineEditorTemplate;
@@ -704,6 +714,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     @ViewChild('defaultCell', { read: TemplateRef, static: true })
     protected defaultCellTemplate: TemplateRef<any>;
 
+    @ViewChild('emptyCell', { read: TemplateRef, static: true })
+    protected emptyCellTemplate: TemplateRef<any>;
+
     @ViewChild('defaultPinnedIndicator', { read: TemplateRef, static: true })
     protected defaultPinnedIndicator: TemplateRef<any>;
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -28,11 +28,11 @@
         @if (pinnedColumns.length > 0 && grid.isPinningToStart) {
             @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
                 @if (this.hasMergedCells) {
-                    <div [style.height.px]=" this.metaData.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null"
+                    <div [style.height.px]=" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null"
                          class="igx-grid__mrl-block"
-                         [style.visibility]="this.metaData.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'"
+                         [style.visibility]="this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'"
                          [ngStyle]="{
-                        'grid-template-rows': this.metaData.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null
+                        'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null
                     }">
                     <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
                 </div>
@@ -44,11 +44,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]=" this.metaData.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null"
+                <div [style.height.px]=" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null"
                      class="igx-grid__mrl-block"
-                     [style.visibility]="this.metaData.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'"
+                     [style.visibility]="this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'"
                      [ngStyle]="{
-                    'grid-template-rows': this.metaData.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null
+                    'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null
                 }">
                 <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
             </div>
@@ -61,11 +61,11 @@
         @if (pinnedColumns.length > 0 && !grid.isPinningToStart) {
             @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
                 @if (this.hasMergedCells) {
-                    <div [style.height.px]=" this.metaData.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null"
+                    <div [style.height.px]=" this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null"
                          class="igx-grid__mrl-block"
-                         [style.visibility]="this.metaData.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'"
+                         [style.visibility]="this.metaData?.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'"
                          [ngStyle]="{
-                        'grid-template-rows': this.metaData.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null
+                        'grid-template-rows': this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null
                     }">
                     <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
                 </div>
@@ -135,6 +135,7 @@
         [class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
         [class.igx-grid__td--merged-selected]="isSelectionRoot(col)"
         [class.igx-grid__td--merged-hovered]="isHoveredRoot(col)"
+        [isPlaceholder]="!!this.metaData?.cellMergeMeta.get(col.field)?.root"
         class="igx-grid__td igx-grid__td--fw"
         [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
         [class.igx-grid__td--pinned]="col.pinned"
@@ -170,6 +171,10 @@
 <ng-template #expandableCellTemplate let-col>
     <igx-expandable-grid-cell
         [class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
+        [class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
+        [class.igx-grid__td--merged-selected]="isSelectionRoot(col)"
+        [class.igx-grid__td--merged-hovered]="isHoveredRoot(col)"
+        [isPlaceholder]="!!this.metaData?.cellMergeMeta.get(col.field)?.root"
         [class.igx-grid__td--pinned]="col.pinned"
         class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
         [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts
@@ -124,7 +124,7 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
     }
 
     public get hasMergedCells(): boolean {
-            return this.grid.isRecordMerged(this.metaData);
+            return this.grid.columnsToMerge.length > 0;
     }
 
     /**

Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,8 @@`
`57`	`57`	`<img [src]="value" [alt]="value \| igxCellImageAlt" />`
`58`	`58`	`}`
`59`	`59`	`</ng-template>`
	`60`	`+`
	`61`	`+<ng-template #emptyCell></ng-template>`
`60`	`62`	`<ng-template #addRowCell let-cell="cell">`
`61`	`63`	`@if (column.dataType !== 'boolean' \|\| (column.dataType === 'boolean' && this.formatter)) {`
`62`	`64`	`<div`
Original file line number	Diff line number	Diff line change
`@@ -124,7 +124,7 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {`
`124`	`124`	`}`
`125`	`125`
`126`	`126`	`public get hasMergedCells(): boolean {`
`127`		`- return this.grid.isRecordMerged(this.metaData);`
	`127`	`+ return this.grid.columnsToMerge.length > 0;`
`128`	`128`	`}`
`129`	`129`
`130`	`130`	`/**`