Merge pull request #4871 from IgniteUI/fix-#4859

fix(grid-mrl): row editing is not correctly applied in MRL mode

Author: kdinev

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

@@ -128,6 +128,10 @@
         @extend %grid-row--mrl !optional;
     }
 
+    @include e(tr, $mods: (mrl, edit)) {
+        @extend %grid-row--edit-mrl !optional;
+    }
+
     @include e(summaries) {
         @extend %grid-summaries !optional;
 

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

@@ -708,7 +708,9 @@
     }
 
     %grid-row--mrl {
-        border-bottom: none !important;
+        &%grid-row {
+            border-bottom-color: transparent;
+        }
 
         %grid__cbx-selection,
         %igx-grid__row-indentation,
@@ -907,6 +909,10 @@
             background: --var($theme, 'edit-mode-color');
         }
 
+        &%grid-row {
+            border-bottom: 1px solid --var($theme, 'edit-mode-color');
+        }
+
         %igx-grid__td--editing {
             border: none;
 
@@ -920,6 +926,13 @@
         }
     }
 
+    %grid-row--edit-mrl {
+        &:first-of-type::after {
+            top: 0;
+            z-index: 5;
+        }
+    }
+
     %igx-grid__tr--edited {
         &::before {
             content: '';

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts

@@ -1091,7 +1091,7 @@ describe('IgxGrid - multi-row-layout', () => {
         expect(lastRow.element.nativeElement.getBoundingClientRect().bottom).toBe(grid.tbody.nativeElement.getBoundingClientRect().bottom);
 
         // check size is correct
-        expect(grid.verticalScrollContainer.getSizeAt(lastIndex)).toBe(150);
+        expect(grid.verticalScrollContainer.getSizeAt(lastIndex)).toBe(151);
 
         // check DOM
         const lastRowCells = lastRow.cells.toArray();

src/app/grid-multi-row-layout/grid-mrl.sample.html

@@ -1,7 +1,7 @@
 <div  class="sample-wrapper">
     <app-page-header title="Grid MRL"></app-page-header>
     <section style="height: 800px" class="sample-content">
-        <igx-grid [rowSelectable]="true" #grid [data]="data" displayDensity="compact" [width]="'100%'" [showToolbar]='true' [columnHiding]='true'>
+        <igx-grid [rowEditable]="true" [primaryKey]="'PostalCode'" [rowSelectable]="true" #grid [data]="data" displayDensity="compact" [width]="'100%'" [showToolbar]='true' [columnHiding]='true'>
             <igx-column-layout [movable]="false" [pinned]="true" field='group1'>
                 <igx-column [rowStart]="1" [colStart]="1" [colEnd]="5" field="ContactName"></igx-column>
                 <igx-column [rowStart]="1" [colStart]="5" field="ContactTitle"></igx-column>
@@ -13,8 +13,8 @@
                 <igx-column [rowStart]="3" [colStart]="2"  field="PostalCode"></igx-column>
                 <igx-column [rowStart]="3" [colStart]="3" [colEnd]="7" field="Fax"></igx-column>
             </igx-column-layout>
-            <igx-column-layout [movable]="false" [pinned]="false" field='group2'>
-                <igx-column [rowStart]="1" [colStart]="1" [movable]="false" [pinned]="false" sortable="true" field="ContactName" [width]='"500px"'></igx-column>
+            <igx-column-layout [movable]="false" [pinned]="true" field='group2'>
+                <igx-column [rowStart]="1" [colStart]="1" [movable]="false" sortable="true" field="ContactName" [width]='"500px"'></igx-column>
                 <igx-column [rowStart]="1" [colStart]="2" [movable]="false" sortable="true" field="ContactTitle" [width]='"200px"'></igx-column>
                 <igx-column [rowStart]="1" [colStart]="3" [movable]="false" sortable="true" field="Country" [width]='"150px"'></igx-column>
                 <igx-column [rowStart]="1" [colStart]="4" [movable]="false" sortable="true" field="Phone" [width]='"150px"'></igx-column>