Skip to content

Commit e69f68d

Browse files
ghiscodingghiscoding
authored
fix(regression): grouping with other hidden columns should still work (#2585)
* fix(common): resolve getHeaderColumn with hidden leading columns
1 parent e5644db commit e69f68d

28 files changed

Lines changed: 729 additions & 28 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export class Example18 {
6464
width: 70,
6565
minWidth: 50,
6666
cssClass: 'cell-title',
67+
hidden: true, // column initially hidden
6768
filterable: true,
6869
sortable: true,
6970
grouping: {

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

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
describe('Example 18 - Draggable Grouping & Aggregators', () => {
22
const preHeaders = ['Common Factor', 'Period', 'Analysis', ''];
3+
const originalTitles = ['Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
34
const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
5+
const gridMenuTitles = [
6+
'Common Factor - Title',
7+
'Common Factor - Duration',
8+
'Period - Start',
9+
'Period - Finish',
10+
'Analysis - Cost',
11+
'Analysis - % Complete',
12+
'Analysis - Effort-Driven',
13+
];
414

515
it('should display Example title', () => {
616
cy.visit(`${Cypress.config('baseUrl')}/example18`);
@@ -18,14 +28,60 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
1828
cy.get('#grid18')
1929
.find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
2030
.children()
21-
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
31+
.each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
2232
});
2333

2434
it('should initially be grouped by "Duration" when loading the grid', () => {
2535
cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
2636
cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
2737
});
2838

39+
it('should open Grid Menu and be able to unhide "Title" column', () => {
40+
cy.get('button.slick-grid-menu-button').click({ force: true });
41+
cy.get('.slick-grid-menu:visible')
42+
.find('.slick-column-picker-list')
43+
.children('li:visible:nth(0)')
44+
.children('label')
45+
.should('contain', 'Common Factor - Title');
46+
// .click({ force: true });
47+
48+
cy.get('.slick-column-picker-list input[data-columnid="title"]')
49+
.parent('.icon-checkbox-container')
50+
.find('.sgi')
51+
.should('have.class', 'sgi-icon-picker-uncheck');
52+
53+
cy.get('.slick-column-picker-list li')
54+
.children()
55+
56+
.each(($child, index) => {
57+
if (index <= 5) {
58+
expect($child.text()).to.eq(gridMenuTitles[index]);
59+
}
60+
});
61+
62+
cy.get('.slick-grid-menu:visible')
63+
.find('.slick-column-picker-list')
64+
.children('li:visible:nth(0)')
65+
.children('label')
66+
.should('contain', 'Common Factor - Title')
67+
.click();
68+
69+
cy.get('.slick-column-picker-list input[data-columnid="title"]')
70+
.parent('.icon-checkbox-container')
71+
.find('.sgi')
72+
.should('have.class', 'sgi-icon-picker-check');
73+
74+
cy.get('#grid18')
75+
.find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
76+
.children()
77+
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
78+
});
79+
80+
it('should still be grouped by "Duration"', () => {
81+
cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
82+
cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
83+
});
84+
2985
it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
3086
cy.get('[data-test="clear-grouping-btn"]').click();
3187
cy.get('#grid18').find('.slick-group-toggle-all').should('be.hidden');

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ const Example18: React.FC = () => {
5656
width: 70,
5757
minWidth: 50,
5858
cssClass: 'cell-title',
59+
hidden: true, // column initially hidden
5960
filterable: true,
6061
sortable: true,
6162
grouping: {

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

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
describe('Example 18 - Draggable Grouping & Aggregators', () => {
22
const preHeaders = ['Common Factor', 'Period', 'Analysis', ''];
3+
const originalTitles = ['Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
34
const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
5+
const gridMenuTitles = [
6+
'Common Factor - Title',
7+
'Common Factor - Duration',
8+
'Period - Start',
9+
'Period - Finish',
10+
'Analysis - Cost',
11+
'Analysis - % Complete',
12+
'Analysis - Effort-Driven',
13+
];
414

515
it('should display Example title', () => {
616
cy.visit(`${Cypress.config('baseUrl')}/example18`);
@@ -18,14 +28,60 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
1828
cy.get('#grid18')
1929
.find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
2030
.children()
21-
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
31+
.each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
2232
});
2333

2434
it('should initially be grouped by "Duration" when loading the grid', () => {
2535
cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
2636
cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
2737
});
2838

39+
it('should open Grid Menu and be able to unhide "Title" column', () => {
40+
cy.get('button.slick-grid-menu-button').click({ force: true });
41+
cy.get('.slick-grid-menu:visible')
42+
.find('.slick-column-picker-list')
43+
.children('li:visible:nth(0)')
44+
.children('label')
45+
.should('contain', 'Common Factor - Title');
46+
// .click({ force: true });
47+
48+
cy.get('.slick-column-picker-list input[data-columnid="title"]')
49+
.parent('.icon-checkbox-container')
50+
.find('.sgi')
51+
.should('have.class', 'sgi-icon-picker-uncheck');
52+
53+
cy.get('.slick-column-picker-list li')
54+
.children()
55+
56+
.each(($child, index) => {
57+
if (index <= 5) {
58+
expect($child.text()).to.eq(gridMenuTitles[index]);
59+
}
60+
});
61+
62+
cy.get('.slick-grid-menu:visible')
63+
.find('.slick-column-picker-list')
64+
.children('li:visible:nth(0)')
65+
.children('label')
66+
.should('contain', 'Common Factor - Title')
67+
.click();
68+
69+
cy.get('.slick-column-picker-list input[data-columnid="title"]')
70+
.parent('.icon-checkbox-container')
71+
.find('.sgi')
72+
.should('have.class', 'sgi-icon-picker-check');
73+
74+
cy.get('#grid18')
75+
.find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
76+
.children()
77+
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
78+
});
79+
80+
it('should still be grouped by "Duration"', () => {
81+
cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
82+
cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
83+
});
84+
2985
it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
3086
cy.get('[data-test="clear-grouping-btn"]').click();
3187
cy.get('#grid18').find('.slick-group-toggle-all').should('be.hidden');

‎demos/vanilla/src/examples/example03.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ <h3 class="title is-3">
1919
</div>
2020
</h3>
2121

22+
<h5 class="mb-3 italic example-details">
23+
Please note that the grid below initially has its first column "Title" hidden by default for E2E testing.
24+
</h5>
25+
2226
<section>
2327
<div class="row">
2428
<button class="button is-small" data-test="add-5k-rows-btn" onclick.trigger="loadData(5000)">5K rows</button>

‎demos/vanilla/src/examples/example03.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ export default class Example03 {
9494
name: 'Title',
9595
field: 'title',
9696
columnGroup: 'Common Factor',
97+
hidden: true, // column initially hidden
9798
sortable: true,
9899
editor: {
99100
model: Editors.longText,

‎demos/vue/src/components/Example18.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ function defineGrid() {
5454
width: 70,
5555
minWidth: 50,
5656
cssClass: 'cell-title',
57+
hidden: true, // column initially hidden
5758
filterable: true,
5859
sortable: true,
5960
grouping: {

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

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
describe('Example 18 - Draggable Grouping & Aggregators', () => {
22
const preHeaders = ['Common Factor', 'Period', 'Analysis', ''];
3+
const originalTitles = ['Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
34
const fullTitles = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];
5+
const gridMenuTitles = [
6+
'Common Factor - Title',
7+
'Common Factor - Duration',
8+
'Period - Start',
9+
'Period - Finish',
10+
'Analysis - Cost',
11+
'Analysis - % Complete',
12+
'Analysis - Effort-Driven',
13+
];
414

515
it('should display Example title', () => {
616
cy.visit(`${Cypress.config('baseUrl')}/example18`);
@@ -18,14 +28,60 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
1828
cy.get('#grid18')
1929
.find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
2030
.children()
21-
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
31+
.each(($child, index) => expect($child.text()).to.eq(originalTitles[index]));
2232
});
2333

2434
it('should initially be grouped by "Duration" when loading the grid', () => {
2535
cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
2636
cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
2737
});
2838

39+
it('should open Grid Menu and be able to unhide "Title" column', () => {
40+
cy.get('button.slick-grid-menu-button').click({ force: true });
41+
cy.get('.slick-grid-menu:visible')
42+
.find('.slick-column-picker-list')
43+
.children('li:visible:nth(0)')
44+
.children('label')
45+
.should('contain', 'Common Factor - Title');
46+
// .click({ force: true });
47+
48+
cy.get('.slick-column-picker-list input[data-columnid="title"]')
49+
.parent('.icon-checkbox-container')
50+
.find('.sgi')
51+
.should('have.class', 'sgi-icon-picker-uncheck');
52+
53+
cy.get('.slick-column-picker-list li')
54+
.children()
55+
56+
.each(($child, index) => {
57+
if (index <= 5) {
58+
expect($child.text()).to.eq(gridMenuTitles[index]);
59+
}
60+
});
61+
62+
cy.get('.slick-grid-menu:visible')
63+
.find('.slick-column-picker-list')
64+
.children('li:visible:nth(0)')
65+
.children('label')
66+
.should('contain', 'Common Factor - Title')
67+
.click();
68+
69+
cy.get('.slick-column-picker-list input[data-columnid="title"]')
70+
.parent('.icon-checkbox-container')
71+
.find('.sgi')
72+
.should('have.class', 'sgi-icon-picker-check');
73+
74+
cy.get('#grid18')
75+
.find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
76+
.children()
77+
.each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
78+
});
79+
80+
it('should still be grouped by "Duration"', () => {
81+
cy.get('[data-row=0] > .cell-title .slick-group-title').contains(/Duration: [0-9]/);
82+
cy.get('[data-row=1] > .slick-cell:nth(2)').should('contain', '0');
83+
});
84+
2985
it('should clear all groups with "Clear all Grouping" and no longer expect any grouping', () => {
3086
cy.get('[data-test="clear-grouping-btn"]').click();
3187
cy.get('#grid18').find('.slick-group-toggle-all').should('be.hidden');

‎docs/TOC.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
* [Single Search Filter](column-functionalities/filters/single-search-filter.md)
3636
* [Formatters](column-functionalities/formatters.md)
3737
* [Sorting](column-functionalities/sorting.md)
38+
* [Visibility](column-functionalities/visibility.md)
3839

3940
## Events
4041

‎docs/column-functionalities/visibility.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
### Demo
2+
[Demo](https://ghiscoding.github.io/slickgrid-universal/#/example03) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/vanilla/src/examples/example03.ts)
3+
4+
### Description
5+
6+
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).
7+
8+
### initially hidden columns
9+
10+
Let's start by demoing how to initially hide some column(s) by using the `hidden` property.
11+
12+
##### define columns
13+
14+
```ts
15+
this.columns = [
16+
{ id: 'firstName', field: 'firstName', name: 'First Name' },
17+
{ id: 'lastName', field: 'lastName', name: 'Last Name' },
18+
{ id: 'age', field: 'age', name: 'Age', hidden: true }, // column initially hidden
19+
];
20+
```
21+
22+
### change visibility afterward
23+
24+
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.
25+
26+
##### define columns
27+
28+
```ts
29+
export class MyExample {
30+
columns: Column[];
31+
32+
defineGrid() {
33+
this.columns = [
34+
{ id: 'firstName', field: 'firstName', name: 'First Name' },
35+
{ id: 'lastName', field: 'lastName', name: 'Last Name' },
36+
{ id: 'age', field: 'age', name: 'Age' },
37+
];
38+
}
39+
40+
// toggle column visibility & then update columns to show changes in the grid
41+
toggleColumnVisibility(columnName: string) {
42+
this.sgb.slickGrid.updateColumnById(columnName, { hidden: true });
43+
this.sgb.slickGrid.updateColumns();
44+
}
45+
46+
// get all columns (including `hidden` columns)
47+
getAllColumns() {
48+
this.sgb.slickGrid.getColumns();
49+
}
50+
51+
// get only the visible columns
52+
getOnlyVisibleColumns() {
53+
this.sgb.slickGrid.getVisibleColumns();
54+
}
55+
}
56+
```

0 commit comments

Comments
 (0)