Skip to content

Commit 5fc7383

Browse files
authored
fix: calling grid.updateColumns should recreate SelectAll checkbox (#2383)
1 parent e148e47 commit 5fc7383

4 files changed

Lines changed: 92 additions & 3 deletions

File tree

packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const gridStub = {
6060
setSelectedRows: vi.fn(),
6161
updateColumnHeader: vi.fn(),
6262
onAfterSetColumns: new SlickEvent(),
63+
onAfterUpdateColumns: new SlickEvent(),
6364
onClick: new SlickEvent(),
6465
onHeaderClick: new SlickEvent(),
6566
onHeaderRowCellRendered: new SlickEvent(),
@@ -222,6 +223,27 @@ describe('SlickCheckboxSelectColumn Plugin', () => {
222223
);
223224
});
224225

226+
it('should recreate the Select All toggle whenever "onAfterUpdateColumns" grid event is triggered', () => {
227+
const updateColHeaderSpy = vi.spyOn(gridStub, 'updateColumnHeader');
228+
vi.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(true);
229+
vi.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(false);
230+
vi.spyOn(dataViewStub, 'getAllSelectedFilteredIds').mockReturnValueOnce([]);
231+
vi.spyOn(dataViewStub, 'getFilteredItems').mockReturnValue([]);
232+
233+
plugin.init(gridStub);
234+
plugin.setOptions({ hideInColumnTitleRow: false, hideInFilterHeaderRow: true, hideSelectAllCheckbox: false });
235+
236+
gridStub.onAfterUpdateColumns.notify({ columns: [{ id: '_checkbox_selector', field: '_checkbox_selector' }], grid: gridStub });
237+
238+
expect(plugin).toBeTruthy();
239+
expect(updateColHeaderSpy).toHaveBeenCalledTimes(2); // 1x for plugin creation, 1x for onAfterUpdateColumns trigger
240+
expect(updateColHeaderSpy).toHaveBeenCalledWith(
241+
'_checkbox_selector',
242+
plugin.createCheckboxElement(`header-selector${plugin.selectAllUid}`),
243+
'Select/Deselect All'
244+
);
245+
});
246+
225247
it('should create the plugin and expect "setSelectedRows" to called with all rows toggling to be selected when "applySelectOnAllPages" is disabled', () => {
226248
vi.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(false);
227249
vi.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(true);

packages/common/src/extensions/slickCheckboxSelectColumn.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,10 @@ export class SlickCheckboxSelectColumn<T = any> {
101101
.subscribe(grid.onSelectedRowsChanged, this.handleSelectedRowsChanged.bind(this))
102102
.subscribe(grid.onClick, this.handleClick.bind(this))
103103
.subscribe(grid.onKeyDown, this.handleKeyDown.bind(this))
104-
// whenever columns changed, we need to rerender Select All checkbox
105-
.subscribe(grid.onAfterSetColumns, this.handleDataViewSelectedIdsChanged.bind(this));
104+
105+
// whenever columns changed or is (re)created, we need to rerender Select All checkbox
106+
.subscribe(grid.onAfterSetColumns, this.handleDataViewSelectedIdsChanged.bind(this))
107+
.subscribe(grid.onAfterUpdateColumns, this.handleDataViewSelectedIdsChanged.bind(this));
106108

107109
if (this._isUsingDataView && this._dataView && this._addonOptions.applySelectOnAllPages) {
108110
this._eventHandler
@@ -182,7 +184,7 @@ export class SlickCheckboxSelectColumn<T = any> {
182184
this.hideSelectAllFromColumnHeaderFilterRow();
183185
} else {
184186
if (!this._addonOptions.hideInColumnTitleRow) {
185-
this.renderSelectAllCheckbox(this._isSelectAllChecked, false);
187+
this.renderSelectAllCheckbox(this._isSelectAllChecked, this._isPartialSelectAllChecked);
186188
this._eventHandler.subscribe(this._grid.onHeaderClick, this.handleHeaderClick.bind(this));
187189
} else {
188190
this.hideSelectAllFromColumnHeaderTitleRow();

test/cypress/e2e/example07.cy.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1255,4 +1255,36 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => {
12551255
cy.get('.slick-viewport-top.slick-viewport-left').scrollTo(0, 0).wait(10);
12561256
cy.get('.slick-large-editor-text.editor-title').should('not.be.visible');
12571257
});
1258+
1259+
it('should show/hide Title column from column picker and expect Select All to still be rendered', () => {
1260+
cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show');
1261+
1262+
cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel');
1263+
cy.get('@firstPickerLabel').should('have.text', 'Title');
1264+
cy.get('@firstPickerLabel').click();
1265+
1266+
cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-check').should('exist');
1267+
1268+
cy.get('@firstPickerLabel').click();
1269+
1270+
cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-check').should('exist');
1271+
cy.get('.slick-column-picker:visible').find('.close').trigger('click').click();
1272+
});
1273+
1274+
it('should unselect a row then show/hide Title column from column picker and expect Select All to still be rendered and have partial checkbox', () => {
1275+
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(1)`).click();
1276+
1277+
cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show');
1278+
1279+
cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel');
1280+
cy.get('@firstPickerLabel').should('have.text', 'Title');
1281+
cy.get('@firstPickerLabel').click();
1282+
1283+
cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-partial-check').should('exist');
1284+
1285+
cy.get('@firstPickerLabel').click();
1286+
1287+
cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-partial-check').should('exist');
1288+
cy.get('.slick-column-picker:visible').find('.close').trigger('click').click();
1289+
});
12581290
});

test/cypress/e2e/example14.cy.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -439,5 +439,38 @@ describe('Example 14 - Columns Resize by Content', () => {
439439

440440
cy.get('[data-row="2"] .slick-cell.l2.r2').contains(/[0-9]* days/);
441441
});
442+
443+
it('should select a row then show/hide Title column from column picker and expect Select All to still be rendered with partial checkbox', () => {
444+
cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(0)`).click();
445+
446+
cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show');
447+
448+
cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel');
449+
cy.get('@firstPickerLabel').should('have.text', 'Common Factor - Title');
450+
cy.get('@firstPickerLabel').click();
451+
452+
cy.get('#filter-checkbox-selectall-container .mdi-icon-partial-check').should('exist');
453+
454+
cy.get('@firstPickerLabel').click();
455+
456+
cy.get('#filter-checkbox-selectall-container .mdi-icon-partial-check').should('exist');
457+
cy.get('.slick-column-picker:visible').find('.close').trigger('click').click();
458+
});
459+
460+
it('should click on Select All then show/hide Title column from column picker and expect Select All to still be rendered with Select All checkbox', () => {
461+
cy.get('#filter-checkbox-selectall-container .mdi-icon-partial-check').click();
462+
cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show');
463+
464+
cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel');
465+
cy.get('@firstPickerLabel').should('have.text', 'Common Factor - Title');
466+
cy.get('@firstPickerLabel').click();
467+
468+
cy.get('#filter-checkbox-selectall-container .mdi-icon-check').should('exist');
469+
470+
cy.get('@firstPickerLabel').click();
471+
472+
cy.get('#filter-checkbox-selectall-container .mdi-icon-check').should('exist');
473+
cy.get('.slick-column-picker:visible').find('.close').trigger('click').click();
474+
});
442475
});
443476
});

0 commit comments

Comments
 (0)