Merge pull request #10441 from IgniteUI/vkombov/fix-9989-master

fix(grid): add check whether the totalRecords property of the paginator is set when the paging mode is remote
IgniteUI · Nov 12, 2021 · 61b2aa2 · 61b2aa2
2 parents ea07dd4 + 78332b8
commit 61b2aa2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -3571,7 +3571,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.rendered$.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (this.paginator) {
                 this.paginator.perPage = this._perPage !== DEFAULT_ITEMS_PER_PAGE ? this._perPage : this.paginator.perPage;
-                this.paginator.totalRecords = this.totalRecords;
+                this.paginator.totalRecords = this.totalRecords ? this.totalRecords : this.paginator.totalRecords;
                 this.paginator.overlaySettings = { outlet: this.outlet };
             }
             this._rendered = true;

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
@@ -1,7 +1,7 @@
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { IgxGridModule } from './public_api';
 import { GridWithUndefinedDataComponent } from '../../test-utils/grid-samples.spec';
-import { PagingComponent } from '../../test-utils/grid-base-components.spec';
+import { PagingComponent, RemotePagingComponent } from '../../test-utils/grid-base-components.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { configureTestSuite } from '../../test-utils/configure-suite';
@@ -36,7 +36,8 @@ describe('IgxGrid - Grid Paging #grid', () => {
         TestBed.configureTestingModule({
             declarations: [
                 PagingComponent,
-                GridWithUndefinedDataComponent
+                GridWithUndefinedDataComponent,
+                RemotePagingComponent
             ],
             imports: [IgxGridModule, NoopAnimationsModule]
         });
@@ -484,5 +485,14 @@ describe('IgxGrid - Grid Paging #grid', () => {
         expect(paginator).toBeDefined();
         expect(grid.rowList.length).toBe(5);
     }));
+
+    it('paginator should show the exact number of pages when "totalRecords" is not set and "pagingMode" is remote', fakeAsync(() => {
+        fix = TestBed.createComponent(RemotePagingComponent);
+        fix.detectChanges();
+        tick();
+
+        grid = fix.componentInstance.grid;
+        expect(grid.paginator.totalPages).toBe(4);
+    }));
 });
 
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts
@@ -3,6 +3,7 @@ import { SampleTestData } from './sample-test-data.spec';
 import { ColumnDefinitions, GridTemplateStrings } from './template-strings.spec';
 import { IgxGridComponent } from '../grids/grid/grid.component';
 import { IgxColumnActionsComponent } from '../grids/column-actions/column-actions.component';
+import { GridPagingMode } from '../grids/common/enums';
 
 @Component({
     template: `
@@ -95,6 +96,18 @@ export class PagingComponent extends GridWithSizeComponent {
     public data = SampleTestData.personJobDataFull();
 }
 
+@Component({
+    template: GridTemplateStrings.declareGrid('[pagingMode]="pagingMode"',
+        '', ColumnDefinitions.idNameJobTitle, '',
+        '<igx-paginator [perPage]="perPage" [totalRecords]="totalRecords"></igx-paginator>')
+})
+export class RemotePagingComponent extends GridWithSizeComponent {
+    public pagingMode = GridPagingMode.Remote;
+    public perPage = 3;
+    public totalRecords = 10;
+    public data = SampleTestData.personJobDataFull();
+}
+
 @Component({
     template: GridTemplateStrings.declareGrid(` rowSelection = "multiple"`,
         '', ColumnDefinitions.productBasicNumberID)