diff --git a/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts b/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts index 5af537983..021f8349a 100644 --- 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 index 2d3f56578..2ad798383 100644 --- 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 index 389af7c25..ff63bb809 100644 --- 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; }