Paginator changes

CHANGELOG.md

@@ -13,6 +13,9 @@ All notable changes for each version of this project will be documented in this
     - The `igx-drop-down-item` now allows for `igxPrefix`, `igxSuffix` and `igx-divider` directives to be passed as `ng-content` and they will be renderer accordingly in the item's content.
 - `IgxGrid`
     - Added support for exporting grouped data.
+    - `onPagingDone` output is removed. Use the `paging` and `pagingDone` outputs exposed by the `IgxPaginator`.
+- `IgxPaginator`
+    - `paging` and `pagingDone` events are now emitted.
 - `IgxInput` now supports `type="file"` and its styling upon all themes.  
    _Note: validation of file type input is not yet supported._
 
@@ -57,6 +60,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxHierarchicalGrid`, `IgxTreeGrid`
     - Added new property `selectRowOnClick` that determines whether clicking over a row will change its selection state or not. Set to `true` by default.
     - `GridPagingMode` enum members rename - `local` to `Local` and `remote` to `Remote`. Example:  `GridPagingMode.Local`.
+    - **Breaking Change**:
+        - The grids deprecate the `page` and `perPage` properties, also the `onPagingDone` output. Use the corresponding `IgxPaginator` otuputs/inputs..
 
 ## 11.0.4
 

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

@@ -70,14 +70,6 @@ export interface IPinColumnEventArgs extends IBaseEventArgs {
 export interface IPinColumnCancellableEventArgs extends IPinColumnEventArgs, CancelableEventArgs {
 }
 
-/**
- * The event arguments after a page is changed.
- */
-export interface IPageEventArgs extends IBaseEventArgs {
-    previous: number;
-    current: number;
-}
-
 export interface IRowDataEventArgs extends IBaseEventArgs {
     data: any;
 }

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

@@ -117,7 +117,6 @@ import {
     IRowSelectionEventArgs,
     IPinColumnEventArgs,
     IGridEditEventArgs,
-    IPageEventArgs,
     IRowDataEventArgs,
     IColumnResizeEventArgs,
     IColumnMovingStartEventArgs,
@@ -140,8 +139,7 @@ import {
     IFilteringEventArgs,
     IColumnVisibilityChangedEventArgs,
     IColumnVisibilityChangingEventArgs,
-    IPinColumnCancellableEventArgs,
-    IColumnResizingEventArgs
+    IPinColumnCancellableEventArgs
 } from './common/events';
 import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
 import { GridType } from './common/grid.interface';
@@ -155,7 +153,7 @@ import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/gri
 import { IgxSnackbarComponent } from '../snackbar/snackbar.component';
 import { v4 as uuidv4 } from 'uuid';
 import { IgxActionStripComponent } from '../action-strip/action-strip.component';
-import { DeprecateProperty } from '../core/deprecateDecorators';
+import { DeprecateMethod, DeprecateProperty } from '../core/deprecateDecorators';
 
 let FAKE_ROW_ID = -1;
 
@@ -292,6 +290,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public onScroll = new EventEmitter<IGridScrollEventArgs>();
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding output instead.
      * Emitted after the current page is changed.
      *
      * @example
@@ -304,10 +303,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * }
      * ```
      */
+    @DeprecateProperty('Use the corresponding output exposed by the `igx-paginator`.')
     @Output()
     public pageChange = new EventEmitter<number>();
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding output instead.
      * Emitted when `perPage` property value of the grid is changed.
      *
      * @example
@@ -320,6 +321,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * }
      * ```
      */
+    @DeprecateProperty('Use the corresponding output exposed by the `igx-paginator`.')
     @Output()
     public perPageChange = new EventEmitter<number>();
 
@@ -669,19 +671,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     public onFilteringDone = new EventEmitter<IFilteringExpressionsTree>();
 
-    /**
-     * Emitted after paging is performed.
-     *
-     * @remarks
-     * Returns an object consisting of the previous and next pages.
-     * @example
-     * ```html
-     * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onPagingDone)="pagingDone($event)"></igx-grid>
-     * ```
-     */
-    @Output()
-    public onPagingDone = new EventEmitter<IPageEventArgs>();
-
     /**
      * Emitted when a row added through the API.
      *
@@ -1451,7 +1440,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             return;
         }
         this.selectionService.clear(true);
-        this.onPagingDone.emit({ previous: this._page, current: val });
         this._page = val;
         this.pageChange.emit(this._page);
         this.navigateTo(0);
@@ -1480,7 +1468,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.selectionService.clear(true);
         this._perPage = val;
         this.perPageChange.emit(this._perPage);
-        this.page = 0;
+
+        if (this.totalPages !== 0 && this._page >= this.totalPages) {
+            this.page = this.totalPages - 1;
+        }
+
         this.endEdit(true);
         this.notifyChanges();
     }
@@ -2936,6 +2928,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public abstract id: string;
     abstract data: any[];
     abstract filteredData: any[];
+
     /**
      * Returns an array containing the filtered sorted data.
      *
@@ -3070,6 +3063,53 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.cdr.detach();
     }
 
+    /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
+     * Goes to the desired page index.
+     *
+     * @example
+     * ```typescript
+     * this.grid1.paginate(1);
+     * ```
+     * @param val
+     */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
+    public paginate(val: number): void {
+        if (val < 0 || val > this.totalPages - 1) {
+            return;
+        }
+
+        this.page = val;
+    }
+
+    /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
+     * Goes to the next page, if the grid is not already at the last page.
+     *
+     * @example
+     * ```typescript
+     * this.grid1.nextPage();
+     * ```
+     */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
+    public nextPage(): void {
+        this.paginate(this._page + 1);
+    }
+
+    /**
+     * @deprecated Use `IgxPaginator` corresponding methods instead.
+     * Goes to the previous page, if the grid is not already at the first page.
+     *
+     * @example
+     * ```typescript
+     * this.grid1.previousPage();
+     * ```
+     */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
+    public previousPage(): void {
+        this.paginate(this._page - 1);
+    }
+
     /**
      * @hidden
      * @internal
@@ -3290,11 +3330,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 });
             });
 
-        this.onPagingDone.pipe(destructor).subscribe(() => {
-            this.endEdit(true);
-            this.selectionService.clear(true);
-        });
-
         this.onColumnMoving.pipe(destructor).subscribe(() => this.endEdit(true));
         this.onColumnResized.pipe(destructor).subscribe(() => this.endEdit(true));
 
@@ -3370,6 +3405,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         });
     }
 
+    /** @hidden @internal */
+    public _pagingDone() {
+        this.endEdit(true);
+        this.selectionService.clear(true);
+    }
+
     /**
      * @hidden
      */
@@ -3794,7 +3835,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._userOutletDirective = val;
     }
 
-
     /**
      * Gets the default row height.
      *
@@ -4101,58 +4141,34 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
      * Gets the total number of pages.
      *
      * @example
      * ```typescript
      * const totalPages = this.grid.totalPages;
      * ```
      */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
     public get totalPages(): number {
         if (this.pagingState) {
             return this.pagingState.metadata.countPages;
         }
-        return this._totalRecords >= 0 ? Math.ceil(this._totalRecords / this.perPage) : -1;
+        return this._totalRecords >= 0 ? Math.ceil(this._totalRecords / this._perPage) : -1;
     }
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
      * Gets if the current page is the first page.
      *
      * @example
      * ```typescript
      * const firstPage = this.grid.isFirstPage;
      * ```
      */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
     public get isFirstPage(): boolean {
-        return this.page === 0;
-    }
-
-    /**
-     * Goes to the next page, if the grid is not already at the last page.
-     *
-     * @example
-     * ```typescript
-     * this.grid1.nextPage();
-     * ```
-     */
-    public nextPage(): void {
-        if (!this.isLastPage) {
-            this.page += 1;
-        }
-    }
-
-    /**
-     * Goes to the previous page, if the grid is not already at the first page.
-     *
-     * @example
-     * ```typescript
-     * this.grid1.previousPage();
-     * ```
-     */
-    public previousPage(): void {
-        if (!this.isFirstPage) {
-            this.page -= 1;
-        }
+        return this._page === 0;
     }
 
     /**
@@ -4179,15 +4195,17 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
+     * @deprecated
      * Returns if the current page is the last page.
      *
      * @example
      * ```typescript
      * const lastPage = this.grid.isLastPage;
      * ```
      */
+    @DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
     public get isLastPage(): boolean {
-        return this.page + 1 >= this.totalPages;
+        return this._page + 1 >= this.totalPages;
     }
 
     /**
@@ -4284,23 +4302,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._columnsReordered(column, target);
     }
 
-    /**
-     * Goes to the desired page index.
-     *
-     * @example
-     * ```typescript
-     * this.grid1.paginate(1);
-     * ```
-     * @param val
-     */
-    public paginate(val: number): void {
-        if (val < 0 || val > this.totalPages - 1) {
-            return;
-        }
-
-        this.page = val;
-    }
-
     /**
      * Manually marks the `IgxGridComponent` for change detection.
      *
@@ -6729,7 +6730,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         // eslint-disable-next-line prefer-const
         for (let [row, set] of selectionMap) {
-            row = this.paging ? row + (this.perPage * this.page) : row;
+            row = this.paging ? row + (this._perPage * this._page) : row;
             row = isRemote ? row - this.virtualizationState.startIndex : row;
             if (!source[row] || source[row].detailsData !== undefined) {
                 continue;
@@ -6845,7 +6846,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             const rowIndex = inCollection.indexOf(row);
             const page = Math.floor(rowIndex / this.perPage);
 
-            if (this.page !== page) {
+            if (this._page !== page) {
                 delayScrolling = true;
                 this.page = page;
             }

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

@@ -243,7 +243,7 @@
 </div>
 
 <ng-template #defaultPaginator>
-    <igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords" [(perPage)]="perPage">
+    <igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords" [(perPage)]="perPage" (pagingDone)="_pagingDone()">
     </igx-paginator>
 </ng-template>