Expose paging events in paginator, deprecate paging proxy members in grid

CHANGELOG.md

@@ -2,17 +2,14 @@
 
 All notable changes for each version of this project will be documented in this file.
 ## 11.1.0
-### General
-- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
-    - The following new events are introduced: `sorting`, `filtering`, `columnPinned`, `columnVisibilityChanging`.
-    - **Behavioral Change** -
-    - `onColumnPinning` to emit `IPinColumnCancellableEventArgs` instead of `IPinColumnEventArgs`.
 
 ### New Features
 - `IgxDropDown`
     - 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.
+- `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 +54,13 @@ 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`.
+    - The following new events are introduced: `sorting`, `filtering`, `columnPinned`, `columnVisibilityChanging`.
+    - **Behavioral Change** -
+        - `onColumnPinning` to emit `IPinColumnCancellableEventArgs` instead of `IPinColumnEventArgs`.
+    - **Breaking Change**:
+        - `onPagingDone` output is removed. Use the `paging` and `pagingDone` outputs exposed by the `IgxPaginator`.
+        - `page`, `perPage`, `paginate`, `nextPage`, `previousPage` and `totalPages` in the grids are deprecated and will be removed. Use the corresponding `IgxPaginator` outputs/inputs. When using an external paginator, take care to provide the corresponding slice of data. See [`Paging with Custom Template`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/paging#remote-paging-with-custom-template)
+
 
 ## 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';
@@ -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.
      *
@@ -1432,6 +1421,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
      * Gets/Sets the current page index.
      *
      * @example
@@ -1441,6 +1431,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @remarks
      * Supports two-way binding.
      */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
     @Input()
     public get page(): number {
         return this._page;
@@ -1451,14 +1442,14 @@ 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);
         this.notifyChanges();
     }
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
      * Gets/Sets the number of visible items per page.
      *
      * @remarks
@@ -1468,6 +1459,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * <igx-grid #grid [data]="Data" [paging]="true" [(perPage)]="model.perPage" [autoGenerate]="true"></igx-grid>
      * ```
      */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
     @Input()
     public get perPage(): number {
         return this._perPage;
@@ -1480,7 +1472,9 @@ 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();
     }
@@ -3070,6 +3064,57 @@ 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 {
+        if (!this.isLastPage) {
+            this.page += 1;
+        }
+    }
+
+    /**
+     * @deprecated Use `IgxPaginator` corresponding method 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 {
+        if (!this.isFirstPage) {
+            this.page -= 1;
+        }
+    }
+
     /**
      * @hidden
      * @internal
@@ -3288,11 +3333,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 this.zone.run(() => {
                     this.notifyChanges(true);
                 });
-            });
-
-        this.onPagingDone.pipe(destructor).subscribe(() => {
-            this.endEdit(true);
-            this.selectionService.clear(true);
         });
 
         this.onColumnMoving.pipe(destructor).subscribe(() => this.endEdit(true));
@@ -3370,6 +3410,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         });
     }
 
+    /** @hidden @internal */
+    public _pagingDone() {
+        this.endEdit(true);
+        this.selectionService.clear(true);
+    }
+
     /**
      * @hidden
      */
@@ -4101,13 +4147,15 @@ 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;
@@ -4116,45 +4164,19 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
+     * @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;
-        }
-    }
-
     /**
      * Returns the total number of records.
      *
@@ -4179,13 +4201,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
      * Returns if the current page is the last page.
      *
      * @example
      * ```typescript
      * const lastPage = this.grid.isLastPage;
      * ```
      */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
     public get isLastPage(): boolean {
         return this.page + 1 >= this.totalPages;
     }
@@ -4284,23 +4308,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.
      *

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

@@ -1513,6 +1513,7 @@ describe('IgxGrid - Row Selection #grid', () => {
 
             const secondRow = grid.getRowByIndex(1);
             grid.onHeaderSelectorClick(UIInteractions.getMouseEvent('click'));
+            tick();
             fix.detectChanges();
 
             GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true);
@@ -1526,6 +1527,7 @@ describe('IgxGrid - Row Selection #grid', () => {
 
             // Click on a single row
             secondRow.onClick(UIInteractions.getMouseEvent('click'));
+            tick();
             fix.detectChanges();
 
             GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true);

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>