fix(filter): recreate filter when toggling header row

ghiscoding · Jun 16, 2020 · e839464 · e839464
1 parent 1c7d49f
commit e839464
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts b/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts
@@ -694,18 +694,21 @@ describe('gridMenuExtension', () => {
         gridOptionsMock.showHeaderRow = false;
         const gridSpy = jest.spyOn(SharedService.prototype.grid, 'setHeaderRowVisibility');
         const onCommandSpy = jest.spyOn(SharedService.prototype.gridOptions.gridMenu, 'onCommand');
+        const setColumnSpy = jest.spyOn(SharedService.prototype.grid, 'setColumns');
 
         const instance = extension.register();
         instance.onCommand.notify({ item: { command: 'toggle-filter' }, column: {} as Column, grid: gridStub, command: 'toggle-filter' }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
         expect(gridSpy).toHaveBeenCalledWith(true);
+        expect(setColumnSpy).toHaveBeenCalledTimes(1);
 
         gridOptionsMock.showHeaderRow = true;
         instance.onCommand.notify({ item: { command: 'toggle-filter' }, column: {} as Column, grid: gridStub, command: 'toggle-filter' }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
         expect(gridSpy).toHaveBeenCalledWith(false);
+        expect(setColumnSpy).toHaveBeenCalledTimes(1); // same as before, so count won't increase
       });
 
       it('should call the grid "setTopPanelVisibility" method when the command triggered is "toggle-toppanel"', () => {

diff --git a/packages/common/src/extensions/gridMenuExtension.ts b/packages/common/src/extensions/gridMenuExtension.ts
@@ -446,8 +446,14 @@ export class GridMenuExtension implements Extension {
           }
           break;
         case 'toggle-filter':
-          const showHeaderRow = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.showHeaderRow || false;
-          this.sharedService.grid.setHeaderRowVisibility(!showHeaderRow);
+          let showHeaderRow = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.showHeaderRow || false;
+          showHeaderRow = !showHeaderRow; // inverse show header flag
+          this.sharedService.grid.setHeaderRowVisibility(showHeaderRow);
+
+          // when displaying header row, we'll call "setColumns" which in terms will recreate the header row filters
+          if (showHeaderRow === true) {
+            this.sharedService.grid.setColumns(this.sharedService.columnDefinitions);
+          }
           break;
         case 'toggle-toppanel':
           const showTopPanel = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.showTopPanel || false;

diff --git a/packages/vanilla-bundle/src/vanilla-grid-bundle.ts b/packages/vanilla-bundle/src/vanilla-grid-bundle.ts
@@ -75,6 +75,7 @@ export class VanillaGridBundle {
   private _gridContainerElm: Element;
   private _hideHeaderRowAfterPageLoad = false;
   private _isDatasetInitialized = false;
+  private _isGridInitialized = false;
   private _isGridHavingFilters = false;
   private _isLocalGrid = true;
   private _eventHandler: SlickEventHandler = new Slick.EventHandler();
@@ -457,6 +458,7 @@ export class VanillaGridBundle {
     };
 
     this._eventPubSubService.publish('onSlickerGridCreated', slickerElementInstance);
+    this._isGridInitialized = true;
   }
 
   mergeGridOptions(gridOptions: GridOption) {
@@ -677,6 +679,9 @@ export class VanillaGridBundle {
    */
   showHeaderRow(showing = true) {
     this.grid.setHeaderRowVisibility(showing, false);
+    if (showing === true && this._isGridInitialized) {
+      this.grid.setColumns(this.columnDefinitions);
+    }
     return showing;
   }