fix(core): header columns grouping misbehave after hiding column

src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts

@@ -224,7 +224,7 @@ export class HeaderMenuExtension implements Extension {
       const visibleColumns = arrayRemoveItemByIndex(currentColumns, columnIndex);
       this.sharedService.visibleColumns = visibleColumns;
       this.sharedService.grid.setColumns(visibleColumns);
-      this.sharedService.onColumnsChanged.next(visibleColumns);
+      this.sharedService.onHeaderMenuHideColumns.next(visibleColumns);
     }
   }
 

src/app/modules/angular-slickgrid/services/__tests__/gridState.service.spec.ts

@@ -921,7 +921,7 @@ describe('GridStateService', () => {
       const getCurGridStateSpy = jest.spyOn(service, 'getCurrentGridState').mockReturnValue(gridStateMock);
       const getAssocCurColSpy = jest.spyOn(service, 'getAssociatedCurrentColumns').mockReturnValue(currentColumnsMock);
 
-      sharedService.onColumnsChanged.next(columnsMock);
+      sharedService.onHeaderMenuHideColumns.next(columnsMock);
 
       expect(getCurGridStateSpy).toHaveBeenCalled();
       expect(getAssocCurColSpy).toHaveBeenCalled();

src/app/modules/angular-slickgrid/services/__tests__/groupingAndColspan.service.spec.ts

@@ -84,13 +84,13 @@ describe('GroupingAndColspanService', () => {
   let service: GroupingAndColspanService;
   let translate: TranslateService;
   let slickgridEventHandler: SlickEventHandler;
+  const sharedService = new SharedService();
 
   beforeEach(() => {
     const div = document.createElement('div');
     div.innerHTML = template;
     document.body.appendChild(div);
 
-    // service = new GroupingAndColspanService(resizerServiceStub);
 
     TestBed.configureTestingModule({
       providers: [
@@ -99,6 +99,7 @@ describe('GroupingAndColspanService', () => {
         { provide: ExtensionUtility, useValue: mockExtensionUtility },
         { provide: ExtensionService, useValue: extensionServiceStub },
         { provide: ResizerService, useValue: resizerServiceStub },
+        { provide: SharedService, useValue: sharedService },
       ],
       imports: [TranslateModule.forRoot()]
     });
@@ -356,5 +357,19 @@ describe('GroupingAndColspanService', () => {
       expect(divHeaderColumns.length).toBeGreaterThan(2);
       expect(divHeaderColumns[0].outerHTML).toEqual(`<div style="width: 2815px; left: -1000px;" class="slick-header-columns">All your colums div here</div>`);
     });
+
+    it('should  call the "renderPreHeaderRowGroupingTitles" when "onHeaderMenuHideColumns" is triggered', () => {
+      const columnsMock = [{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' }] as Column[];
+      const divHeaderColumns = document.getElementsByClassName('slick-header-columns');
+      jest.spyOn(gridStub, 'getColumns').mockReturnValue(mockColumns);
+      const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
+
+      service.init(gridStub, dataViewStub);
+      sharedService.onHeaderMenuHideColumns.next(columnsMock);
+      jest.runAllTimers(); // fast-forward timer
+
+      expect(spy).toHaveBeenCalledTimes(2); // 1x for init, 1x for event
+      expect(divHeaderColumns.length).toBeGreaterThan(2);
+    });
   });
 });

src/app/modules/angular-slickgrid/services/gridState.service.ts

@@ -359,7 +359,7 @@ export class GridStateService {
 
     // subscribe to HeaderMenu (hide column)
     this._subscriptions.push(
-      this.sharedService.onColumnsChanged.subscribe((visibleColumns: Column[]) => {
+      this.sharedService.onHeaderMenuHideColumns.subscribe((visibleColumns: Column[]) => {
         const currentColumns: CurrentColumn[] = this.getAssociatedCurrentColumns(visibleColumns);
         this.onGridStateChanged.next({ change: { newValues: currentColumns, type: GridStateType.columns }, gridState: this.getCurrentGridState() });
       })

src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts

@@ -6,6 +6,7 @@ import { ExtensionUtility } from '../extensions/extensionUtility';
 import { ExtensionService } from './extension.service';
 import { ResizerService } from './resizer.service';
 import { unsubscribeAllObservables } from './utilities';
+import { SharedService } from './shared.service';
 
 // using external non-typed js libraries
 declare let $: any;
@@ -19,7 +20,7 @@ export class GroupingAndColspanService {
   private _grid: any;
   private subscriptions: Subscription[] = [];
 
-  constructor(private extensionUtility: ExtensionUtility, private extensionService: ExtensionService, private resizerService: ResizerService) {
+  constructor(private extensionUtility: ExtensionUtility, private extensionService: ExtensionService, private resizerService: ResizerService, private sharedService: SharedService) {
     this._eventHandler = new Slick.EventHandler();
   }
 
@@ -51,13 +52,14 @@ export class GroupingAndColspanService {
         this._eventHandler.subscribe(grid.onColumnsReordered, () => this.renderPreHeaderRowGroupingTitles());
         this._eventHandler.subscribe(dataView.onRowCountChanged, () => this.renderPreHeaderRowGroupingTitles());
         this.subscriptions.push(
-          this.resizerService.onGridAfterResize.subscribe(() => this.renderPreHeaderRowGroupingTitles())
+          this.resizerService.onGridAfterResize.subscribe(() => this.renderPreHeaderRowGroupingTitles()),
+          this.sharedService.onHeaderMenuHideColumns.subscribe(() => this.delayRenderPreHeaderRowGroupingTitles(0))
         );
 
         this._eventHandler.subscribe(grid.onSetOptions, (_e, args) => {
           // when user changes frozen columns dynamically (e.g. from header menu), we need to re-render the pre-header of the grouping titles
           if (args && args.optionsBefore && args.optionsAfter && args.optionsBefore.frozenColumn !== args.optionsAfter.frozenColumn) {
-            setTimeout(() => this.renderPreHeaderRowGroupingTitles(), 0);
+            this.delayRenderPreHeaderRowGroupingTitles(0);
           }
         });
 
@@ -75,7 +77,7 @@ export class GroupingAndColspanService {
 
         // also not sure why at this point, but it seems that I need to call the 1st create in a delayed execution
         // probably some kind of timing issues and delaying it until the grid is fully ready fixes this problem
-        setTimeout(() => this.renderPreHeaderRowGroupingTitles(), 50);
+        this.delayRenderPreHeaderRowGroupingTitles(50);
       }
     }
   }
@@ -88,6 +90,11 @@ export class GroupingAndColspanService {
     this.subscriptions = unsubscribeAllObservables(this.subscriptions);
   }
 
+  /** call "renderPreHeaderRowGroupingTitles()" with a setTimeout delay */
+  delayRenderPreHeaderRowGroupingTitles(delay = 0) {
+    setTimeout(() => this.renderPreHeaderRowGroupingTitles(), delay);
+  }
+
   /** Create or Render the Pre-Header Row Grouping Titles */
   renderPreHeaderRowGroupingTitles() {
     if (this._gridOptions && this._gridOptions.frozenColumn !== undefined && this._gridOptions.frozenColumn >= 0) {

src/app/modules/angular-slickgrid/services/shared.service.ts

@@ -12,7 +12,7 @@ export class SharedService {
   private _hideHeaderRowAfterPageLoad = false;
   private _visibleColumns: Column[];
   private _hierarchicalDataset: any[] | null;
-  onColumnsChanged = new Subject<Column[]>();
+  onHeaderMenuHideColumns = new Subject<Column[]>();
 
   // --
   // public