fix(grid): add check if totalRecords of paginator is set when paging is remote

Author: viktorkombov

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

@@ -3557,7 +3557,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;

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';
@@ -484,5 +484,14 @@ describe('IgxGrid - Grid Paging #grid', () => {
         expect(paginator).toBeDefined();
         expect(grid.rowList.length).toBe(5);
     }));
+
+    fit('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);
+    }));
 });
 

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)