From 63443fb8ba457da521f330dddf6461935daef3bb Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 10 Mar 2022 09:54:31 +0200 Subject: [PATCH 1/2] fix(grid): fix row indexes in remote virtualization scenario 13.0.x --- .../src/lib/grids/columns/column.component.ts | 3 +- .../src/lib/grids/grid/grid.component.ts | 30 +++++++++++++++---- .../lib/grids/grid/grid.pagination.spec.ts | 18 +++++++++++ 3 files changed, 44 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 3922e62e0a1..14a5468abc8 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/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 = 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; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index dba20b93d0d..5cf10032648 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/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]; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts index 16f53da7942..bdcb10659f8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts +++ b/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); + })); }); From 8c31752a20184d7d3dc0229ece01a8d67bca805d Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 10 Mar 2022 11:09:01 +0200 Subject: [PATCH 2/2] chore(*): fix column expression --- .../igniteui-angular/src/lib/grids/columns/column.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 14a5468abc8..bf4294c3c2b 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1293,7 +1293,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy 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 = index + this.grid.paginator.perPage * this.grid.paginator.page : index = this.grid.dataRowList.first.index + index; + 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; }