fix(grid): fix row indexes in remote virtualization scenario - master

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1290,11 +1290,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      *
      */
     public get cells(): CellType[] {
-        // TODO calclulate index for remote data scenarios
-        // check indexes in this.dataRowList.first and this.dataRowList.last
         return this.grid.dataView
             .map((rec, index) => {
                 if (!this.grid.isGroupByRecord(rec) && !this.grid.isSummaryRow(rec)) {
+                    this.grid.pagingMode === 1 && this.grid.paginator.page !== 0 ? index = index + this.grid.paginator.perPage * this.grid.paginator.page : index = this.grid.dataRowList.first.index + index;
                     const cell = new IgxGridCell(this.grid as any, index, this.field);
                     return cell;
                 }

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

@@ -1030,10 +1030,22 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @param index
      */
     public getRowByIndex(index: number): RowType {
+        let row: RowType;
         if (index < 0) {
             return undefined;
         }
-        return this.createRow(index);
+        if (this.dataView.length >= this.virtualizationState.startIndex + this.virtualizationState.chunkSize) {
+            row = this.createRow(index);
+        } else {
+            if (!(index < this.virtualizationState.startIndex) && !(index > this.virtualizationState.startIndex + this.virtualizationState.chunkSize)) {
+                row = this.createRow(index);
+            }
+        }
+
+        if (this.gridAPI.grid.pagingMode === 1 && this.gridAPI.grid.page !== 0) {
+            row.index = index + this.paginator.perPage * this.paginator.page;
+        }
+        return row;
     }
 
     /**
@@ -1062,7 +1074,10 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public allRows(): RowType[] {
-        return this.dataView.map((rec, index) => this.createRow(index));
+        return this.dataView.map((rec, index) => {
+            this.pagingMode === 1 && this.paginator.page !== 0 ? index = index + this.paginator.perPage * this.paginator.page : index = this.dataRowList.first.index + index;
+            return this.createRow(index);
+        });
     }
 
     /**
@@ -1101,7 +1116,10 @@ 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) {
-            return new IgxGridCell(this, rowIndex, columnField);
+            if (this.pagingMode === 1 && this.gridAPI.grid.page !== 0) {
+                row.index = rowIndex + this.paginator.perPage * this.paginator.page;
+            }
+            return new IgxGridCell(this, row.index, columnField);
         }
     }
 
@@ -1143,11 +1161,13 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         let rec: any;
 
         if (index < 0 || index >= this.dataView.length) {
-            if (index >= this.dataView.length){
+            if (this.pagingMode === 1 && this.paginator.page !== 0) {
+                rec = data ?? this.dataView[index - this.paginator.perPage * this.paginator.page];
+            } else if (index >= this.dataView.length) {
                 const virtIndex = index - this.gridAPI.grid.virtualizationState.startIndex;
                 rec = data ?? this.dataView[virtIndex];
             }
-        }else {
+        } else {
             rec = data ?? this.dataView[index];
         }
 

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

@@ -494,5 +494,23 @@ describe('IgxGrid - Grid Paging #grid', () => {
         grid = fix.componentInstance.grid;
         expect(grid.paginator.totalPages).toBe(4);
     }));
+
+    it('should get correct rowIndex in remote paging', fakeAsync(() => {
+        fix = TestBed.createComponent(RemotePagingComponent);
+        fix.detectChanges();
+        tick();
+
+        grid = fix.componentInstance.grid;
+        expect(grid.paginator.totalPages).toBe(4);
+        const page = (index: number) => grid.page = index;
+        let desiredPageIndex = 2;
+        page(2);
+        fix.detectChanges();
+        tick();
+        expect(grid.page).toBe(desiredPageIndex);
+
+        expect(grid.getRowByIndex(0).cells[1].value).toBe('Debra Morton')
+        expect(grid.getRowByIndex(0).viewIndex).toBe(6);
+    }));
 });