fix(header): column header grouping should be re-render after a resize

- without a re-render, the column grouping simply goes away completely and nothing is shown in the pre-header after a resize

Author: ghiscoding-SE

src/app/examples/grid-colspan.component.ts

@@ -14,11 +14,7 @@ export class GridColspanComponent implements OnInit {
       Row Colspan - (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Colspan" target="_blank">Wiki docs</a>) /
       Header Grouping - (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Header-Title-Grouping" target="_blank">Wiki docs</a>)
     </li>
-    <li>Note that you can add Sort but remember that it will sort by the data that the row contains, even if the data is visually hidden by colspan it will still sort it</li>
-    <li>
-      Header Grouping spanning accross multiple columns is working but has some UI issues on window resize.
-      If anyone can fix it, probably some CSS issues, please let us know.
-    </li>
+    <li>Note that you can add Sort but remember that it will sort by the data which the row contains, even if the data is visually hidden by colspan it will still sort it</li>
   </ul>
   `;
 
@@ -51,7 +47,7 @@ export class GridColspanComponent implements OnInit {
       enableSorting: true,
       createPreHeaderPanel: true,
       showPreHeaderPanel: true,
-      preHeaderPanelHeight: 25,
+      preHeaderPanelHeight: 28,
       explicitInitialization: true,
       colspanCallback: this.renderDifferentColspan
     };

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

@@ -1,5 +1,8 @@
+import { Subject } from 'rxjs';
+
 import { GroupingAndColspanService } from '../groupingAndColspan.service';
 import { GridOption, SlickEventHandler, Column } from '../../models';
+import { ResizerService, GridDimension } from '../resizer.service';
 
 declare var Slick: any;
 const gridId = 'grid1';
@@ -36,6 +39,15 @@ const gridStub = {
   setSortColumns: jest.fn(),
 };
 
+const resizerServiceStub = {
+  init: jest.fn(),
+  dispose: jest.fn(),
+  bindAutoResizeDataGrid: jest.fn(),
+  compensateHorizontalScroll: jest.fn(),
+  resizeGrid: jest.fn(),
+  onGridAfterResize: new Subject<GridDimension>(),
+} as unknown as ResizerService;
+
 jest.useFakeTimers();
 
 // define a <div> container to simulate the grid container
@@ -60,7 +72,7 @@ describe('GroupingAndColspanService', () => {
     div.innerHTML = template;
     document.body.appendChild(div);
 
-    service = new GroupingAndColspanService();
+    service = new GroupingAndColspanService(resizerServiceStub);
     slickgridEventHandler = service.eventHandler;
   });
 
@@ -150,6 +162,18 @@ describe('GroupingAndColspanService', () => {
       expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 50);
     });
 
+    it('should call the "renderPreHeaderRowGroupingTitles" after triggering a grid resize', () => {
+      const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
+
+      service.init(gridStub, dataViewStub);
+      resizerServiceStub.onGridAfterResize.next({ height: 100, width: 100 });
+      jest.runAllTimers(); // fast-forward timer
+
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(setTimeout).toHaveBeenCalledTimes(1);
+      // expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 75);
+    });
+
     it('should render the pre-header row grouping title DOM element', () => {
       const spy = jest.spyOn(service, 'renderPreHeaderRowGroupingTitles');
       const divHeaderColumns = document.getElementsByClassName('slick-header-columns');

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

@@ -1,21 +1,24 @@
+import { Injectable } from '@angular/core';
 
 import {
   Column,
   GridOption,
   SlickEventHandler,
 } from './../models/index';
+import { ResizerService } from './resizer.service';
 
 // using external non-typed js libraries
 declare let $: any;
 
 // using external non-typed js libraries
 declare var Slick: any;
 
+@Injectable()
 export class GroupingAndColspanService {
   private _eventHandler: SlickEventHandler;
   private _grid: any;
 
-  constructor() {
+  constructor(private resizerService: ResizerService) {
     this._eventHandler = new Slick.EventHandler();
   }
 
@@ -45,6 +48,7 @@ export class GroupingAndColspanService {
         this._eventHandler.subscribe(grid.onSort, () => this.renderPreHeaderRowGroupingTitles());
         this._eventHandler.subscribe(grid.onColumnsResized, () => this.renderPreHeaderRowGroupingTitles());
         this._eventHandler.subscribe(dataView.onRowCountChanged, () => this.renderPreHeaderRowGroupingTitles());
+        this.resizerService.onGridAfterResize.subscribe(() => this.renderPreHeaderRowGroupingTitles());
 
         // 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 does help

src/app/modules/angular-slickgrid/styles/_variables.scss

@@ -48,11 +48,13 @@ $row-checkbox-selector-background:        inherit !default;
 $row-checkbox-selector-border:            none !default;
 
 /* Pre-Header - Header Grouping colspan */
-$preheader-border-left:                   none !default;
-$preheader-border-right:                  none !default;
-$preheader-border-bottom:                 none !default;
-$preheader-border-top:                    none !default;
-$preheader-font-size:                     $font-size-base + 2px !default;
+$preheader-border-left:                     none !default;
+$preheader-border-left-first-element:       none !default;
+$preheader-border-right:                    none !default;
+$preheader-border-right-last-element:       none !default;
+$preheader-border-bottom:                   none !default;
+$preheader-border-top:                      none !default;
+$preheader-font-size:                       $font-size-base + 3px !default;
 
 /* header */
 $header-font-weight:                      bold !default;

src/app/modules/angular-slickgrid/styles/slick-bootstrap.scss

@@ -247,13 +247,6 @@
     }
   }
 
-  .slick-preheader-panel.ui-state-default  {
-    .slick-header-column {
-      border-left: $preheader-border-left !important;
-      font-size: $preheader-font-size !important;
-    }
-  }
-
   .slick-header-columns {
     background: $table-background;
     width: calc(100% - #{$header-scroll-width-to-remove});
@@ -352,6 +345,23 @@
     }
   }
 
+  /** Header Grouping **/
+  .slick-preheader-panel.ui-state-default  {
+    .slick-header-column {
+      border-left: $preheader-border-left;
+      border-right: $preheader-border-right;
+      border-bottom: $preheader-border-bottom;
+      border-top: $preheader-border-top;
+      font-size: $preheader-font-size;
+    }
+    .slick-header-column:first-child {
+      border-left: $preheader-border-left-first-element;
+    }
+    .slick-header-column:last-child {
+      border-right: $preheader-border-right-last-element;
+    }
+  }
+
   /** Frozen/Pinned styling */
 
   .slick-row .slick-cell.frozen:last-child,