Add totalRecords input property (#7342)

* feat(IgxGrid): add input property total records to the grid #7215
* fix(IgxGrid): add paging mode property to the grid #7215
* feat(IgxTreeGrid): add pagingMode property to tree and hierarchical grid #7215

Co-authored-by: Zdravko Kolev <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -129,6 +129,9 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
+    - Added new properties for paging:
+     - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.
+     - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.
     - Added functionality for column selection.
      - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
     - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -72,17 +72,17 @@ export class DataUtil {
         return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
     }
 
-    public static page<T>(data: T[], state: IPagingState): T[] {
+    public static page<T>(data: T[], state: IPagingState, dataLength?: number): T[] {
         if (!state) {
             return data;
         }
-        const len = data.length;
+        const len = dataLength !== undefined ? dataLength : data.length;
         const index = state.index;
         const res = [];
-        const recordsPerPage = state.recordsPerPage;
+        const recordsPerPage = dataLength !== undefined && state.recordsPerPage > dataLength ? dataLength : state.recordsPerPage;
         state.metadata = {
             countPages: 0,
-            countRecords: data.length,
+            countRecords: len,
             error: PagingError.None
         };
         if (index < 0 || isNaN(index)) {

projects/igniteui-angular/src/lib/grids/common/enums.ts

@@ -42,3 +42,8 @@ export enum RowPinningPosition {
     Top,
     Bottom
 }
+
+export enum GridPagingMode {
+    local,
+    remote
+}

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

@@ -113,7 +113,8 @@ import {
     GridSummaryCalculationMode,
     FilterMode,
     ColumnPinningPosition,
-    RowPinningPosition
+    RowPinningPosition,
+    GridPagingMode
 } from './common/enums';
 import {
     IGridCellEventArgs,
@@ -409,6 +410,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this._locale = value;
     }
 
+    @Input()
+    get pagingMode() {
+        return this._pagingMode;
+    }
+
+    set pagingMode(val: GridPagingMode) {
+        this._pagingMode = val;
+        this._pipeTrigger++;
+        this.notifyChanges(true);
+    }
+
     /**
      * Gets/Sets whether the paging feature is enabled.
      * @remarks
@@ -2489,6 +2501,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      */
     protected _paging = false;
+    /**
+     * @hidden
+     */
+    protected _pagingMode = GridPagingMode.local;
+    /**
+     * @hidden @internal
+     */
+    public _totalRecords = -1;
     /**
      * @hidden
      */
@@ -3614,7 +3634,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.pagingState) {
             return this.pagingState.metadata.countPages;
         }
-        return -1;
+        return this._totalRecords >= 0 ? Math.ceil(this._totalRecords / this.perPage) : -1;
     }
 
     /**
@@ -3663,9 +3683,16 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * const totalRecords = this.grid.totalRecords;
      * ```
      */
+    @Input()
     get totalRecords(): number {
-        if (this.pagingState) {
-            return this.pagingState.metadata.countRecords;
+        return this._totalRecords >= 0 ? this._totalRecords : this.pagingState?.metadata.countRecords;
+    }
+
+    set totalRecords(total: number) {
+        if (total >= 0) {
+            this._totalRecords = total;
+            this._pipeTrigger++;
+            this.notifyChanges();
         }
     }
 

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

@@ -141,6 +141,24 @@ describe('IgxGrid - Grid Paging #grid', () => {
             verifyGridPager(fix, 3, '1', '1\xA0of\xA04', []);
         });
 
+        it('should be able to set totalRecords', () => {
+            grid.perPage = 5;
+            fix.detectChanges();
+
+            expect(grid.paging).toBeTruthy();
+            expect(grid.perPage).toEqual(5, 'Invalid page size');
+            expect(grid.totalRecords).toBe(10);
+            verifyGridPager(fix, 5, '1', '1\xA0of\xA02', []);
+
+            grid.totalRecords = 4;
+            fix.detectChanges();
+
+            expect(grid.perPage).toEqual(5, 'Invalid page size');
+            expect(grid.totalRecords).toBe(4);
+            verifyGridPager(fix, 4, '1', '1\xA0of\xA01', []);
+        });
+
+
         it('change paging settings UI', () => {
 
             expect(grid.paging).toBeTruthy();

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

@@ -13,6 +13,7 @@ import { IgxGridBaseDirective } from '../grid-base.directive';
 import { GridType } from '../common/grid.interface';
 import { IFilteringStrategy } from '../../data-operations/filtering-strategy';
 import { IGridSortingStrategy } from '../../data-operations/sorting-strategy';
+import { GridPagingMode } from '../common/enums';
 
 /**
  * @hidden
@@ -99,19 +100,19 @@ export class IgxGridPagingPipe implements PipeTransform {
     constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
 
     public transform(collection: IGroupByResult, page = 0, perPage = 15, id: string, pipeTrigger: number): IGroupByResult {
-
-        if (!this.gridAPI.grid.paging) {
+        if (!this.gridAPI.grid.paging || this.gridAPI.grid.pagingMode !== GridPagingMode.local) {
             return collection;
         }
         const state = {
             index: page,
             recordsPerPage: perPage
         };
-        DataUtil.correctPagingState(state, collection.data.length);
+        const total = this.gridAPI.grid._totalRecords >= 0 ? this.gridAPI.grid._totalRecords : collection.data.length;
+        DataUtil.correctPagingState(state, total);
 
         const result = {
-            data: DataUtil.page(cloneArray(collection.data), state),
-            metadata: DataUtil.page(cloneArray(collection.metadata), state)
+            data: DataUtil.page(cloneArray(collection.data), state, total),
+            metadata: DataUtil.page(cloneArray(collection.metadata), state, total)
         };
         if (this.gridAPI.grid.page !== state.index) {
             this.gridAPI.grid.page = state.index;

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.pipes.ts

@@ -3,6 +3,7 @@ import { cloneArray } from '../../core/utils';
 import { GridBaseAPIService } from '../api.service';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 import { DataUtil } from '../../data-operations/data-util';
+import { GridPagingMode } from '../common/enums';
 
 /**
  * @hidden
@@ -63,7 +64,7 @@ export class IgxGridHierarchicalPagingPipe implements PipeTransform {
 
     public transform(collection: any[], page = 0, perPage = 15, id: string, pipeTrigger: number): any[] {
 
-        if (!this.gridAPI.grid.paging) {
+        if (!this.gridAPI.grid.paging || this.gridAPI.grid.pagingMode !== GridPagingMode.local) {
             return collection;
         }
 
@@ -72,8 +73,10 @@ export class IgxGridHierarchicalPagingPipe implements PipeTransform {
             recordsPerPage: perPage
         };
 
-        const result: any[] = DataUtil.page(cloneArray(collection), state);
+        const total = this.gridAPI.grid._totalRecords >= 0 ? this.gridAPI.grid._totalRecords : collection.length;
+        const result: any[] = DataUtil.page(cloneArray(collection), state, total);
         this.gridAPI.grid.pagingState = state;
         return result;
+
     }
 }

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

@@ -174,7 +174,7 @@
 </div>
 
 <ng-template #defaultPaginator>
-    <igx-paginator [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="processedExpandedFlatData.length"
+    <igx-paginator [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords"
         [(perPage)]="perPage">
     </igx-paginator>
 </ng-template>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.pipes.ts

@@ -9,6 +9,7 @@ import { IgxGridBaseDirective } from '../grid/public_api';
 import { ISortingExpression } from '../../data-operations/sorting-expression.interface';
 import { GridType } from '../common/grid.interface';
 import { IGridSortingStrategy } from '../../data-operations/sorting-strategy';
+import { GridPagingMode } from '../common/enums';
 
 /**
  * @hidden
@@ -244,19 +245,19 @@ export class IgxTreeGridPagingPipe implements PipeTransform {
 
     public transform(collection: ITreeGridRecord[], page = 0, perPage = 15, id: string, pipeTrigger: number): ITreeGridRecord[] {
         const grid = this.gridAPI.grid;
-        if (!grid.paging) {
+        if (!grid.paging || grid.pagingMode !== GridPagingMode.local) {
             return collection;
         }
 
-        const len = collection.length;
+        const len = grid._totalRecords >= 0 ? grid._totalRecords : collection.length;
         const totalPages = Math.ceil(len / perPage);
 
         const state = {
             index: (totalPages > 0 && page >= totalPages) ? totalPages - 1 : page,
             recordsPerPage: perPage
         };
 
-        const result: ITreeGridRecord[] = DataUtil.page(cloneArray(collection), state);
+        const result: ITreeGridRecord[] = DataUtil.page(cloneArray(collection), state, len);
         grid.pagingState = state;
         (grid as any)._page = state.index;