diff --git a/cypress/e2e/example-checkbox-header-row.cy.ts b/cypress/e2e/example-checkbox-header-row.cy.ts index b341a058..d961d1ea 100644 --- a/cypress/e2e/example-checkbox-header-row.cy.ts +++ b/cypress/e2e/example-checkbox-header-row.cy.ts @@ -1,5 +1,6 @@ describe('Example - Checkbox Header Row', () => { - const titles = ['', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; + const withTitleRowTitles = ['Sel', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; + const withoutTitleRowTitles = ['', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; let selectedIdsCount = 0; beforeEach(() => { @@ -19,7 +20,7 @@ describe('Example - Checkbox Header Row', () => { cy.get('#myGrid') .find('.slick-header-columns') .children() - .each(($child, index) => expect($child.text()).to.eq(titles[index])); + .each(($child, index) => expect($child.text()).to.eq(withTitleRowTitles[index])); }); it('should select a single row and display new and previous selected rows in the console (previous should be empty)', () => { @@ -396,4 +397,53 @@ describe('Example - Checkbox Header Row', () => { cy.get('#filter-checkbox-selectall-container input[type=checkbox]') .should('be.checked'); }); + + it('should show Select All checkbox in header column titles row', () => { + cy.get('[data-test="toggle-select-all-row"]').click(); + + cy.get('#myGrid [data-id=_checkbox_selector] input[type=checkbox]') + .should('exist'); + cy.get('.slick-header-column:nth(0)') + .find('.slick-column-name') + .should('not.contain', 'Sel'); + + cy.get('[data-test="toggle-select-all"]') + .click(); + + cy.get('.slick-header-column:nth(0)') + .find('.slick-column-name') + .should('contain', 'Sel'); + cy.get('#myGrid [data-id=_checkbox_selector] input[type=checkbox]') + .should('not.exist'); + + cy.get('[data-test="toggle-select-all"]') + .click(); + + cy.get('.slick-header-column:nth(0)') + .find('.slick-column-name') + .should('not.contain', 'Sel'); + cy.get('#myGrid [data-id=_checkbox_selector] input[type=checkbox]') + .should('exist'); + }); + + it('should toggle back Select All to show under filter row and expect back "Sel" column name to show again', () => { + cy.get('.slick-header-column:nth(0)') + .find('.slick-column-name') + .should('not.contain', 'Sel'); + cy.get('#myGrid') + .find('.slick-header-columns') + .children() + .each(($child, index) => expect($child.text()).to.eq(withoutTitleRowTitles[index])); + + cy.get('[data-test="toggle-select-all-row"]').click(); + + cy.get('.slick-header-column:nth(0)') + .find('.slick-column-name') + .should('contain', 'Sel'); + + cy.get('#myGrid') + .find('.slick-header-columns') + .children() + .each(($child, index) => expect($child.text()).to.eq(withTitleRowTitles[index])); + }); }); \ No newline at end of file diff --git a/examples/example-checkbox-header-row.html b/examples/example-checkbox-header-row.html index ccc20fb9..57b90120 100644 --- a/examples/example-checkbox-header-row.html +++ b/examples/example-checkbox-header-row.html @@ -95,10 +95,10 @@

  • Checkbox row select column
  • User can override the logic to display the row checkbox with "selectableOverride". e.g. every 2nd rows is selectable
  • - +

    - +

    @@ -163,6 +163,7 @@

    Selected Ids (0) with index/id offset= implements SlickPlugin { columnId: '_checkbox_selector', cssClass: undefined, hideSelectAllCheckbox: false, + name: '', toolTip: 'Select/Deselect All', width: 30, applySelectOnAllPages: false, // defaults to false, when that is enabled the "Select All" will be applied to all pages (when using Pagination) @@ -95,6 +96,9 @@ export class SlickCheckboxSelectColumn implements SlickPlugin { this._handler.subscribe(this._grid.onHeaderClick, this.handleHeaderClick.bind(this)); } else { this.hideSelectAllFromColumnHeaderTitleRow(); + if (this._options.name) { + this._grid.updateColumnHeader(this._options.columnId || '', this._options.name, ''); + } } if (!this._options.hideInFilterHeaderRow) { @@ -113,7 +117,7 @@ export class SlickCheckboxSelectColumn implements SlickPlugin { } protected hideSelectAllFromColumnHeaderTitleRow() { - this._grid.updateColumnHeader(this._options.columnId || '', '', ''); + this._grid.updateColumnHeader(this._options.columnId || '', this._options.name || '', ''); } protected hideSelectAllFromColumnHeaderFilterRow() { @@ -342,7 +346,9 @@ export class SlickCheckboxSelectColumn implements SlickPlugin { getColumnDefinition() { return { id: this._options.columnId, - name: (this._options.hideSelectAllCheckbox || this._options.hideInColumnTitleRow) ? '' : ``, + name: (this._options.hideSelectAllCheckbox || this._options.hideInColumnTitleRow) + ? this._options.name || '' + : ``, toolTip: (this._options.hideSelectAllCheckbox || this._options.hideInColumnTitleRow) ? '' : this._options.toolTip, field: 'sel', width: this._options.width, @@ -424,18 +430,6 @@ export class SlickCheckboxSelectColumn implements SlickPlugin { selectableOverride(overrideFn: SelectableOverrideCallback) { this._selectableOverride = overrideFn; } - - - // Utils.extend(this, { - // "init": init, - // "destroy": destroy, - // "deSelectRows": deSelectRows, - // "selectRows": selectRows, - // "getColumnDefinition": getColumnDefinition, - // "getOptions": getOptions, - // "selectableOverride": selectableOverride, - // "setOptions": setOptions, - // }); } // extend Slick namespace on window object when building as iife