chore(*): fix grid navigation with remote data

Author: dobromirts

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

@@ -248,10 +248,14 @@ export class IgxGridNavigationService {
     }
 
     public isDataRow(rowIndex: number, includeSummary = false) {
-        if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) {
+        let curRow: any;
+        if (this.grid.virtualizationState) {
+            curRow = this.grid.dataView[rowIndex - this.grid.virtualizationState.startIndex];
+        }else if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) {
             return false;
+        }else {
+            curRow = this.grid.dataView[rowIndex];
         }
-        const curRow = this.grid.dataView[rowIndex];
         return curRow && !this.grid.isGroupByRecord(curRow) && !this.grid.isDetailRecord(curRow)
             && !curRow.childGridsData && (includeSummary || !curRow.summaries);
     }

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

@@ -1030,7 +1030,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      */
     public getRowByIndex(index: number): RowType {
         if (this.gridAPI.grid.virtualizationState){
-            index = index - this.gridAPI.grid.virtualizationState.startIndex;
+            return this.createRow(index);
         }
         if (index < 0 || index >= this.dataView.length) {
             return undefined;
@@ -1104,9 +1104,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         const row = this.getRowByIndex(rowIndex);
         const column = this.columnList.find((col) => col.field === columnField);
         if (row && row instanceof IgxGridRow && !row.data?.detailsData && column) {
-            if (this.gridAPI.grid.virtualizationState){
-                rowIndex = row.index;
-            }
             return new IgxGridCell(this, rowIndex, columnField);
         }
     }
@@ -1146,8 +1143,14 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      */
     public createRow(index: number, data?: any): RowType {
         let row: RowType;
+        let rec: any;
 
-        const rec: any = data ?? this.dataView[index];
+        if (this.gridAPI.grid.virtualizationState) {
+            const virtIndex = index - this.gridAPI.grid.virtualizationState.startIndex;
+            rec = data ?? this.dataView[virtIndex];
+        }else {
+            rec = data ?? this.dataView[index];
+        }
 
         if (rec && this.isGroupByRecord(rec)) {
             row = new IgxGroupByRow(this, index, rec);