fix: column reordering shouldn't lose hidden columns, fixes #2432

demos/aurelia/src/examples/slickgrid/example01.html

@@ -23,6 +23,10 @@ <h3>
       <i class="mdi mdi-theme-light-dark"></i>
       <span>Toggle Dark Mode</span>
     </button>
+    <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="resetGrid1()" data-test="reset-grid1">
+      <span class="mdi mdi-alert-rhombus-outline"></span>
+      <span>Reset Grid (display all columns)</span>
+    </button>
   </div>
 </h3>
 

demos/aurelia/src/examples/slickgrid/example01.ts

@@ -97,6 +97,14 @@ export class Example01 {
     return mockDataset;
   }
 
+  resetGrid1() {
+    // const cols = this.aureliaGrid1.slickGrid?.getColumns() || [];
+    const cols = this.columnDefinitions1.slice();
+    cols.forEach((c) => (c.hidden = false));
+    this.aureliaGrid1.slickGrid?.setColumns(cols);
+    this.aureliaGrid1.slickGrid?.autosizeColumns();
+  }
+
   toggleDarkModeGrid1() {
     this._darkModeGrid1 = !this._darkModeGrid1;
     if (this._darkModeGrid1) {

demos/aurelia/test/cypress/e2e/example01.cy.ts

@@ -377,4 +377,72 @@ describe('Example 1 - Basic Grids', () => {
 
     cy.get('#grid1-1').get('.slick-grid-menu:visible').find('.close').click({ force: true });
   });
+
+  describe('1st grid - Reorder visible & hidden Columns', () => {
+    it('should hide "% Complete", then swap "Title" and "Duration" and finally redisplay "% Complete" and still expect the 3rd column', () => {
+      cy.get('[data-test="reset-grid1"]').click();
+      cy.get('#grid1-1 .slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+
+      cy.get('#grid1-1').find('button.slick-grid-menu-button').click({ force: true });
+      cy.get('.slick-grid-menu .slick-column-picker-list').contains('% Complete').click();
+      cy.get('[data-dismiss="slick-grid-menu"]').click();
+
+      cy.get('#grid1-1 .slick-header-columns')
+        .children('.slick-header-column:nth(0)')
+        .contains('Title')
+        .drag('.slick-header-column:nth(1)');
+
+      cy.get('.slick-header-column:nth(1)').contains('Title');
+
+      const hiddenCompleteTitles = ['Duration (days)', 'Title', 'Start', 'Finish', 'Effort Driven'];
+      cy.get('#grid1-1 .slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(hiddenCompleteTitles[index]));
+
+      cy.get('#grid1-1').find('button.slick-grid-menu-button').click({ force: true });
+      cy.get('.slick-grid-menu .slick-column-picker-list').contains('% Complete').click();
+      cy.get('[data-dismiss="slick-grid-menu"]').click();
+
+      const visibleCompleteTitles = ['Duration (days)', 'Title', '% Complete', 'Start', 'Finish', 'Effort Driven'];
+      cy.get('#grid1-1 .slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(visibleCompleteTitles[index]));
+    });
+
+    it('should hide "Title" and "Start" columns, then move "% Complete" after "Finish" then redisplay all columns and expect hidden columns to stay at the same positions', () => {
+      cy.get('[data-test="reset-grid1"]').click();
+      cy.get('#grid1-1 .slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+
+      cy.get('#grid1-1').find('button.slick-grid-menu-button').click({ force: true });
+      cy.get('.slick-grid-menu .slick-column-picker-list').contains('Title').click();
+      cy.get('.slick-grid-menu .slick-column-picker-list').contains('Start').click();
+      cy.get('[data-dismiss="slick-grid-menu"]').click();
+
+      cy.get('#grid1-1 .slick-header-columns')
+        .children('.slick-header-column:nth(1)')
+        .contains('% Complete')
+        .drag('.slick-header-column:nth(2)');
+
+      cy.get('.slick-header-column:nth(2)').contains('% Complete');
+
+      const hiddenCompleteTitles = ['Duration (days)', 'Finish', '% Complete', 'Effort Driven'];
+      cy.get('#grid1-1 .slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(hiddenCompleteTitles[index]));
+
+      cy.get('#grid1-1').find('button.slick-grid-menu-button').click({ force: true });
+      cy.get('.slick-grid-menu .slick-column-picker-list').contains('Title').click();
+      cy.get('.slick-grid-menu .slick-column-picker-list').contains('Start').click();
+      cy.get('[data-dismiss="slick-grid-menu"]').click();
+
+      const visibleCompleteTitles = ['Title', 'Duration (days)', 'Finish', 'Start', '% Complete', 'Effort Driven'];
+      cy.get('#grid1-1 .slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(visibleCompleteTitles[index]));
+    });
+  });
 });

demos/react/src/examples/slickgrid/Example01.tsx

@@ -79,6 +79,14 @@ const Example1: React.FC = () => {
     setReactGrid1(reactGrid);
   }
 
+  function resetGrid1() {
+    // const cols = reactGrid1.slickGrid?.getColumns() || [];
+    const cols = columnDefinitions1.slice();
+    cols.forEach((c) => (c.hidden = false));
+    reactGrid1?.slickGrid?.setColumns(cols);
+    reactGrid1?.slickGrid?.autosizeColumns();
+  }
+
   function toggleDarkModeGrid1() {
     const isDarkMode = !darkModeGrid1;
     setDarkModeGrid1(isDarkMode);
@@ -126,12 +134,16 @@ const Example1: React.FC = () => {
             <i className="mdi mdi-theme-light-dark"></i>
             <span>Toggle Dark Mode</span>
           </button>
+          <button className="btn btn-outline-secondary btn-sm btn-icon ms-2" onClick={() => resetGrid1()} data-test="reset-grid1">
+            <span className="mdi mdi-alert-rhombus-outline"></span>
+            <span>Reset Grid (display all columns)</span>
+          </button>
         </div>
       </h3>
 
       <div className="grid-container1">
         <SlickgridReact
-          gridId="grid1"
+          gridId="grid1-1"
           columns={columnDefinitions1}
           options={gridOptions1!}
           dataset={dataset1}
@@ -144,7 +156,7 @@ const Example1: React.FC = () => {
       <h3>
         Grid 2 <small>(with local Pagination)</small>
       </h3>
-      <SlickgridReact gridId="grid2" columns={columnDefinitions2} options={gridOptions2!} dataset={dataset2} />
+      <SlickgridReact gridId="grid1-2" columns={columnDefinitions2} options={gridOptions2!} dataset={dataset2} />
     </div>
   );
 };