Skip to content

Commit 3a322c5

Browse files
zdrawkuzdrawku
authored
Merge pull request #12647 from IgniteUI/dpetev/paging-internal-api-refactor
refactor(grid,paging): internal paginator API use
2 parents ce92337 + 0729244 commit 3a322c5

20 files changed

+94
-83
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1357,7 +1357,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
13571357
return this.grid.dataView
13581358
.map((rec, index) => {
13591359
if (!this.grid.isGroupByRecord(rec) && !this.grid.isSummaryRow(rec)) {
1360-
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;
1360+
this.grid.pagingMode === 1 && this.grid.page !== 0 ? index = index + this.grid.perPage * this.grid.page : index = this.grid.dataRowList.first.index + index;
13611361
const cell = new IgxGridCell(this.grid as any, index, this.field);
13621362
return cell;
13631363
}

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

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -209,20 +209,17 @@ export class IgxFilteringService implements OnDestroy {
209209
return;
210210
}
211211

212-
const grid = this.grid;
213-
const filteringTree = grid.filteringExpressionsTree;
214-
grid.crudService.endEdit(false);
215-
if (grid.paginator) {
216-
grid.paginator.page = 0;
217-
}
212+
const filteringTree = this.grid.filteringExpressionsTree;
213+
this.grid.crudService.endEdit(false);
214+
this.grid.page = 0;
218215

219216
filteringTree.filteringOperands = [];
220-
for (const column of grid.columns) {
217+
for (const column of this.grid.columns) {
221218
this.prepare_filtering_expression(filteringTree, column.field, term,
222219
condition, ignoreCase || column.filteringIgnoreCase);
223220
}
224221

225-
grid.filteringExpressionsTree = filteringTree;
222+
this.grid.filteringExpressionsTree = filteringTree;
226223
}
227224

228225
/**
@@ -291,26 +288,23 @@ export class IgxFilteringService implements OnDestroy {
291288
return;
292289
}
293290

294-
const grid = this.grid;
295-
const filteringTree = grid.filteringExpressionsTree;
291+
const filteringTree = this.grid.filteringExpressionsTree;
296292
const newFilteringTree = new FilteringExpressionsTree(filteringTree.operator, filteringTree.fieldName);
297293

298-
for (const column of grid.columns) {
294+
for (const column of this.grid.columns) {
299295
this.prepare_filtering_expression(newFilteringTree, column.field, value, condition,
300296
ignoreCase || column.filteringIgnoreCase);
301297
}
302298

303-
const eventArgs: IFilteringEventArgs = { owner: grid, filteringExpressions: newFilteringTree, cancel: false };
304-
grid.filtering.emit(eventArgs);
299+
const eventArgs: IFilteringEventArgs = { owner: this.grid, filteringExpressions: newFilteringTree, cancel: false };
300+
this.grid.filtering.emit(eventArgs);
305301
if (eventArgs.cancel) {
306302
return;
307303
}
308304

309305
this.grid.crudService.endEdit(false);
310-
if (grid.paginator) {
311-
grid.paginator.page = 0;
312-
}
313-
grid.filteringExpressionsTree = newFilteringTree;
306+
this.grid.page = 0;
307+
this.grid.filteringExpressionsTree = newFilteringTree;
314308

315309
// Wait for the change detection to update filtered data through the pipes and then emit the event.
316310
requestAnimationFrame(() => this.grid.filteringDone.emit(this.grid.filteringExpressionsTree));
@@ -508,17 +502,13 @@ export class IgxFilteringService implements OnDestroy {
508502

509503
protected filter_internal(fieldName: string, term, conditionOrExpressionsTree: IFilteringOperation | IFilteringExpressionsTree,
510504
ignoreCase: boolean) {
511-
const grid = this.grid;
512-
const filteringTree = grid.filteringExpressionsTree;
505+
const filteringTree = this.grid.filteringExpressionsTree;
513506
this.grid.crudService.endEdit(false);
514-
515-
if (grid.paginator) {
516-
grid.paginator.page = 0;
517-
}
507+
this.grid.page = 0;
518508

519509
const fieldFilterIndex = filteringTree.findIndex(fieldName);
520510
this.prepare_filtering_expression(filteringTree, fieldName, term, conditionOrExpressionsTree, ignoreCase, fieldFilterIndex);
521-
grid.filteringExpressionsTree = filteringTree;
511+
this.grid.filteringExpressionsTree = filteringTree;
522512
}
523513

524514
/** Modifies the filteringState object to contain the newly added filtering conditions/expressions.

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1849,7 +1849,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
18491849
}
18501850

18511851
/**
1852-
* @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
1852+
* @deprecated in version 12.1.0. Define `igx-paginator` as a grid child component and paging will be enabled, otherwise disabled.
18531853
*
18541854
* Gets/Sets whether the paging feature is enabled.
18551855
*
@@ -1858,8 +1858,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
18581858
* The default state is disabled (false).
18591859
* @example
18601860
* ```html
1861+
* <!-- old -->
1862+
* <igx-grid #grid [data]="Data" [paging]="true" [autoGenerate]="true"></igx-grid>
1863+
*
1864+
* <!-- new -->
18611865
* <igx-grid #grid [data]="Data" [autoGenerate]="true">
1862-
* <igx-paginator></igx-paginator>
1866+
* <igx-paginator></igx-paginator>
18631867
* </igx-grid>
18641868
* ```
18651869
*/
@@ -1874,15 +1878,19 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
18741878
}
18751879

18761880
/**
1877-
* @deprecated in version 12.1.0. Use `page` property form `paginator` component instead
1881+
* @deprecated in version 12.1.0. Use `page` property from `igx-paginator` component instance instead.
18781882
*
18791883
* Gets/Sets the current page index.
18801884
*
18811885
*
18821886
* @example
18831887
* ```html
1888+
* <!-- old -->
1889+
* <igx-grid #grid [data]="Data" [page]="model.page" [autoGenerate]="true"></igx-grid>
1890+
*
1891+
* <!-- new -->
18841892
* <igx-grid #grid [data]="Data" [autoGenerate]="true">
1885-
* <igx-paginator [(page)]="model.page"></igx-paginator>
1893+
* <igx-paginator [(page)]="model.page"></igx-paginator>
18861894
* </igx-grid>
18871895
* ```
18881896
* @remarks
@@ -1900,7 +1908,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
19001908
}
19011909

19021910
/**
1903-
* @deprecated in version 12.1.0. Use `perPage` property from `paginator` component instead
1911+
* @deprecated in version 12.1.0. Use `perPage` property from `igx-paginator` component instance instead
19041912
*
19051913
* Gets/Sets the number of visible items per page.
19061914
*
@@ -1909,8 +1917,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
19091917
* The default is 15.
19101918
* @example
19111919
* ```html
1920+
* <!-- old -->
1921+
* <igx-grid #grid [data]="Data" [perPage]="model.perPage" [autoGenerate]="true"></igx-grid>
1922+
*
1923+
* <!-- new -->
19121924
* <igx-grid #grid [data]="Data" [autoGenerate]="true">
1913-
* <igx-paginator [(perPage)]="model.perPage"></igx-paginator>
1925+
* <igx-paginator [(perPage)]="model.perPage"></igx-paginator>
19141926
* </igx-grid>
19151927
* ```
19161928
*/
@@ -4505,7 +4517,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
45054517
}
45064518

45074519
/**
4508-
* @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
4520+
* @deprecated in version 12.1.0. Use the corresponding method `nextPage()` exposed by the `igx-paginator` instance.
45094521
*
45104522
* Goes to the next page, if the grid is not already at the last page.
45114523
*
@@ -4521,7 +4533,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
45214533
}
45224534

45234535
/**
4524-
* @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
4536+
* @deprecated in version 12.1.0. Use the corresponding method `nextPage()` exposed by the `igx-paginator` instance.
45254537
*
45264538
* Goes to the previous page, if the grid is not already at the first page.
45274539
*
@@ -4702,18 +4714,20 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
47024714
}
47034715

47044716
/**
4705-
* @deprecated in version 12.1.0. Use the corresponding method exposed by the `igx-paginator`
4717+
* @deprecated in version 12.1.0. Use the corresponding method `paginate()` exposed by the `igx-paginator` instance.
47064718
*
47074719
* Goes to the desired page index.
47084720
*
47094721
*
47104722
* @example
47114723
* ```typescript
4724+
* // old
47124725
* this.grid1.paginate(1);
4726+
* // new
4727+
* this.paginator1.paginate(1);
47134728
* ```
47144729
* @param val
47154730
*/
4716-
// eslint-disable-next-line @typescript-eslint/member-ordering
47174731
public paginate(val: number): void {
47184732
this.paginator?.paginate(val);
47194733
}

‎projects/igniteui-angular/src/lib/grids/grid-public-row.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ abstract class BaseRow implements RowType {
1919
* Returns the view index calculated per the grid page.
2020
*/
2121
public get viewIndex(): number {
22-
return this.index + ((this.grid.paginator?.page || 0) * (this.grid.paginator?.perPage || 0));
22+
return this.index + this.grid.page * this.grid.perPage;
2323
}
2424

2525
/**
@@ -352,7 +352,7 @@ export class IgxTreeGridRow extends BaseRow implements RowType {
352352
* Returns the view index calculated per the grid page.
353353
*/
354354
public get viewIndex(): number {
355-
if (this.grid.hasSummarizedColumns && ((this.grid.paginator?.page || 0) > 0)) {
355+
if (this.grid.hasSummarizedColumns && this.grid.page > 0) {
356356
if (this.grid.summaryCalculationMode !== GridSummaryCalculationMode.rootLevelOnly) {
357357
const firstRowIndex = this.grid.processedExpandedFlatData.indexOf(this.grid.dataView[0].data);
358358
// firstRowIndex is based on data result after all pipes triggered, excluding summary pipe
@@ -363,7 +363,7 @@ export class IgxTreeGridRow extends BaseRow implements RowType {
363363
return firstRowIndex + precedingSummaryRows + this.index;
364364
}
365365
}
366-
return this.index + ((this.grid.paginator?.page || 0) * (this.grid.paginator?.perPage || 0));
366+
return this.index + this.grid.page * this.grid.perPage;
367367
}
368368

369369
/**
@@ -775,7 +775,7 @@ export class IgxSummaryRow implements RowType {
775775
}
776776
}
777777

778-
return this.index + ((this.grid.paginator?.page || 0) * (this.grid.paginator?.perPage || 0));
778+
return this.index + this.grid.page * this.grid.perPage;
779779
}
780780

781781
/**

‎projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -947,8 +947,8 @@ describe('IgxGrid - Column Selection #grid', () => {
947947
});
948948

949949
describe('Integration tests: ', () => {
950-
let colProductID;
951-
let colProductName;
950+
let colProductID: IgxColumnComponent;
951+
let colProductName: IgxColumnComponent;
952952
beforeEach(() => {
953953
fix = TestBed.createComponent(ProductsComponent);
954954
fix.detectChanges();
@@ -1106,16 +1106,17 @@ describe('IgxGrid - Column Selection #grid', () => {
11061106
it('Paging: Verify column stays selected when change page', fakeAsync(() => {
11071107
colProductName.selected = true;
11081108
colProductID.selected = true;
1109-
grid.paging = true;
1110-
grid.perPage = 3;
1109+
fix.componentInstance.paging = true;
1110+
fix.detectChanges();
1111+
fix.componentInstance.paginator.perPage = 3;
11111112
fix.detectChanges();
11121113
tick(30);
11131114

11141115
GridSelectionFunctions.verifyColumnAndCellsSelected(colProductID);
11151116
GridSelectionFunctions.verifyColumnAndCellsSelected(colProductName);
11161117
expect(grid.getSelectedColumnsData()).toEqual(selectedData());
11171118

1118-
grid.paginate(1);
1119+
fix.componentInstance.paginator.paginate(1);
11191120
fix.detectChanges();
11201121
tick(16);
11211122

‎projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -672,7 +672,7 @@ describe('IgxGrid - Row Adding #grid', () => {
672672
const dataLength = grid.data.length;
673673
fixture.componentInstance.paging = true;
674674
fixture.detectChanges();
675-
grid.perPage = 5;
675+
grid.paginator.perPage = 5;
676676
fixture.detectChanges();
677677

678678
const row = grid.rowList.first;
@@ -689,7 +689,7 @@ describe('IgxGrid - Row Adding #grid', () => {
689689
const dataLength = grid.data.length;
690690
fixture.componentInstance.paging = true;
691691
fixture.detectChanges();
692-
grid.perPage = 5;
692+
grid.paginator.perPage = 5;
693693
fixture.detectChanges();
694694

695695
const row = grid.rowList.first;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { fakeAsync, TestBed, tick } from '@angular/core/testing';
1+
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
22
import { By } from '@angular/platform-browser';
33
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
44
import {
@@ -14,7 +14,7 @@ import { IgxInputDirective } from '../../input-group/public_api';
1414

1515
describe('IgxGrid - Clipboard #grid', () => {
1616

17-
let fix;
17+
let fix: ComponentFixture<IgxGridClipboardComponent>;
1818
let grid: IgxGridComponent;
1919
configureTestSuite((() => {
2020
return TestBed.configureTestingModule({
@@ -93,12 +93,12 @@ describe('IgxGrid - Clipboard #grid', () => {
9393
});
9494

9595
it('Copy data when paging is enabled', () => {
96-
grid.paging = true;
96+
fix.componentInstance.paging = true;
9797
fix.detectChanges();
9898
grid.paginator.perPage = 5;
9999
fix.detectChanges();
100100

101-
grid.page = 1;
101+
grid.paginator.page = 1;
102102
fix.detectChanges();
103103
const copySpy = spyOn<any>(grid.gridCopy, 'emit').and.callThrough();
104104
grid.clipboardOptions.copyHeaders = false;

‎projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1589,7 +1589,7 @@ describe('IgxGrid - Row Selection #grid', () => {
15891589
GridSelectionFunctions.verifyRowSelected(middleRow, false);
15901590
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true);
15911591

1592-
grid.previousPage();
1592+
grid.paginator.previousPage();
15931593
fix.detectChanges();
15941594

15951595
GridSelectionFunctions.verifyRowSelected(firstRow, false);

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger
7373
| gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger
7474
| gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger
75-
| gridPaging:paginator?.page:paginator?.perPage:id:pipeTrigger
75+
| gridPaging:!!paginator:page:perPage:pipeTrigger
7676
| gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger
7777
| gridDetails:hasDetails:expansionStates:pipeTrigger
7878
| gridAddRow:false:pipeTrigger

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1109,8 +1109,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
11091109
}
11101110
}
11111111

1112-
if (this.gridAPI.grid.pagingMode === 1 && this.gridAPI.grid.page !== 0) {
1113-
row.index = index + this.paginator.perPage * this.paginator.page;
1112+
if (this.pagingMode === 1 && this.page !== 0) {
1113+
row.index = index + this.perPage * this.page;
11141114
}
11151115
return row;
11161116
}
@@ -1143,7 +1143,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
11431143
*/
11441144
public allRows(): RowType[] {
11451145
return this.dataView.map((rec, index) => {
1146-
this.pagingMode === 1 && this.paginator.page !== 0 ? index = index + this.paginator.perPage * this.paginator.page : index = this.dataRowList.first.index + index;
1146+
this.pagingMode === 1 && this.page !== 0 ? index = index + this.perPage * this.page : index = this.dataRowList.first.index + index;
11471147
return this.createRow(index);
11481148
});
11491149
}
@@ -1184,8 +1184,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
11841184
const row = this.getRowByIndex(rowIndex);
11851185
const column = this._columns.find((col) => col.field === columnField);
11861186
if (row && row instanceof IgxGridRow && !row.data?.detailsData && column) {
1187-
if (this.pagingMode === 1 && this.gridAPI.grid.page !== 0) {
1188-
row.index = rowIndex + this.paginator.perPage * this.paginator.page;
1187+
if (this.pagingMode === 1 && this.page !== 0) {
1188+
row.index = rowIndex + this.perPage * this.page;
11891189
}
11901190
return new IgxGridCell(this, row.index, columnField);
11911191
}
@@ -1251,7 +1251,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
12511251
protected get defaultTargetBodyHeight(): number {
12521252
const allItems = this.totalItemCount || this.dataLength;
12531253
return this.renderedRowHeight * Math.min(this._defaultTargetRecordNumber,
1254-
this.paginator ? Math.min(allItems, this.paginator.perPage) : allItems);
1254+
this.paginator ? Math.min(allItems, this.perPage) : allItems);
12551255
}
12561256

12571257
/**

0 commit comments

Comments
 (0)