From e51ccb4352bf3a578159b8b63f0a6caf891c382a Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Fri, 28 May 2021 15:19:36 -0400
Subject: [PATCH] fix(services): toggle pagination was not displaying all row
 selection - previous PR #352 that fixed row selection with row move actually
 caused a regression with toggling of pagination, when removing Pagination on
 the fly it will show all items in the grid and there is code in the Grid
 State Service that will take row selections from all page and reselect them
 when we toggle to No Pagination, and we need to change our `enablePagination`
 only after that Grid State Service is finished else we end up missing row
 selection from all other pages

---
 .../src/services/__tests__/pagination.service.spec.ts    | 2 +-
 packages/common/src/services/pagination.service.ts       | 9 ++++++---
 test/cypress/integration/example07.spec.js               | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/common/src/services/__tests__/pagination.service.spec.ts b/packages/common/src/services/__tests__/pagination.service.spec.ts
index e0d794cda..ca7caf2af 100644
--- a/packages/common/src/services/__tests__/pagination.service.spec.ts
+++ b/packages/common/src/services/__tests__/pagination.service.spec.ts
@@ -803,7 +803,7 @@ describe('PaginationService', () => {
 
       expect(sharedService.gridOptions.enablePagination).toBeTrue();
       expect(gotoSpy).toHaveBeenCalled();
-      expect(pubSubSpy).toHaveBeenNthCalledWith(3, `onPaginationVisibilityChanged`, { visible: true });
+      expect(pubSubSpy).toHaveBeenCalledWith(`onPaginationVisibilityChanged`, { visible: true });
       expect(setPagingSpy).toHaveBeenCalledWith({ pageSize: mockGridOption.pagination!.pageSize, pageNum: 0 });
     });
   });
diff --git a/packages/common/src/services/pagination.service.ts b/packages/common/src/services/pagination.service.ts
index dca122e10..42fbf9900 100644
--- a/packages/common/src/services/pagination.service.ts
+++ b/packages/common/src/services/pagination.service.ts
@@ -293,13 +293,11 @@ export class PaginationService {
    *
    * IMPORTANT NOTE:
    * The Pagination must be created on initial page load, then only after can you toggle it.
-   * Basically this method WILL NOT WORK to show the Pagination if it was not there from the start.
+   * Basically this method WILL NOT WORK to show the Pagination if it was never created from the start.
    */
   togglePaginationVisibility(visible?: boolean) {
     if (this.grid && this.sharedService?.gridOptions) {
       const isVisible = visible !== undefined ? visible : !this.sharedService.gridOptions.enablePagination;
-      this.sharedService.gridOptions.enablePagination = isVisible;
-      this.pubSubService.publish(`onPaginationVisibilityChanged`, { visible: isVisible });
 
       // make sure to reset the Pagination and go back to first page to avoid any issues with Pagination being offset
       if (isVisible) {
@@ -312,6 +310,11 @@ export class PaginationService {
         const pageSize = visible ? this._itemsPerPage : 0;
         this.dataView.setPagingOptions({ pageSize, pageNum: 0 });
       }
+
+      // finally toggle the "enablePagination" flag and make sure it happens AFTER the setPagingOptions is called (when using local grid)
+      // to avoid conflict with GridState bindSlickGridRowSelectionToGridStateChange() method
+      this.sharedService.gridOptions.enablePagination = isVisible;
+      this.pubSubService.publish(`onPaginationVisibilityChanged`, { visible: isVisible });
     }
   }
 
diff --git a/test/cypress/integration/example07.spec.js b/test/cypress/integration/example07.spec.js
index 7385e4b66..c28a0a46b 100644
--- a/test/cypress/integration/example07.spec.js
+++ b/test/cypress/integration/example07.spec.js
@@ -89,7 +89,7 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', { retries
       .should('have.length', 4);
   });
 
-  it('should expect row to be moved to another row index', () => {
+  it('should expect the row to have moved to another row index', () => {
     cy.get('.slick-viewport-top.slick-viewport-left')
       .scrollTo('top');