Merge pull request #9027 from IgniteUI/revert-paging-changes-m

Revert paging changes

Author: zdrawku

CHANGELOG.md

@@ -20,8 +20,11 @@ All notable changes for each version of this project will be documented in this
     - Support for `currency` type columns is added in the grid.
     - Support for `percent` type columns is added in the grid.
     - Added support for filtering based on the formatted cell values using the `FormattedValuesFilteringStrategy` for `IgxGrid`/`IgxHierarchicalGrid` and `TreeGridFormattedValuesFilteringStrategy` for `IgxTreeGrid`.
-- `IgxPaginator`
-    - `paging` and `pagingDone` events are now emitted.
+    - The following new events are introduced: `sorting`, `filtering`, `columnPinned`, `columnVisibilityChanging`.
+    - **Behavioral Change** -
+    - `onColumnPinning` to emit `IPinColumnCancellableEventArgs` instead of `IPinColumnEventArgs`.
+    - `Column pinning`, `Column moving`, `paging` interactions now discard the editing value, instead of committing it.
+    - `Column Resizing` now does not exit edit mode.
 - `IgxInput` now supports `type="file"` and its styling upon all themes.
    _Note: validation of file type input is not yet supported._
 - `igxSplitter` now has the following additional outputs: 
@@ -105,12 +108,6 @@ 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)
 - IgxButton
     - IgxIcon(s) placed in a button now include margin if there are one or more sibling elements to give them some breathing room. The amount of margin applied depends on the display density of the button.
 - `IgxListComponent`

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

@@ -70,6 +70,14 @@ 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,6 +117,7 @@ import {
     IRowSelectionEventArgs,
     IPinColumnEventArgs,
     IGridEditEventArgs,
+    IPageEventArgs,
     IRowDataEventArgs,
     IColumnResizeEventArgs,
     IColumnMovingStartEventArgs,
@@ -139,7 +140,8 @@ import {
     IFilteringEventArgs,
     IColumnVisibilityChangedEventArgs,
     IColumnVisibilityChangingEventArgs,
-    IPinColumnCancellableEventArgs
+    IPinColumnCancellableEventArgs,
+    IColumnResizingEventArgs
 } from './common/events';
 import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
 import { GridType } from './common/grid.interface';
@@ -290,7 +292,6 @@ 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
@@ -303,12 +304,10 @@ 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
@@ -321,7 +320,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * }
      * ```
      */
-    @DeprecateProperty('Use the corresponding output exposed by the `igx-paginator`.')
     @Output()
     public perPageChange = new EventEmitter<number>();
 
@@ -671,6 +669,19 @@ 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.
      *
@@ -1422,7 +1433,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * @deprecated Use `IgxPaginator` corresponding method instead.
      * Gets/Sets the current page index.
      *
      * @example
@@ -1432,7 +1442,6 @@ 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;
@@ -1443,14 +1452,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
@@ -1460,7 +1469,6 @@ 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;
@@ -1473,9 +1481,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.selectionService.clear(true);
         this._perPage = val;
         this.perPageChange.emit(this._perPage);
-        if (this.totalPages !== 0 && this._page >= this.totalPages) {
-            this.page = this.totalPages - 1;
-        }
+        this.page = 0;
         this.endEdit(false);
         this.notifyChanges();
     }
@@ -3086,57 +3092,6 @@ 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
@@ -3355,6 +3310,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 this.zone.run(() => {
                     this.notifyChanges(true);
                 });
+            });
+
+        this.onPagingDone.pipe(destructor).subscribe(() => {
+            this.endEdit(false);
+            this.selectionService.clear(true);
         });
 
         this.onColumnMovingEnd.pipe(destructor).subscribe(() => this.endEdit(false));
@@ -3431,12 +3391,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         });
     }
 
-    /** @hidden @internal */
-    public _pagingDone() {
-        this.endEdit(false);
-        this.selectionService.clear(true);
-    }
-
     /**
      * @hidden
      */
@@ -4168,15 +4122,13 @@ 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;
@@ -4185,19 +4137,45 @@ 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.
      *
@@ -4222,15 +4200,13 @@ 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;
     }
@@ -4330,6 +4306,23 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.onColumnMovingEnd.emit({ source: 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,7 +1513,6 @@ describe('IgxGrid - Row Selection #grid', () => {
 
             const secondRow = grid.getRowByIndex(1);
             grid.onHeaderSelectorClick(UIInteractions.getMouseEvent('click'));
-            tick();
             fix.detectChanges();
 
             GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true);
@@ -1527,7 +1526,6 @@ 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" (pagingDone)="_pagingDone()">
+    <igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords" [(perPage)]="perPage">
     </igx-paginator>
 </ng-template>