fix(regression): grouping with other hidden columns should still work

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

@@ -64,6 +64,7 @@ export class Example18 {
         width: 70,
         minWidth: 50,
         cssClass: 'cell-title',
+        hidden: true, // column initially hidden
         filterable: true,
         sortable: true,
         grouping: {

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

@@ -1,6 +1,16 @@
 describe('Example 18 - Draggable Grouping & Aggregators', () => {
   const preHeaders = ['Common Factor', 'Period', 'Analysis', ''];
+  const originalTitles = ['Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
   const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
+  const gridMenuTitles = [
+    'Common Factor - Title',
+    'Common Factor - Duration',
+    'Period - Start',
+    'Period - Finish',
+    'Analysis - Cost',
+    'Analysis - % Complete',
+    'Analysis - Effort-Driven',
+  ];
 
   it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseUrl')}/example18`);
@@ -18,14 +28,60 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
     cy.get('#grid18')
       .find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
       .children()
-      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+      .each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
   });
 
   it('should initially be grouped by "Duration" when loading the grid', () => {
     cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
     cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
   });
 
+  it('should open Grid Menu and be able to unhide "Title" column', () => {
+    cy.get('button.slick-grid-menu-button').click({ force: true });
+    cy.get('.slick-grid-menu:visible')
+      .find('.slick-column-picker-list')
+      .children('li:visible:nth(0)')
+      .children('label')
+      .should('contain', 'Common Factor - Title');
+    // .click({ force: true });
+
+    cy.get('.slick-column-picker-list input[data-columnid="title"]')
+      .parent('.icon-checkbox-container')
+      .find('.sgi')
+      .should('have.class', 'sgi-icon-picker-uncheck');
+
+    cy.get('.slick-column-picker-list li')
+      .children()
+
+      .each(($child, index) => {
+        if (index <= 5) {
+          expect($child.text()).to.eq(gridMenuTitles[index]);
+        }
+      });
+
+    cy.get('.slick-grid-menu:visible')
+      .find('.slick-column-picker-list')
+      .children('li:visible:nth(0)')
+      .children('label')
+      .should('contain', 'Common Factor - Title')
+      .click();
+
+    cy.get('.slick-column-picker-list input[data-columnid="title"]')
+      .parent('.icon-checkbox-container')
+      .find('.sgi')
+      .should('have.class', 'sgi-icon-picker-check');
+
+    cy.get('#grid18')
+      .find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should still be grouped by "Duration"', () => {
+    cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
+    cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
+  });
+
   it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
     cy.get('[data-test="clear-grouping-btn"]').click();
     cy.get('#grid18').find('.slick-group-toggle-all').should('be.hidden');

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

@@ -56,6 +56,7 @@ const Example18: React.FC = () => {
         width: 70,
         minWidth: 50,
         cssClass: 'cell-title',
+        hidden: true, // column initially hidden
         filterable: true,
         sortable: true,
         grouping: {

demos/react/test/cypress/e2e/example18.cy.ts

@@ -1,6 +1,16 @@
 describe('Example 18 - Draggable Grouping & Aggregators', () => {
   const preHeaders = ['Common Factor', 'Period', 'Analysis', ''];
+  const originalTitles = ['Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
   const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
+  const gridMenuTitles = [
+    'Common Factor - Title',
+    'Common Factor - Duration',
+    'Period - Start',
+    'Period - Finish',
+    'Analysis - Cost',
+    'Analysis - % Complete',
+    'Analysis - Effort-Driven',
+  ];
 
   it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseUrl')}/example18`);
@@ -18,14 +28,60 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
     cy.get('#grid18')
       .find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
       .children()
-      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+      .each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
   });
 
   it('should initially be grouped by "Duration" when loading the grid', () => {
     cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
     cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
   });
 
+  it('should open Grid Menu and be able to unhide "Title" column', () => {
+    cy.get('button.slick-grid-menu-button').click({ force: true });
+    cy.get('.slick-grid-menu:visible')
+      .find('.slick-column-picker-list')
+      .children('li:visible:nth(0)')
+      .children('label')
+      .should('contain', 'Common Factor - Title');
+    // .click({ force: true });
+
+    cy.get('.slick-column-picker-list input[data-columnid="title"]')
+      .parent('.icon-checkbox-container')
+      .find('.sgi')
+      .should('have.class', 'sgi-icon-picker-uncheck');
+
+    cy.get('.slick-column-picker-list li')
+      .children()
+
+      .each(($child, index) => {
+        if (index <= 5) {
+          expect($child.text()).to.eq(gridMenuTitles[index]);
+        }
+      });
+
+    cy.get('.slick-grid-menu:visible')
+      .find('.slick-column-picker-list')
+      .children('li:visible:nth(0)')
+      .children('label')
+      .should('contain', 'Common Factor - Title')
+      .click();
+
+    cy.get('.slick-column-picker-list input[data-columnid="title"]')
+      .parent('.icon-checkbox-container')
+      .find('.sgi')
+      .should('have.class', 'sgi-icon-picker-check');
+
+    cy.get('#grid18')
+      .find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should still be grouped by "Duration"', () => {
+    cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
+    cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
+  });
+
   it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
     cy.get('[data-test="clear-grouping-btn"]').click();
     cy.get('#grid18').find('.slick-group-toggle-all').should('be.hidden');

demos/vanilla/src/examples/example03.html

@@ -19,6 +19,10 @@ <h3 class="title is-3">
   </div>
 </h3>
 
+<h5 class="mb-3 italic example-details">
+  Please note that the grid below initially has its first column "Title" hidden by default for E2E testing.
+</h5>
+
 <section>
   <div class="row">
     <button class="button is-small" data-test="add-5k-rows-btn" onclick.trigger="loadData(5000)">5K rows</button>

demos/vanilla/src/examples/example03.ts

@@ -94,6 +94,7 @@ export default class Example03 {
         name: 'Title',
         field: 'title',
         columnGroup: 'Common Factor',
+        hidden: true, // column initially hidden
         sortable: true,
         editor: {
           model: Editors.longText,

demos/vue/src/components/Example18.vue

@@ -54,6 +54,7 @@ function defineGrid() {
       width: 70,
       minWidth: 50,
       cssClass: 'cell-title',
+      hidden: true, // column initially hidden
       filterable: true,
       sortable: true,
       grouping: {

demos/vue/test/cypress/e2e/example18.cy.ts

@@ -1,6 +1,16 @@
 describe('Example 18 - Draggable Grouping & Aggregators', () => {
   const preHeaders = ['Common Factor', 'Period', 'Analysis', ''];
+  const originalTitles = ['Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
   const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
+  const gridMenuTitles = [
+    'Common Factor - Title',
+    'Common Factor - Duration',
+    'Period - Start',
+    'Period - Finish',
+    'Analysis - Cost',
+    'Analysis - % Complete',
+    'Analysis - Effort-Driven',
+  ];
 
   it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseUrl')}/example18`);
@@ -18,14 +28,60 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
     cy.get('#grid18')
       .find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
       .children()
-      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+      .each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
   });
 
   it('should initially be grouped by "Duration" when loading the grid', () => {
     cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
     cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
   });
 
+  it('should open Grid Menu and be able to unhide "Title" column', () => {
+    cy.get('button.slick-grid-menu-button').click({ force: true });
+    cy.get('.slick-grid-menu:visible')
+      .find('.slick-column-picker-list')
+      .children('li:visible:nth(0)')
+      .children('label')
+      .should('contain', 'Common Factor - Title');
+    // .click({ force: true });
+
+    cy.get('.slick-column-picker-list input[data-columnid="title"]')
+      .parent('.icon-checkbox-container')
+      .find('.sgi')
+      .should('have.class', 'sgi-icon-picker-uncheck');
+
+    cy.get('.slick-column-picker-list li')
+      .children()
+
+      .each(($child, index) => {
+        if (index <= 5) {
+          expect($child.text()).to.eq(gridMenuTitles[index]);
+        }
+      });
+
+    cy.get('.slick-grid-menu:visible')
+      .find('.slick-column-picker-list')
+      .children('li:visible:nth(0)')
+      .children('label')
+      .should('contain', 'Common Factor - Title')
+      .click();
+
+    cy.get('.slick-column-picker-list input[data-columnid="title"]')
+      .parent('.icon-checkbox-container')
+      .find('.sgi')
+      .should('have.class', 'sgi-icon-picker-check');
+
+    cy.get('#grid18')
+      .find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should still be grouped by "Duration"', () => {
+    cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
+    cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
+  });
+
   it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
     cy.get('[data-test="clear-grouping-btn"]').click();
     cy.get('#grid18').find('.slick-group-toggle-all').should('be.hidden');

docs/TOC.md

@@ -35,6 +35,7 @@
   * [Single Search Filter](column-functionalities/filters/single-search-filter.md)
 * [Formatters](column-functionalities/formatters.md)
 * [Sorting](column-functionalities/sorting.md)
+* [Visibility](column-functionalities/visibility.md)
 
 ## Events
 

docs/column-functionalities/visibility.md

@@ -0,0 +1,56 @@
+### Demo
+[Demo](https://ghiscoding.github.io/slickgrid-universal/#/example03) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/vanilla/src/examples/example03.ts)
+
+### Description
+
+For column visibility, you can define the `hidden` property in your column definitions to initially hide some columns. You could also toggle the `hidden` property at any point in time (see below for more code usage).
+
+### initially hidden columns
+
+Let's start by demoing how to initially hide some column(s) by using the `hidden` property.
+
+##### define columns
+
+```ts
+this.columns = [
+  { id: 'firstName', field: 'firstName', name: 'First Name' },
+  { id: 'lastName', field: 'lastName', name: 'Last Name' },
+  { id: 'age', field: 'age', name: 'Age', hidden: true }, // column initially hidden
+];
+```
+
+### change visibility afterward
+
+At any point in time, you could toggle the `hidden` property by using `grid.updateColumnById()` and make sure to also call `grid.updateColumns()` so that the UI is also updated.
+
+##### define columns
+
+```ts
+export class MyExample {
+  columns: Column[];
+
+  defineGrid() {
+    this.columns = [
+      { id: 'firstName', field: 'firstName', name: 'First Name' },
+      { id: 'lastName', field: 'lastName', name: 'Last Name' },
+      { id: 'age', field: 'age', name: 'Age' },
+    ];
+  }
+
+  // toggle column visibility & then update columns to show changes in the grid
+  toggleColumnVisibility(columnName: string) {
+    this.sgb.slickGrid.updateColumnById(columnName, { hidden: true });
+    this.sgb.slickGrid.updateColumns();
+  }
+
+  // get all columns (including `hidden` columns)
+  getAllColumns() {
+    this.sgb.slickGrid.getColumns();
+  }
+
+  // get only the visible columns
+  getOnlyVisibleColumns() {
+    this.sgb.slickGrid.getVisibleColumns();
+  }
+}
+```

frameworks/angular-slickgrid/docs/TOC.md

@@ -35,6 +35,7 @@
   * [Single Search Filter](column-functionalities/filters/single-search-filter.md)
 * [Formatters](column-functionalities/formatters.md)
 * [Sorting](column-functionalities/sorting.md)
+* [Visibility](column-functionalities/visibility.md)
 
 ## Events