fix(common): Select All checkbox shouldn't disappear w/Dark Mode toggle

docs/events/Available-Events.md

@@ -112,6 +112,7 @@ handleOnHeaderMenuCommand(e) {
   - `onActiveCellChanged`
   - `onActiveCellPositionChanged`
   - `onAddNewRow`
+  - `onAfterSetColumns`
   - `onAutosizeColumns`
   - `onBeforeAppendCell`
   - `onBeforeCellEditorDestroy`

packages/common/src/core/slickGrid.ts

@@ -51,6 +51,7 @@ import type {
   OnActivateChangedOptionsEventArgs,
   OnActiveCellChangedEventArgs,
   OnAddNewRowEventArgs,
+  OnAfterSetColumnsEventArgs,
   OnAutosizeColumnsEventArgs,
   OnBeforeAppendCellEventArgs,
   OnBeforeCellEditorDestroyEventArgs,
@@ -129,6 +130,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   onActiveCellChanged: SlickEvent<OnActiveCellChangedEventArgs>;
   onActiveCellPositionChanged: SlickEvent<{ grid: SlickGrid; }>;
   onAddNewRow: SlickEvent<OnAddNewRowEventArgs>;
+  onAfterSetColumns: SlickEvent<OnAfterSetColumnsEventArgs>;
   onAutosizeColumns: SlickEvent<OnAutosizeColumnsEventArgs>;
   onBeforeAppendCell: SlickEvent<OnBeforeAppendCellEventArgs>;
   onBeforeCellEditorDestroy: SlickEvent<OnBeforeCellEditorDestroyEventArgs>;
@@ -488,6 +490,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.onActiveCellChanged = new SlickEvent<OnActiveCellChangedEventArgs>('onActiveCellChanged', externalPubSub);
     this.onActiveCellPositionChanged = new SlickEvent<{ grid: SlickGrid; }>('onActiveCellPositionChanged', externalPubSub);
     this.onAddNewRow = new SlickEvent<OnAddNewRowEventArgs>('onAddNewRow', externalPubSub);
+    this.onAfterSetColumns = new SlickEvent<OnAfterSetColumnsEventArgs>('onAfterSetColumns', externalPubSub);
     this.onAutosizeColumns = new SlickEvent<OnAutosizeColumnsEventArgs>('onAutosizeColumns', externalPubSub);
     this.onBeforeAppendCell = new SlickEvent<OnBeforeAppendCellEventArgs>('onBeforeAppendCell', externalPubSub);
     this.onBeforeCellEditorDestroy = new SlickEvent<OnBeforeCellEditorDestroyEventArgs>('onBeforeCellEditorDestroy', externalPubSub);
@@ -2923,6 +2926,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.triggerEvent(this.onBeforeSetColumns, { previousColumns: this.columns, newColumns: columnDefinitions, grid: this });
     this.columns = columnDefinitions;
     this.updateColumnsInternal();
+    this.triggerEvent(this.onAfterSetColumns, { newColumns: columnDefinitions, grid: this });
   }
 
   /** Update columns for when a hidden property has changed but the column list itself has not changed. */

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

@@ -58,6 +58,7 @@ const gridStub = {
   setSelectionModel: jest.fn(),
   setSelectedRows: jest.fn(),
   updateColumnHeader: jest.fn(),
+  onAfterSetColumns: new SlickEvent(),
   onClick: new SlickEvent(),
   onHeaderClick: new SlickEvent(),
   onHeaderRowCellRendered: new SlickEvent(),
@@ -197,6 +198,27 @@ describe('SlickCheckboxSelectColumn Plugin', () => {
     expect(setSelectedRowSpy).not.toHaveBeenCalled();
   });
 
+  it('should recreate the Select All toggle whenever "onAfterSetColumns" grid event is triggered', () => {
+    const updateColHeaderSpy = jest.spyOn(gridStub, 'updateColumnHeader');
+    jest.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(true);
+    jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(false);
+    jest.spyOn(dataViewStub, 'getAllSelectedFilteredIds').mockReturnValueOnce([]);
+    jest.spyOn(dataViewStub, 'getFilteredItems').mockReturnValue([]);
+
+    plugin.init(gridStub);
+    plugin.setOptions({ hideInColumnTitleRow: false, hideInFilterHeaderRow: true, hideSelectAllCheckbox: false });
+
+    gridStub.onAfterSetColumns.notify({ newColumns: [{ id: '_checkbox_selector', field: '_checkbox_selector' }], grid: gridStub });
+
+    expect(plugin).toBeTruthy();
+    expect(updateColHeaderSpy).toHaveBeenCalledTimes(2); // 1x for plugin creation, 1x for onAfterSetColumns 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', () => {
     jest.spyOn(gridStub.getEditorLock(), 'isActive').mockReturnValue(false);
     jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit').mockReturnValue(true);

packages/common/src/extensions/slickCheckboxSelectColumn.ts

@@ -83,10 +83,15 @@ export class SlickCheckboxSelectColumn<T = any> {
       .subscribe(grid.onClick, this.handleClick.bind(this))
       .subscribe(grid.onKeyDown, this.handleKeyDown.bind(this));
 
-    if (this._isUsingDataView && this._dataView && this._addonOptions.applySelectOnAllPages) {
-      this._eventHandler
-        .subscribe(this._dataView.onSelectedRowIdsChanged, this.handleDataViewSelectedIdsChanged.bind(this))
-        .subscribe(this._dataView.onPagingInfoChanged, this.handleDataViewSelectedIdsChanged.bind(this));
+    if (this._isUsingDataView && this._dataView) {
+      // whenever columns changed, we need to rerender Select All, we can call handler to simulate that
+      this._eventHandler.subscribe(grid.onAfterSetColumns, this.handleDataViewSelectedIdsChanged.bind(this));
+
+      if (this._addonOptions.applySelectOnAllPages) {
+        this._eventHandler
+          .subscribe(this._dataView.onSelectedRowIdsChanged, this.handleDataViewSelectedIdsChanged.bind(this))
+          .subscribe(this._dataView.onPagingInfoChanged, this.handleDataViewSelectedIdsChanged.bind(this));
+      }
     }
 
     if (!this._addonOptions.hideInFilterHeaderRow) {

packages/common/src/interfaces/gridEvents.interface.ts

@@ -4,6 +4,7 @@ import type { SlickGrid } from '../core/index';
 export interface SlickGridArg { grid: SlickGrid; }
 export interface OnActiveCellChangedEventArgs extends SlickGridArg { cell: number; row: number; }
 export interface OnAddNewRowEventArgs extends SlickGridArg { item: any; column: Column; }
+export interface OnAfterSetColumnsEventArgs extends SlickGridArg { newColumns: Column[]; }
 export interface OnAutosizeColumnsEventArgs extends SlickGridArg { columns: Column[]; }
 export interface OnBeforeUpdateColumnsEventArgs extends SlickGridArg { columns: Column[]; }
 export interface OnBeforeAppendCellEventArgs extends SlickGridArg { row: number; cell: number; value: any; dataContext: any; }