Merge pull request #6869 from IgniteUI/sstoychev/mrl-next-prev-cell-90

fix(mrl): fixing validPosition for mrl and right pinning scenarios #6745 - 9.0

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -5293,10 +5293,10 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
 
     private isValidPosition(rowIndex, colIndex): boolean {
         const rows = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).length;
-        const cols = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0).length;
+        const cols = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0 && !col.hidden).length;
         if (rows < 1 || cols < 1) { return false; }
         if (rowIndex > -1 && rowIndex < this.dataView.length &&
-            colIndex > - 1 && colIndex <= this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex) {
+            colIndex > - 1 && colIndex < cols) {
             return true;
         }
         return false;

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

@@ -11,6 +11,7 @@ import { wait } from '../../test-utils/ui-interactions.spec';
 import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { verifyLayoutHeadersAreAligned, verifyDOMMatchesLayoutSettings } from '../../test-utils/helper-utils.spec';
+import { ICellPosition } from '../common/events';
 
 
 const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid__th-title';
@@ -1174,6 +1175,33 @@ describe('IgxGrid - multi-row-layout #grid', () => {
         expect(col.hidden).toBe(false);
         expect(col.parent.hidden).toBe(false);
     });
+
+    it('should get the correct next and previous cell when in MRL scenario', () => {
+        const fixture = TestBed.createComponent(ColumnLayoutTestComponent);
+        fixture.componentInstance.colGroups = [{
+            group: 'group1',
+            columns: [
+                { field: 'CompanyName', rowStart: 1, rowEnd: 2, colStart: 3, colEnd: 4, dataType: 'number', editable: true },
+                { field: 'ID', rowStart: 1, rowEnd: 2, colStart: 1, colEnd: 2, dataType: 'number', editable: false },
+                { field: 'ContactName', rowStart: 1, rowEnd: 2, colStart: 2, colEnd: 3, dataType: 'string', editable: false },
+            ]
+        }];
+        const grid = fixture.componentInstance.grid;
+        fixture.detectChanges();
+        let pos: ICellPosition;
+        pos = grid.getNextCell(0, 1, col => col.editable === true);
+        expect(pos.rowIndex).toEqual(0);
+        expect(pos.visibleColumnIndex).toEqual(2);
+        pos = grid.getNextCell(0, 2, col => col.editable === true);
+        expect(pos.rowIndex).toEqual(1);
+        expect(pos.visibleColumnIndex).toEqual(2);
+        pos = grid.getPreviousCell(1, 2);
+        expect(pos.rowIndex).toEqual(1);
+        expect(pos.visibleColumnIndex).toEqual(1);
+        pos = grid.getPreviousCell(1, 2, col => col.editable === true);
+        expect(pos.rowIndex).toEqual(0);
+        expect(pos.visibleColumnIndex).toEqual(2);
+    });
 });
 
 @Component({
@@ -1182,7 +1210,7 @@ describe('IgxGrid - multi-row-layout #grid', () => {
         <igx-column-layout *ngFor='let group of colGroups'>
             <igx-column *ngFor='let col of group.columns'
             [rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
-            [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'></igx-column>
+            [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field' [editable]='col.editable'></igx-column>
         </igx-column-layout>
     </igx-grid>
     `