chore(*): Fix issue with navigation in case details view contain a grid.

Author: MKirova

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -23,6 +23,7 @@ export interface GridType extends IGridDataBindable {
     allowFiltering: boolean;
     rowDraggable: boolean;
     primaryKey: any;
+    id: string;
 
     filterMode: FilterMode;
 

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

@@ -650,13 +650,18 @@ export class IgxGridNavigationService {
     }
 
     protected getRowByIndex(index, selector = this.getRowSelector()) {
-        return this.grid.nativeElement.querySelector(
-            `${selector}[data-rowindex="${index}"]`);
-    }
+        const gridTag = this.grid.nativeElement.tagName.toLocaleLowerCase();
+        const row = Array.from(this.grid.nativeElement.querySelectorAll(
+            `${selector}[data-rowindex="${index}"]`))
+            .find(x => this.getClosestElemByTag(x, gridTag).getAttribute('id') === this.grid.id);
+            return row;
+        }
 
     protected getNextRowByIndex(nextIndex) {
-        return this.grid.tbody.nativeElement.querySelector(
-            `[data-rowindex="${nextIndex}"]`);
+        const gridTag = this.grid.nativeElement.tagName.toLocaleLowerCase();
+        const row = Array.from(this.grid.tbody.nativeElement.querySelectorAll(
+            `[data-rowindex="${nextIndex}"]`)).find(x => this.getClosestElemByTag(x, gridTag).getAttribute('id') === this.grid.id);
+        return row;
     }
 
     private getAllRows() {
@@ -674,4 +679,15 @@ export class IgxGridNavigationService {
     protected getRowSelector(): string {
         return 'igx-grid-row';
     }
+
+    protected getClosestElemByTag(sourceElem, targetTag) {
+        let result = sourceElem;
+        while (result !== null && result.nodeType === 1) {
+            if (result.tagName.toLowerCase() === targetTag.toLowerCase()) {
+                return result;
+            }
+            result = result.parentNode;
+        }
+        return null;
+    }
 }

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

@@ -20,16 +20,7 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
     }
 
     protected getRowByIndex(index) {
-        const selector = this.getRowSelector();
-        const rows = Array.from(this.grid.nativeElement.querySelectorAll(
-            `${selector}[data-rowindex="${index}"]`));
-        let row;
-        rows.forEach((r) => {
-            const parentGrid = this.getClosestElemByTag(r, 'igx-hierarchical-grid');
-            if (parentGrid && parentGrid.getAttribute('id') === this.grid.id) {
-                row = r;
-            }
-        });
+        const row = super.getRowByIndex(index) as any;
         return row;
     }
 
@@ -798,17 +789,6 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
         }
     }
 
-    private getClosestElemByTag(sourceElem, targetTag) {
-        let result = sourceElem;
-        while (result !== null && result.nodeType === 1) {
-            if (result.tagName.toLowerCase() === targetTag.toLowerCase()) {
-                return result;
-            }
-            result = result.parentNode;
-        }
-        return null;
-    }
-
     protected getNextRowByIndex(nextIndex) {
         return this.grid.dataRowList.find(element => element.index === nextIndex).element.nativeElement;
    }