perf(resizer): autosizeColumns is called too many times on page load

Author: ghiscoding-SE

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts

@@ -564,6 +564,20 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         sharedService.slickGrid = mockGrid as unknown as SlickGrid;
       });
 
+      it('should expect "autosizeColumns" being called when "autoFitColumnsOnFirstLoad" is set we udpated the dataset', () => {
+        const autosizeSpy = jest.spyOn(mockGrid, 'autosizeColumns');
+        const refreshSpy = jest.spyOn(component, 'refreshGridData');
+        const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }];
+        jest.spyOn(mockDataView, 'getLength').mockReturnValueOnce(0).mockReturnValueOnce(0).mockReturnValueOnce(mockData.length);
+
+        component.ngAfterViewInit();
+        component.gridOptions = { autoFitColumnsOnFirstLoad: true };
+        component.setData(mockData, true); // manually force an autoresize
+
+        expect(autosizeSpy).toHaveBeenCalledTimes(2); // 1x by datasetChanged and 1x by bindResizeHook
+        expect(refreshSpy).toHaveBeenCalledWith(mockData);
+      });
+
       it('should expect "autosizeColumns" being called when "autoFitColumnsOnFirstLoad" is set and we are on first page load', () => {
         const autosizeSpy = jest.spyOn(mockGrid, 'autosizeColumns');
         const refreshSpy = jest.spyOn(component, 'refreshGridData');
@@ -574,7 +588,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         component.gridOptions = { autoFitColumnsOnFirstLoad: true };
         component.dataset = mockData;
 
-        expect(autosizeSpy).toHaveBeenCalledTimes(3); // 1x by datasetChanged and 2x by bindResizeHook
+        expect(autosizeSpy).toHaveBeenCalledTimes(1);
         expect(refreshSpy).toHaveBeenCalledWith(mockData);
       });
 

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -102,6 +102,7 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
   protected _eventPubSubService!: EventPubSubService;
   protected _angularGridInstances: AngularGridInstance | undefined;
   protected _hideHeaderRowAfterPageLoad = false;
+  protected _isAutosizeColsCalled = false;
   protected _isGridInitialized = false;
   protected _isDatasetInitialized = false;
   protected _isDatasetHierarchicalInitialized = false;
@@ -187,7 +188,7 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
 
   @Input()
   get dataset(): any[] {
-    return (this.customDataView ? this.slickGrid?.getData?.() : this.dataView?.getItems?.()) || [];
+    return (this.customDataView ? this.slickGrid?.getData?.() : this.dataView?.getItems()) || [];
   }
   set dataset(newDataset: any[]) {
     const prevDatasetLn = this._currentDatasetLength;
@@ -205,8 +206,9 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
 
     // expand/autofit columns on first page load
     // we can assume that if the prevDataset was empty then we are on first load
-    if (this.gridOptions?.autoFitColumnsOnFirstLoad && prevDatasetLn === 0) {
+    if (this.slickGrid && this.gridOptions?.autoFitColumnsOnFirstLoad && prevDatasetLn === 0 && !this._isAutosizeColsCalled) {
       this.slickGrid.autosizeColumns();
+      this._isAutosizeColsCalled = true;
     }
   }
 
@@ -468,6 +470,7 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
   initialization(eventHandler: SlickEventHandler) {
     this.gridOptions.translater = this.translaterService;
     this._eventHandler = eventHandler;
+    this._isAutosizeColsCalled = false;
 
     // when detecting a frozen grid, we'll automatically enable the mousewheel scroll handler so that we can scroll from both left/right frozen containers
     if (this.gridOptions && ((this.gridOptions.frozenRow !== undefined && this.gridOptions.frozenRow >= 0) || this.gridOptions.frozenColumn !== undefined && this.gridOptions.frozenColumn >= 0) && this.gridOptions.enableMouseWheelScrollHandler === undefined) {
@@ -755,6 +758,14 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
     }
   }
 
+  setData(data: TData[], shouldAutosizeColumns = false) {
+    if (shouldAutosizeColumns) {
+      this._isAutosizeColsCalled = false;
+      this._currentDatasetLength = 0;
+    }
+    this.dataset = data || [];
+  }
+
   /**
    * Check if there's any Pagination Presets defined in the Grid Options,
    * if there are then load them in the paginationOptions object
@@ -1004,21 +1015,17 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
       throw new Error(`[Angular-Slickgrid] You cannot enable both autosize/fit viewport & resize by content, you must choose which resize technique to use. You can enable these 2 options ("autoFitColumnsOnFirstLoad" and "enableAutoSizeColumns") OR these other 2 options ("autosizeColumnsByCellContentOnFirstLoad" and "enableAutoResizeColumnsByCellContent").`);
     }
 
-    // expand/autofit columns on first page load
-    if (grid && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns) {
-      grid.autosizeColumns();
-    }
-
     // auto-resize grid on browser resize
     if (options.gridHeight || options.gridWidth) {
       this.resizerService.resizeGrid(0, { height: options.gridHeight, width: options.gridWidth });
     } else {
       this.resizerService.resizeGrid();
     }
-    if (options.enableAutoResize) {
-      if (grid && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns) {
-        grid.autosizeColumns();
-      }
+
+    // expand/autofit columns on first page load
+    if (grid && options?.enableAutoResize && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns && !this._isAutosizeColsCalled) {
+      grid.autosizeColumns();
+      this._isAutosizeColsCalled = true;
     }
   }