feat: add name option to CheckboxSelectColumn plugin on columDef (#972

) * feat: add `name` option to CheckboxSelectColumn plugin on columDef - this will only work when the "Select All" checkbox is NOT shown in the column header titles row (`hideInColumnTitleRow: true`) Co-authored-by: Julian <133252429+PrimalNinja@users.noreply.github.com>
6pac · Jan 15, 2024 · 039f4ae · 039f4ae
1 parent 6f30e04
commit 039f4ae
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 18 deletions.
diff --git 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]));
+  });
 });
diff --git a/examples/example-checkbox-header-row.html b/examples/example-checkbox-header-row.html
@@ -95,10 +95,10 @@ <h2>
       <li>Checkbox row select column</li>
       <li>User can override the logic to display the row checkbox with "selectableOverride". e.g. every 2nd rows is selectable</li>
       <p>
-        <button onclick="toggleHideSelectAllCheckbox()">Toggle show/hide "Select All" checkbox</button>
+        <button data-test="toggle-select-all" onclick="toggleHideSelectAllCheckbox()">Toggle show/hide "Select All" checkbox</button>
       </p>
       <p>
-        <button onclick="toggleWhichRowToShowSelectAll()">Toggle which row to show "Select All" checkbox</button>
+        <button data-test="toggle-select-all-row" onclick="toggleWhichRowToShowSelectAll()">Toggle which row to show "Select All" checkbox</button>
       </p>
       <p>
         <button data-test="clear-filters" onclick="clearFilters()">Clear Filters</button>
@@ -163,6 +163,7 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
     applySelectOnAllPages: true, // defaults to false, when that is enabled the "Select All" will be applied to all pages
     hideInColumnTitleRow: !isSelectAllShownAsColumnTitle,
     hideInFilterHeaderRow: isSelectAllShownAsColumnTitle,
+    name: 'Sel', // column name will only show when `hideInColumnTitleRow` is true
 
     // make only 2nd rows as selectable by using the override function
     selectableOverride: function(row, dataContext, grid) {

diff --git a/src/models/checkboxSelectorOption.interface.ts b/src/models/checkboxSelectorOption.interface.ts
@@ -41,6 +41,12 @@ export interface CheckboxSelectorOption {
   /** defaults to true, do we want to hide the "Select All" checkbox from the Column Header Filter Row? */
   hideInFilterHeaderRow?: boolean;
 
+  /**
+   * defaults to empty string, column name.
+   * This will only work when the "Select All" checkbox is NOT shown in the column header row (`hideInColumnTitleRow: true`)
+   */
+  name?: string;
+
   /** Defaults to "Select/Deselect All", provide a tooltip that will be shown over the "Select All" checkbox */
   toolTip?: string;
 

diff --git a/src/plugins/slick.checkboxselectcolumn.ts b/src/plugins/slick.checkboxselectcolumn.ts
@@ -29,6 +29,7 @@ export class SlickCheckboxSelectColumn<T = any> 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<T = any> 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<T = any> 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<T = any> implements SlickPlugin {
   getColumnDefinition() {
     return {
       id: this._options.columnId,
-      name: (this._options.hideSelectAllCheckbox || this._options.hideInColumnTitleRow) ? '' : `<input id="header-selector${this._selectAll_UID}" type="checkbox"><label for="header-selector${this._selectAll_UID}"></label>`,
+      name: (this._options.hideSelectAllCheckbox || this._options.hideInColumnTitleRow)
+        ? this._options.name || ''
+        : `<input id="header-selector${this._selectAll_UID}" type="checkbox"><label for="header-selector${this._selectAll_UID}"></label>`,
       toolTip: (this._options.hideSelectAllCheckbox || this._options.hideInColumnTitleRow) ? '' : this._options.toolTip,
       field: 'sel',
       width: this._options.width,
@@ -424,18 +430,6 @@ export class SlickCheckboxSelectColumn<T = any> implements SlickPlugin {
   selectableOverride(overrideFn: SelectableOverrideCallback<T>) {
     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