Merge pull request #5410 from IgniteUI/mkirova/fix-4416-master

fix(igxHierarchicalGrid): Fixing navigation when parent has summary b…

Author: Lipata

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

@@ -292,35 +292,41 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
                 } else {
                     this.focusNextChildDOMElem(currentRowEl, this.grid);
                 }
+            } else if (this.grid.parent && this.grid.parent.summariesRowList.length > 0) {
+               this._navigateToNextParentRow(currentRowEl);
             } else {
                 this.navigateDown(currentRowEl, { row: rowIndex, column: 0 });
             }
         } else if (isLastSummaryRow && isLastColumn && this.grid.parent) {
-            // navigating in child summary, next is parent summary or next parent row
-            const parent = this.grid.parent;
-            const parentHasSummary = parent.summariesRowList.toArray().length > 0;
-            const parentRowIndex = parseInt(
-                this.getClosestElemByTag(currentRowEl, 'igx-child-grid-row').parentNode.getAttribute('data-rowindex'), 10);
-            const isLastRowInParent = parent.verticalScrollContainer.igxForOf.length - 1 === parentRowIndex;
-            // check if next is sibling
-            const childRowContainer = this.getChildGridRowContainer(this.grid);
-            const nextIsSiblingChild = !!childRowContainer.nextElementSibling;
-            if (isLastRowInParent && parentHasSummary && !nextIsSiblingChild) {
-                // next is parent summary
-                const parentSummary = parent.summariesRowList.toArray()[0].nativeElement;
-                parent.navigation.focusNextRow(parentSummary, 0, this.grid.rootGrid, true);
-            } else {
-                // next is sibling or parent
-                this.focusNext(0);
-            }
-        } else if (isLastDataRow && hasSummaries && isLastColumn && this.grid.parent) {
+            this._navigateToNextParentRow(currentRowEl);
+        } else  if (isLastDataRow && hasSummaries && isLastColumn && this.grid.parent) {
             // navigating in child rows, next is child grid's summary row
-            this.focusNextRow(summaryRows[0].nativeElement, 0, this.grid.parent, true);
+           this.focusNextRow(summaryRows[0].nativeElement, 0, this.grid.parent, true);
         } else {
             super.performTab(currentRowEl, selectedNode);
         }
     }
 
+    private _navigateToNextParentRow(currentRowEl: any): void {
+         // next is parent summary or next parent row
+         const parent = this.grid.parent;
+         const parentHasSummary = parent.summariesRowList.length > 0;
+         const parentRowIndex = parseInt(
+            this.getClosestElemByTag(currentRowEl, 'igx-child-grid-row').parentNode.getAttribute('data-rowindex'), 10);
+         const isLastRowInParent = parent.verticalScrollContainer.igxForOf.length - 1 === parentRowIndex;
+         // check if next is sibling
+         const childRowContainer = this.getChildGridRowContainer(this.grid);
+         const nextIsSiblingChild = !!childRowContainer.nextElementSibling;
+         if (isLastRowInParent && parentHasSummary && !nextIsSiblingChild) {
+             // next is parent summary
+             const parentSummary = parent.summariesRowList.first.nativeElement;
+             parent.navigation.focusNextRow(parentSummary, 0, parent, true);
+         } else {
+             // next is sibling or parent
+             this.focusNext(0);
+         }
+    }
+
     private focusNextChildDOMElem(currentRowEl, grid) {
         const gridElem = currentRowEl.nextElementSibling.querySelector('igx-hierarchical-grid');
         const childGridID = gridElem.getAttribute('id');
@@ -443,21 +449,41 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
 
     private performShiftTabIntoChild(gridElem, currentRowEl, rowIndex) {
         const childGridID = gridElem.getAttribute('id');
-        const childGrid = this.getChildGrid(childGridID, this.grid) || this.getChildGrid(childGridID, this.grid.parent);
-        const lastIndex = childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex;
-        const summaryRows = childGrid.summariesRowList.toArray();
-        if (summaryRows.length > 0 && summaryRows[0].summaryCells.length > 0) {
-            // move focus to last summary row cell
-            const summaryRow = summaryRows[0].nativeElement;
-            this.focusPrevRow(summaryRow, lastIndex, childGrid, true, true);
-        } else if (childGrid.rowList.toArray().length === 0 &&
-            childGrid.allowFiltering && childGrid.filterMode === FilterMode.quickFilter) {
-            // move to filter cell
-            childGrid.navigation.moveFocusToFilterCell();
-        } else {
-            // move to next cell
-            this.navigateUp(currentRowEl, { row: rowIndex, column: lastIndex });
+            const childGrid = this.getChildGrid(childGridID, this.grid) || this.getChildGrid(childGridID, this.grid.parent);
+            const lastIndex = childGrid.unpinnedColumns[childGrid.unpinnedColumns.length - 1].visibleIndex;
+            const summaryRows = childGrid.summariesRowList.toArray();
+            if (summaryRows.length > 0 && summaryRows[0].summaryCells.length > 0) {
+                // move focus to last summary row cell
+                const summaryRow = summaryRows[0].nativeElement;
+                this.focusPrevRow(summaryRow, lastIndex, childGrid, true, true);
+            } else if (childGrid.rowList.toArray().length === 0 &&
+             childGrid.allowFiltering && childGrid.filterMode === FilterMode.quickFilter) {
+                 // move to filter cell
+                childGrid.navigation.moveFocusToFilterCell();
+            } else if (childGrid.rowList.length === 0) {
+                // move to prev child or parent row
+                const prevChild = this.getSibling(childGrid);
+                if (prevChild) {
+                    this.performShiftTabIntoChild(prevChild, currentRowEl, rowIndex);
+                } else {
+                    const selNode = {
+                        row:  rowIndex,
+                        column: this.grid.unpinnedColumns[this.grid.unpinnedColumns.length - 1].visibleIndex
+                    };
+                    this.navigateUp(currentRowEl, selNode);
+                }
+            } else {
+                // move to prev cell
+                childGrid.navigation.goToLastCell();
+            }
+    }
+
+    private getSibling(childGrid) {
+        const prevChildRow = childGrid.childRow.nativeElement.previousElementSibling;
+        if (prevChildRow) {
+            return prevChildRow.children[0].children[0];
         }
+        return null;
     }
 
     private focusNextChild(elem, visibleColumnIndex, grid) {
@@ -711,7 +737,12 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         grid.parentVirtDir.onChunkLoad
             .pipe(first())
             .subscribe(callBackFunc);
-        grid.dataRowList.toArray()[0].virtDirRow.scrollTo(unpinnedIndex);
+        if (grid.dataRowList.length > 0) {
+            grid.dataRowList.first.virtDirRow.scrollTo(unpinnedIndex);
+        } else {
+            grid.headerContainer.scrollTo(unpinnedIndex);
+        }
+
     }
     private scrollGrid(grid, target, callBackFunc) {
         this.getFocusableGrid().nativeElement.focus({preventScroll: true});

src/app/virtual-for-directive/virtual-for.sample.ts

@@ -196,7 +196,7 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
         if (this.itemSize === '50px') {
             this.itemSize = '100px';
         } else {
-            this.itemSize = "50px";
+            this.itemSize = '50px';
         }
 
     }