chore(*): Merged cells navigation.

Author: MKirova

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

@@ -186,6 +186,7 @@ import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { isTree, recreateTree, recreateTreeFromFields } from '../data-operations/expressions-tree-util';
 import { getUUID } from './common/random';
 import { IGridMergeStrategy } from '../data-operations/merge-strategy';
+import { IgxGridMergeNavigationService } from './grid-merge-navigation.service';
 
 interface IMatchInfoCache {
     row: any;
@@ -3984,6 +3985,23 @@ export abstract class IgxGridBaseDirective implements GridType,
         if (this.actionStrip) {
             this.actionStrip.menuOverlaySettings.outlet = this.outlet;
         }
+        this._setupNavigationService();
+    }
+
+    protected _setupNavigationService() {
+        if (this.hasCellsToMerge) {
+            this.navigation = new IgxGridMergeNavigationService(this.platform);
+            this.navigation.grid = this;
+        }
+    }
+
+    protected get hasCellsToMerge() {
+        const columnToMerge = this.visibleColumns.filter(
+            x => x.merge && (this.cellMergeMode ==='always' ||
+            (this.cellMergeMode === 'onSort' && !!this.sortingExpressions
+                .find( x=> x.fieldName === x.fieldName)))
+        );
+        return columnToMerge.length > 0;
     }
 
     /**

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

@@ -0,0 +1,108 @@
+import { Injectable } from '@angular/core';
+import { IgxGridNavigationService } from './grid-navigation.service';
+import { first } from 'rxjs/operators';
+/** @hidden */
+@Injectable()
+export class IgxGridMergeNavigationService extends IgxGridNavigationService {
+    public override shouldPerformVerticalScroll(targetRowIndex: number, visibleColIndex: number): boolean {
+        const targetRec = this.grid.verticalScrollContainer.igxForOf[targetRowIndex];
+        const field = this.grid.visibleColumns[visibleColIndex]?.field;
+        const rowSpan = targetRec?.cellMergeMeta?.get(field)?.rowSpan;
+        if (rowSpan > 1) {
+            const targetRow = super.getRowElementByIndex(targetRowIndex);
+            const containerHeight = this.grid.calcHeight ? Math.ceil(this.grid.calcHeight) : 0;
+            const scrollPos = this.getVerticalScrollPositions(targetRowIndex, rowSpan);
+            return (!targetRow || targetRow.offsetTop < Math.abs(this.containerTopOffset)
+                || containerHeight && containerHeight < scrollPos.rowBottom -  Math.ceil(this.scrollTop));
+        } else {
+            return super.shouldPerformVerticalScroll(targetRowIndex, visibleColIndex);
+        }
+    }
+
+    public override performVerticalScrollToCell(rowIndex: number, visibleColIndex: number, cb?: () => void) {
+        const targetRec = this.grid.verticalScrollContainer.igxForOf[rowIndex];
+        const field = this.grid.visibleColumns[visibleColIndex]?.field;
+        const rowSpan = targetRec?.cellMergeMeta?.get(field)?.rowSpan;
+        if (rowSpan > 1) {
+            const containerHeight = this.grid.calcHeight ? Math.ceil(this.grid.calcHeight) : 0;
+            const pos = this.getVerticalScrollPositions(rowIndex, rowSpan);
+            const row = super.getRowElementByIndex(rowIndex);
+            if ((this.scrollTop > pos.rowTop) && (!row || row.offsetTop < Math.abs(this.containerTopOffset))) {
+                if (pos.topOffset === 0) {
+                    this.grid.verticalScrollContainer.scrollTo(rowIndex);
+                } else {
+                    this.grid.verticalScrollContainer.scrollPosition = pos.rowTop;
+                }
+            } else {
+                this.grid.verticalScrollContainer.addScrollTop(Math.abs(pos.rowBottom - this.scrollTop - containerHeight));
+            }
+            this.grid.verticalScrollContainer.chunkLoad
+                .pipe(first()).subscribe(() => {
+                    if (cb) {
+                        cb();
+                    }
+            });
+        } else {
+            super.performVerticalScrollToCell(rowIndex, visibleColIndex, cb);
+        }
+    }
+
+    protected override getNextPosition(rowIndex: number, colIndex: number, key: string, shift: boolean, ctrl: boolean, event: KeyboardEvent) {
+
+        const field = this.grid.visibleColumns[colIndex]?.field;
+        switch (key) {
+            case 'tab':
+            case ' ':
+            case 'spacebar':
+            case 'space':
+            case 'escape':
+            case 'esc':
+            case 'enter':
+            case 'f2':
+            case 'left':
+            case 'arrowleft':
+            case 'arrowright':
+            case 'right':
+                // same as base for these keys
+                return super.getNextPosition(rowIndex, colIndex, key, shift, ctrl, event);
+                break;
+            case 'end':
+                rowIndex = ctrl ? this.findLastDataRowIndex() : this.activeNode.row;
+                colIndex = this.lastColumnIndex;
+                break;
+            case 'home':
+                rowIndex = ctrl ? this.findFirstDataRowIndex() : this.activeNode.row;
+                colIndex = 0;
+                break;
+            case 'arrowup':
+            case 'up':
+                const prevRec = this.grid.verticalScrollContainer.igxForOf[this.activeNode.row - 1];
+                const root = prevRec?.cellMergeMeta?.get(field)?.root;
+                const prev = this.activeNode.row - (root?.cellMergeMeta?.get(field).rowSpan || 1);
+                colIndex = this.activeNode.column !== undefined ? this.activeNode.column : 0;
+                rowIndex = ctrl ? this.findFirstDataRowIndex() : prev;
+                break;
+            case 'arrowdown':
+            case 'down':
+                const rec = this.grid.verticalScrollContainer.igxForOf[this.activeNode.row];
+                const next = this.activeNode.row + (rec?.cellMergeMeta?.get(field)?.rowSpan || 1);
+                colIndex = this.activeNode.column !== undefined ? this.activeNode.column : 0;
+                rowIndex = ctrl ? this.findLastDataRowIndex() : next;
+                break;
+            default:
+                return;
+        }
+        return { rowIndex, colIndex };
+    }
+
+    private getVerticalScrollPositions(rowIndex: number, rowSpan: number) {
+        const rowTop = this.grid.verticalScrollContainer.sizesCache[rowIndex];
+        const rowBottom = this.grid.verticalScrollContainer.sizesCache[rowIndex + rowSpan];
+        const topOffset = rowBottom - rowTop;
+        return { topOffset, rowTop, rowBottom };
+    }
+
+    private get scrollTop(): number {
+        return Math.abs(this.grid.verticalScrollContainer.getScroll().scrollTop);
+     }
+}

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

@@ -1357,11 +1357,12 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         this._gridAPI.sort_groupBy_multiple(this._groupingExpressions);
     }
 
-    private _setupNavigationService() {
+    protected override _setupNavigationService() {
         if (this.hasColumnLayouts) {
             this.navigation = new IgxGridMRLNavigationService(this.platform);
             this.navigation.grid = this;
         }
+        super._setupNavigationService();
     }
 
     private checkIfNoColumnField(expression: IGroupingExpression | Array<IGroupingExpression> | any): boolean {

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -522,6 +522,12 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
 
     public isCellActive(visibleColumnIndex) {
         const node = this.grid.navigation.activeNode;
+        const field = this.grid.visibleColumns[visibleColumnIndex].field;
+        const rowSpan = this.metaData?.cellMergeMeta?.get(field)?.rowSpan;
+        if (rowSpan > 1) {
+            return node ? (node.row >= this.index && node.row < this.index + rowSpan)
+             && node.column === visibleColumnIndex : false;
+        }
         return node ? node.row === this.index && node.column === visibleColumnIndex : false;
     }