fix: auto-resize not just grid but also headers for Salesforce tabs (#1394)

* fix: auto-resize not just grid but also headers for Salesforce tabs
- when switching Tabs in Salesforce, SlickGrid has problem resizing properly, a prior auto-resize patch was put in place some time ago to call `resizeGrid()` for certain period, but with v3.0 that didn't seem to be enough since the headers were not being resized properly, so let's resize them too by calling `grid.updateColumns()` in the same auto-resize function

Author: ghiscoding

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

@@ -110,7 +110,7 @@ export interface SlickGrid {
   getActiveViewportNode(event?: Event | SlickGridEventData): HTMLDivElement;
 
   /** Get the displayed scrollbar dimensions */
-  getDisplayedScrollbarDimensions(): { height: number; width: number; }
+  getDisplayedScrollbarDimensions(): { height: number; width: number; };
 
   /** Get the canvas DOM element */
   getCanvases(): HTMLDivElement;
@@ -478,6 +478,9 @@ export interface SlickGrid {
    */
   updateColumnHeader(columnId: string | number, title?: string, toolTip?: string): void;
 
+  /** Update columns for when a hidden property has changed but the column list itself has not changed. */
+  updateColumns(): void;
+
   /** Update paging information status from the View */
   updatePagingStatusFromView(pagingInfo: PagingInfo): void;
 

packages/common/src/services/__tests__/resizer.service.spec.ts

@@ -54,6 +54,7 @@ const gridStub = {
   setPreHeaderPanelVisibility: jest.fn(),
   setOptions: jest.fn(),
   setSortColumns: jest.fn(),
+  updateColumns: jest.fn(),
   onColumnsResizeDblClick: new Slick.Event(),
   onSort: new Slick.Event(),
 } as unknown as SlickGrid;

packages/common/src/services/resizer.service.ts

@@ -685,6 +685,9 @@ export class ResizerService {
         // visible grid (shown to the user and not hidden in another Tab will have an offsetParent defined)
         if (this.checkIsGridShown() && (isResizeRequired || containerElmOffset?.left === 0 || containerElmOffset?.top === 0)) {
           await this.resizeGrid();
+          if (resizeGoodCount < 5) {
+            this._grid.updateColumns(); // also refresh header titles after grid becomes visible in new tab, this fixes an issue observed in Salesforce
+          }
 
           // make sure the grid is still visible after doing the resize
           if (this.checkIsGridShown()) {