feat(igxHierarchicalGrid): Add api to navigate to a specific child grid. (#15201)

Author: MayaKirova

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -550,6 +550,7 @@ export var registerConfig = [
       { name: "foreignKey" },
       { name: "selectedCells" },
       { name: "gridAPI", writable: true },
+      { name: "navigation", writable: true },
       { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
@@ -561,7 +562,6 @@ export var registerConfig = [
       { name: "filteredSortedData" },
       { name: "validation" },
       { name: "cdr" },
-      { name: "navigation", writable: true },
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
@@ -733,6 +733,7 @@ export var registerConfig = [
     ],
     additionalProperties: [
       { name: "dimensionsSortingExpressions" },
+      { name: "navigation", writable: true },
       { name: "allDimensions" },
       { name: "rowList" },
       { name: "dataRowList" },
@@ -742,7 +743,6 @@ export var registerConfig = [
       { name: "validation" },
       { name: "gridAPI" },
       { name: "cdr" },
-      { name: "navigation", writable: true },
       { name: "virtualizationState" },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
@@ -861,13 +861,13 @@ export var registerConfig = [
     additionalProperties: [
       { name: "rowIslandAPI", writable: true },
       { name: "gridAPI", writable: true },
+      { name: "navigation", writable: true },
       { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
       { name: "transactions" },
       { name: "validation" },
       { name: "cdr" },
-      { name: "navigation", writable: true },
       { name: "nativeElement" },
       { name: "defaultRowHeight" },
       { name: "defaultHeaderGroupMinWidth" },

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

@@ -217,6 +217,9 @@ export class IgxGridNavigationService {
 
     public performVerticalScrollToCell(rowIndex: number, visibleColIndex = -1, cb?: () => void) {
         if (!this.shouldPerformVerticalScroll(rowIndex, visibleColIndex)) {
+            if (cb) {
+                cb();
+            }
             return;
         }
         this.pendingNavigation = true;

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

@@ -200,6 +200,8 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
         );
     }
 
+    public override navigation: IgxHierarchicalGridNavigationService;
+
     /**
      * @hidden
      */

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

@@ -179,6 +179,55 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         }
     }
 
+    /**
+     * Navigates to the specific child grid based on the array of paths leading to it
+     *
+     * @param pathToChildGrid Array of IPathSegments that describe the path to the child grid
+     * each segment is described by the rowKey of the parent row and the rowIslandKey.
+     */
+    public navigateToChildGrid(pathToChildGrid: IPathSegment[], cb?: () => void) {
+        if (pathToChildGrid.length == 0) {
+            if (cb) {
+                cb();
+            }
+            return;
+        }
+        const pathElem = pathToChildGrid.shift();
+        const rowKey = pathElem.rowKey;
+        const rowIndex = this.grid.gridAPI.get_row_index_in_data(rowKey);
+        if (rowIndex === -1) {
+            if (cb) {
+                cb();
+            }
+            return;
+        }
+        // scroll to row, since it can be out of view
+        this.performVerticalScrollToCell(rowIndex, -1, () => {
+            this.grid.cdr.detectChanges();
+            // next, expand row, if it is collapsed
+            const row = this.grid.getRowByIndex(rowIndex);
+            if (!row.expanded) {
+                row.expanded = true;
+                // update sizes after expand
+                this.grid.verticalScrollContainer.recalcUpdateSizes();
+                this.grid.cdr.detectChanges();
+            }
+
+            const childGrid =  this.grid.gridAPI.getChildGrid([pathElem]);
+            if (!childGrid) {
+                if (cb) {
+                    cb();
+                }
+                return;
+            }
+            const positionInfo = this.getElementPosition(childGrid.nativeElement, false);
+            this.grid.verticalScrollContainer.addScrollTop(positionInfo.offset);
+            this.grid.verticalScrollContainer.chunkLoad.pipe(first()).subscribe(() => {
+                childGrid.navigation.navigateToChildGrid(pathToChildGrid, cb);
+            });
+        });
+    }
+
     /**
      * Moves navigation to child grid.
      *
@@ -270,17 +319,28 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
             const childGrid =  this.grid.gridAPI.getChildGrid([pathSegment]);
             rowElem = childGrid.tfoot.nativeElement;
         }
+
+        return this.getElementPosition(rowElem, isNext);
+    }
+
+    protected getElementPosition(element: HTMLElement, isNext: boolean) {
+        // Special handling for scenarios where there is css transformations applied that affects scale.
+        // getBoundingClientRect().height returns size after transformations
+        // element.offsetHeight returns size without any transformations
+        // get the ratio to figure out if anything has applied transformations
+        const scaling = element.getBoundingClientRect().height / element.offsetHeight;
+
         const gridBottom = this._getMinBottom(this.grid);
         const diffBottom =
-        rowElem.getBoundingClientRect().bottom - gridBottom;
+        element.getBoundingClientRect().bottom - gridBottom;
         const gridTop = this._getMaxTop(this.grid);
-        const diffTop = rowElem.getBoundingClientRect().bottom -
-        rowElem.offsetHeight - gridTop;
+        const diffTop = element.getBoundingClientRect().bottom -
+        element.getBoundingClientRect().height - gridTop;
         // Adding Math.Round because Chrome has some inconsistencies when the page is zoomed
         const isInView = isNext ? Math.round(diffBottom) <= 0 : Math.round(diffTop) >= 0;
         const calcOffset =  isNext ? diffBottom : diffTop;
 
-        return { inView: isInView, offset: calcOffset };
+        return { inView: isInView, offset: calcOffset / scaling};
     }
 
     /**

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts

@@ -10,7 +10,8 @@ import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
 import { clearGridSubs, setupHierarchicalGridScrollDetection } from '../../test-utils/helper-utils.spec';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { IgxGridCellComponent } from '../cell.component';
-import { IGridCellEventArgs, IgxColumnComponent } from '../public_api';
+import { IGridCellEventArgs, IgxColumnComponent, IPathSegment } from '../public_api';
+import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-navigation.service';
 
 const DEBOUNCE_TIME = 50;
 const GRID_CONTENT_CLASS = '.igx-grid__tbody-content';
@@ -950,6 +951,73 @@ describe('IgxHierarchicalGrid Navigation', () => {
             expect(secondChildCell.active).toBe(true);
         });
     });
+
+    describe('IgxHierarchicalGrid Navigation API #hGrid', () => {
+        beforeEach(waitForAsync(() => {
+            fixture = TestBed.createComponent(IgxHierarchicalGridMultiLayoutComponent);
+            fixture.detectChanges();
+            hierarchicalGrid = fixture.componentInstance.hgrid;
+            setupHierarchicalGridScrollDetection(fixture, hierarchicalGrid);
+            baseHGridContent = GridFunctions.getGridContent(fixture);
+            GridFunctions.focusFirstCell(fixture, hierarchicalGrid);
+        }));
+
+        afterEach(() => {
+            clearGridSubs();
+        });
+
+        it('should navigate to exact child grid with navigateToChildGrid.', (done) => {
+            hierarchicalGrid.primaryKey = 'ID';
+            hierarchicalGrid.expandChildren = false;
+            fixture.detectChanges();
+            const path: IPathSegment = {
+                rowKey: 10,
+                rowIslandKey: 'childData2',
+                rowID: 10
+            };
+            hierarchicalGrid.navigation.navigateToChildGrid([path], () => {
+                fixture.detectChanges();
+                const childGrid =  hierarchicalGrid.gridAPI.getChildGrid([path]).nativeElement;
+                expect(childGrid).not.toBe(undefined);
+
+                const parentBottom = hierarchicalGrid.tbody.nativeElement.getBoundingClientRect().bottom;
+                const parentTop = hierarchicalGrid.tbody.nativeElement.getBoundingClientRect().top;
+                // check it's in view within its parent
+                expect(childGrid.getBoundingClientRect().bottom <= parentBottom && childGrid.getBoundingClientRect().top >= parentTop);
+                done();
+            });
+        });
+        it('should navigate to exact nested child grid with navigateToChildGrid.', (done) => {
+            hierarchicalGrid.expandChildren = false;
+            hierarchicalGrid.primaryKey = 'ID';
+            hierarchicalGrid.childLayoutList.toArray()[0].primaryKey = 'ID';
+            fixture.detectChanges();
+            const targetRoot: IPathSegment = {
+                rowKey: 10,
+                rowIslandKey: 'childData',
+                rowID: 10
+            };
+            const targetNested: IPathSegment = {
+                rowKey: 5,
+                rowIslandKey: 'childData2',
+                rowID: 5
+            };
+
+            hierarchicalGrid.navigation.navigateToChildGrid([targetRoot, targetNested], () => {
+                fixture.detectChanges();
+                const childGrid =  hierarchicalGrid.gridAPI.getChildGrid([targetRoot]).nativeElement;
+                expect(childGrid).not.toBe(undefined);
+                const childGridNested =  hierarchicalGrid.gridAPI.getChildGrid([targetRoot, targetNested]).nativeElement;
+                expect(childGridNested).not.toBe(undefined);
+
+                const parentBottom = childGrid.getBoundingClientRect().bottom;
+                const parentTop = childGrid.getBoundingClientRect().top;
+                // check it's in view within its parent
+                expect(childGridNested.getBoundingClientRect().bottom <= parentBottom && childGridNested.getBoundingClientRect().top >= parentTop);
+                done();
+            });
+        });
+    });
 });
 
 

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

@@ -1056,6 +1056,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             _diTransactions);
     }
 
+    public override navigation: IgxPivotGridNavigationService;
+
     /**
      * @hidden
      */