diff --git a/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts b/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts index 415289bda..adb691909 100644 --- a/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts +++ b/packages/common/src/extensions/__tests__/slickCheckboxSelectColumn.spec.ts @@ -60,6 +60,7 @@ const gridStub = { setSelectedRows: vi.fn(), updateColumnHeader: vi.fn(), onAfterSetColumns: new SlickEvent(), + onAfterUpdateColumns: new SlickEvent(), onClick: new SlickEvent(), onHeaderClick: new SlickEvent(), onHeaderRowCellRendered: new SlickEvent(), @@ -222,6 +223,27 @@ describe('SlickCheckboxSelectColumn Plugin', () => { ); }); + it('should recreate the Select All toggle whenever "onAfterUpdateColumns" grid event is triggered', () => { + const updateColHeaderSpy = vi.spyOn(gridStub, 'updateColumnHeader'); + vi.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(true); + vi.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(false); + vi.spyOn(dataViewStub, 'getAllSelectedFilteredIds').mockReturnValueOnce([]); + vi.spyOn(dataViewStub, 'getFilteredItems').mockReturnValue([]); + + plugin.init(gridStub); + plugin.setOptions({ hideInColumnTitleRow: false, hideInFilterHeaderRow: true, hideSelectAllCheckbox: false }); + + gridStub.onAfterUpdateColumns.notify({ columns: [{ id: '_checkbox_selector', field: '_checkbox_selector' }], grid: gridStub }); + + expect(plugin).toBeTruthy(); + expect(updateColHeaderSpy).toHaveBeenCalledTimes(2); // 1x for plugin creation, 1x for onAfterUpdateColumns trigger + expect(updateColHeaderSpy).toHaveBeenCalledWith( + '_checkbox_selector', + plugin.createCheckboxElement(`header-selector${plugin.selectAllUid}`), + 'Select/Deselect All' + ); + }); + it('should create the plugin and expect "setSelectedRows" to called with all rows toggling to be selected when "applySelectOnAllPages" is disabled', () => { vi.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(false); vi.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(true); diff --git a/packages/common/src/extensions/slickCheckboxSelectColumn.ts b/packages/common/src/extensions/slickCheckboxSelectColumn.ts index c7efaed57..738f6687a 100644 --- a/packages/common/src/extensions/slickCheckboxSelectColumn.ts +++ b/packages/common/src/extensions/slickCheckboxSelectColumn.ts @@ -101,8 +101,10 @@ export class SlickCheckboxSelectColumn { .subscribe(grid.onSelectedRowsChanged, this.handleSelectedRowsChanged.bind(this)) .subscribe(grid.onClick, this.handleClick.bind(this)) .subscribe(grid.onKeyDown, this.handleKeyDown.bind(this)) - // whenever columns changed, we need to rerender Select All checkbox - .subscribe(grid.onAfterSetColumns, this.handleDataViewSelectedIdsChanged.bind(this)); + + // whenever columns changed or is (re)created, we need to rerender Select All checkbox + .subscribe(grid.onAfterSetColumns, this.handleDataViewSelectedIdsChanged.bind(this)) + .subscribe(grid.onAfterUpdateColumns, this.handleDataViewSelectedIdsChanged.bind(this)); if (this._isUsingDataView && this._dataView && this._addonOptions.applySelectOnAllPages) { this._eventHandler @@ -182,7 +184,7 @@ export class SlickCheckboxSelectColumn { this.hideSelectAllFromColumnHeaderFilterRow(); } else { if (!this._addonOptions.hideInColumnTitleRow) { - this.renderSelectAllCheckbox(this._isSelectAllChecked, false); + this.renderSelectAllCheckbox(this._isSelectAllChecked, this._isPartialSelectAllChecked); this._eventHandler.subscribe(this._grid.onHeaderClick, this.handleHeaderClick.bind(this)); } else { this.hideSelectAllFromColumnHeaderTitleRow(); diff --git a/test/cypress/e2e/example07.cy.ts b/test/cypress/e2e/example07.cy.ts index dc23dd683..da6bde6e1 100644 --- a/test/cypress/e2e/example07.cy.ts +++ b/test/cypress/e2e/example07.cy.ts @@ -1255,4 +1255,36 @@ describe('Example 07 - Row Move & Checkbox Selector Selector Plugins', () => { cy.get('.slick-viewport-top.slick-viewport-left').scrollTo(0, 0).wait(10); cy.get('.slick-large-editor-text.editor-title').should('not.be.visible'); }); + + it('should show/hide Title column from column picker and expect Select All to still be rendered', () => { + cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show'); + + cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel'); + cy.get('@firstPickerLabel').should('have.text', 'Title'); + cy.get('@firstPickerLabel').click(); + + cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-check').should('exist'); + + cy.get('@firstPickerLabel').click(); + + cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-check').should('exist'); + cy.get('.slick-column-picker:visible').find('.close').trigger('click').click(); + }); + + 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', () => { + cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(1)`).click(); + + cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show'); + + cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel'); + cy.get('@firstPickerLabel').should('have.text', 'Title'); + cy.get('@firstPickerLabel').click(); + + cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-partial-check').should('exist'); + + cy.get('@firstPickerLabel').click(); + + cy.get('[data-id="_checkbox_selector"] .icon-checkbox-container .mdi-icon-partial-check').should('exist'); + cy.get('.slick-column-picker:visible').find('.close').trigger('click').click(); + }); }); diff --git a/test/cypress/e2e/example14.cy.ts b/test/cypress/e2e/example14.cy.ts index 0f5276c72..6f91fd630 100644 --- a/test/cypress/e2e/example14.cy.ts +++ b/test/cypress/e2e/example14.cy.ts @@ -439,5 +439,38 @@ describe('Example 14 - Columns Resize by Content', () => { cy.get('[data-row="2"] .slick-cell.l2.r2').contains(/[0-9]* days/); }); + + it('should select a row then show/hide Title column from column picker and expect Select All to still be rendered with partial checkbox', () => { + cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(0)`).click(); + + cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show'); + + cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel'); + cy.get('@firstPickerLabel').should('have.text', 'Common Factor - Title'); + cy.get('@firstPickerLabel').click(); + + cy.get('#filter-checkbox-selectall-container .mdi-icon-partial-check').should('exist'); + + cy.get('@firstPickerLabel').click(); + + cy.get('#filter-checkbox-selectall-container .mdi-icon-partial-check').should('exist'); + cy.get('.slick-column-picker:visible').find('.close').trigger('click').click(); + }); + + 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', () => { + cy.get('#filter-checkbox-selectall-container .mdi-icon-partial-check').click(); + cy.get('.slick-header-column:nth(2)').trigger('mouseover').trigger('contextmenu').invoke('show'); + + cy.get('.slick-column-picker .slick-column-picker-list li:not(.hidden):nth(0) .checkbox-label').as('firstPickerLabel'); + cy.get('@firstPickerLabel').should('have.text', 'Common Factor - Title'); + cy.get('@firstPickerLabel').click(); + + cy.get('#filter-checkbox-selectall-container .mdi-icon-check').should('exist'); + + cy.get('@firstPickerLabel').click(); + + cy.get('#filter-checkbox-selectall-container .mdi-icon-check').should('exist'); + cy.get('.slick-column-picker:visible').find('.close').trigger('click').click(); + }); }); });