Merge pull request #16107 from IgniteUI/mkirova/cell-merge-right-pin-fix

Fix cell merge styling issues.

Author: ChronosSF

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -272,6 +272,14 @@
             @extend %igx-grid__tr--pinned !optional;
         }
 
+        @include e(tr, $m: merged) {
+            @extend %igx-grid__tr--merged !optional;
+        }
+
+        @include e(tr, $m: merged-top) {
+            @extend %igx-grid__tr--merged-top !optional;
+        }
+
         @include e(tr, $m: pinned-top) {
             @extend %igx-grid__tr--pinned-top !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1340,6 +1340,15 @@
         }
     }
 
+    %igx-grid__tr--merged {
+        border-bottom: 0px;
+    }
+
+    %igx-grid__tr--merged-top {
+        position: absolute;
+        width: 100%;
+    }
+
     %igx-grid__td--merged {
         z-index: 1;
         grid-row: 1 / -1;

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

@@ -128,6 +128,7 @@ export class IgxGridRowClassesPipe implements PipeTransform {
             [deleted, 'igx-grid__tr--deleted'],
             [dragging, 'igx-grid__tr--drag'],
             [mrl || merged, 'igx-grid__tr--mrl'],
+            [merged, 'igx-grid__tr--merged'],
             // Tree grid only
             [filteredOut, 'igx-grid__tr--filtered']
         ];

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

@@ -50,7 +50,7 @@
 
 
         @for (rowData of mergedDataInView; track rowData.record;) {
-            <igx-grid-row [style.position]="'absolute'" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
+            <igx-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
             [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):false:rowData.record:pipeTrigger"
             [ngStyle]="rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger" #row>
             </igx-grid-row>

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

@@ -33,7 +33,7 @@
         }
 
         @for (rowData of mergedDataInView; track rowData.record;) {
-            <igx-hierarchical-grid-row [style.position]="'absolute'" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
+            <igx-hierarchical-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
             [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData.record):false:rowData.record:pipeTrigger"
             [ngStyle]="rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger" #row>
             </igx-hierarchical-grid-row>

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

@@ -32,7 +32,7 @@
         }
 
         @for (rowData of mergedDataInView; track rowData.record;) {
-            <igx-tree-grid-row [style.position]="'absolute'" [gridID]="id" [index]="rowData.index" [treeRow]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
+            <igx-tree-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [treeRow]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
             [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
             [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowData.index:pipeTrigger" #row>
         </igx-tree-grid-row>