Merge remote-tracking branch 'origin/master' into mdragnev/add-row-transactions

Author: ChronosSF

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

@@ -2766,7 +2766,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         });
 
         this.hideOverlays();
-        const args: IGridScrollEventArgs = { direction: 'horizontal', event: event, scrollPosition: this.headerContainer.scrollPosition  };
+        const args: IGridScrollEventArgs = { direction: 'horizontal', event: event, scrollPosition: this.headerContainer.scrollPosition };
         this.onScroll.emit(args);
     }
 
@@ -2956,7 +2956,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         const destructor = takeUntil<any>(this.destroy$);
         fromEvent(this.nativeElement, 'focusout').pipe(filter(() => !!this.navigation.activeNode), destructor).subscribe((event) => {
             if (!this.crudService.cell && !!this.navigation.activeNode && (event.target === this.tbody.nativeElement &&
-                this.navigation.activeNode.row >= 0 &&  this.navigation.activeNode.row < this.dataView.length)
+                this.navigation.activeNode.row >= 0 && this.navigation.activeNode.row < this.dataView.length)
                 || (event.target === this.theadRow.nativeElement && this.navigation.activeNode.row === -1)
                 || (event.target === this.tfoot.nativeElement && this.navigation.activeNode.row === this.dataView.length)) {
                 this.navigation.activeNode = {} as IActiveNode;
@@ -3111,7 +3111,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public generateRowID(): string | number {
         const primaryColumn = this.columnList.find(col => col.field === this.primaryKey);
-        const idType = primaryColumn ? primaryColumn.dataType : this.data.length ? typeof(this.data[0][this.primaryKey]) : 'string';
+        const idType = primaryColumn ? primaryColumn.dataType : this.data.length ? typeof (this.data[0][this.primaryKey]) : 'string';
         return idType === 'string' ? uuidv4() : FAKE_ROW_ID--;
     }
 
@@ -3699,7 +3699,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     public getColumnByVisibleIndex(index: number): IgxColumnComponent {
-        return this.visibleColumns.find((col) => !col.columnGroup && !col.columnLayout && col.visibleIndex === index);
+        return this.visibleColumns.find((col) =>
+            !col.columnGroup && !col.columnLayout &&
+            col.visibleIndex === index
+        );
     }
 
     /**
@@ -3991,7 +3994,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         }
 
         if (!target.pinned && !column.pinned) {
-           this._reorderColumns(column, target, pos, this._unpinnedColumns);
+            this._reorderColumns(column, target, pos, this._unpinnedColumns);
         }
 
         this._moveColumns(column, target, pos);
@@ -4826,8 +4829,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     protected getTheadRowHeight(): number {
         const height = this.getComputedHeight(this.theadRow.nativeElement);
         return (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
-        height - this.getFilterCellHeight() :
-        height;
+            height - this.getFilterCellHeight() :
+            height;
     }
 
     /**
@@ -4838,7 +4841,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.showToolbar && this.toolbarHtml != null) {
             const height = this.getComputedHeight(this.toolbarHtml.nativeElement);
             toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ?
-            height : 0;
+                height : 0;
         }
         return toolbarHeight;
     }
@@ -4851,7 +4854,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.footer) {
             const height = this.getComputedHeight(this.footer.nativeElement);
             pagingHeight = this.footer.nativeElement.firstElementChild ?
-            height : 0;
+                height : 0;
         }
         return pagingHeight;
     }
@@ -6011,7 +6014,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             }
 
             if (this.dataView[rowIndex].detailsData) {
-                this.navigation.setActiveNode({row: rowIndex});
+                this.navigation.setActiveNode({ row: rowIndex });
                 this.cdr.detectChanges();
             }
 
@@ -6557,11 +6560,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         }
         if (commit) {
             this.onRowAdded.subscribe(rowData => {
-            // A check whether the row is in the current view
-            const index = this.dataView.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
-            const shouldScroll = this.navigation.shouldPerformVerticalScroll(index, 0);
-            const showIndex = shouldScroll ? index : -1;
-            this.showSnackbarFor(showIndex);
+                // A check whether the row is in the current view
+                const index = this.dataView.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
+                const shouldScroll = this.navigation.shouldPerformVerticalScroll(index, 0);
+                const showIndex = shouldScroll ? index : -1;
+                this.showSnackbarFor(showIndex);
             });
             this.gridAPI.submit_add_value();
             this.gridAPI.addRowToData(row.data);

projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts

@@ -76,7 +76,9 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
 
     public shouldPerformVerticalScroll(targetRowIndex: number, visibleColIndex: number): boolean {
         if (!super.shouldPerformVerticalScroll(targetRowIndex, visibleColIndex)) { return false; }
-        if (!this.isDataRow(targetRowIndex)) { return super.shouldPerformVerticalScroll(targetRowIndex, visibleColIndex); }
+        if (!this.isDataRow(targetRowIndex) || visibleColIndex < 0) {
+            return super.shouldPerformVerticalScroll(targetRowIndex, visibleColIndex);
+        }
 
         const targetRow = super.getRowElementByIndex(targetRowIndex);
         const containerHeight = this.grid.calcHeight ? Math.ceil(this.grid.calcHeight) : 0;
@@ -144,7 +146,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
 
     public performVerticalScrollToCell(rowIndex: number, visibleColIndex: number, cb?: () => void) {
         const children = this.parentByChildIndex(visibleColIndex || 0)?.children;
-        if (!super.isDataRow(rowIndex) || (children && children.length < 2)) {
+        if (!super.isDataRow(rowIndex) || (children && children.length < 2) || visibleColIndex < 0) {
             return super.performVerticalScrollToCell(rowIndex, visibleColIndex, cb);
         }
 

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

@@ -17,6 +17,7 @@ const GRID_COL_THEAD_CLASS = '.igx-grid__th';
 const GRID_MRL_BLOCK = '.igx-grid__mrl-block';
 
 describe('IgxGrid - multi-row-layout #grid', () => {
+    const DEBOUNCETIME = 60;
     configureTestSuite();
     beforeAll(async(() => {
         TestBed.configureTestingModule({
@@ -1144,6 +1145,25 @@ describe('IgxGrid - multi-row-layout #grid', () => {
         expect(pos.rowIndex).toEqual(0);
         expect(pos.visibleColumnIndex).toEqual(2);
     }));
+
+    it('should navigate to the proper row in MRL scenario', (async () => {
+        const fix = TestBed.createComponent(ColumnLayoutTestComponent);
+        const grid = fix.componentInstance.grid;
+        const NAVIGATE = 20;
+
+        fix.detectChanges();
+        await wait(DEBOUNCETIME);
+
+        grid.navigateTo(NAVIGATE);
+
+        await wait(DEBOUNCETIME);
+        fix.detectChanges();
+
+        expect(grid.verticalScrollContainer.getScroll().scrollTop).toBeGreaterThan(0);
+
+        const row = grid.getRowByIndex(NAVIGATE);
+        expect(GridFunctions.elementInGridView(grid, row.nativeElement)).toBeTruthy();
+    }));
 });
 
 @Component({