feat(core): add enableMouseWheelScrollHandler grid option

packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts

@@ -602,7 +602,7 @@ describe('gridMenuExtension', () => {
 
         expect(onCommandSpy).toHaveBeenCalled();
         expect(setColumnsSpy).toHaveBeenCalled();
-        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1 });
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, enableMouseWheelScrollHandler: false });
       });
 
       it('should call "clearFilters" and dataview refresh when the command triggered is "clear-filter"', () => {

packages/common/src/extensions/__tests__/headerMenuExtension.spec.ts

@@ -421,7 +421,7 @@ describe('headerMenuExtension', () => {
         instance.onCommand!.notify({ column: columnsMock[0], grid: gridStub, command: 'freeze-columns', item: { command: 'freeze-columns' } }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
-        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 0 });
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 0, enableMouseWheelScrollHandler: true });
         expect(setColumnsSpy).toHaveBeenCalled();
       });
 
@@ -434,7 +434,7 @@ describe('headerMenuExtension', () => {
         instance.onCommand!.notify({ column: columnsMock[1], grid: gridStub, command: 'freeze-columns', item: { command: 'freeze-columns' } }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
-        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1 });
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, enableMouseWheelScrollHandler: true });
         expect(setColumnsSpy).toHaveBeenCalled();
       });
 

packages/common/src/extensions/gridMenuExtension.ts

@@ -400,7 +400,7 @@ export class GridMenuExtension implements Extension {
       switch (args.command) {
         case 'clear-frozen-columns':
           const visibleColumns = [...this.sharedService.visibleColumns];
-          this.sharedService.slickGrid.setOptions({ frozenColumn: -1 });
+          this.sharedService.slickGrid.setOptions({ frozenColumn: -1, enableMouseWheelScrollHandler: false });
           if (Array.isArray(visibleColumns) && Array.isArray(this.sharedService.allColumns) && visibleColumns.length !== this.sharedService.allColumns.length) {
             this.sharedService.slickGrid.setColumns(visibleColumns);
           }

packages/common/src/extensions/headerMenuExtension.ts

@@ -352,7 +352,7 @@ export class HeaderMenuExtension implements Extension {
         case 'freeze-columns':
           const visibleColumns = [...this.sharedService.visibleColumns];
           const columnPosition = visibleColumns.findIndex((col) => col.id === args.column.id);
-          this.sharedService.slickGrid.setOptions({ frozenColumn: columnPosition });
+          this.sharedService.slickGrid.setOptions({ frozenColumn: columnPosition, enableMouseWheelScrollHandler: true });
           this.sharedService.frozenVisibleColumnId = args.column.id;
 
           // to freeze columns, we need to take only the visible columns and we also need to use setColumns() when some of them are hidden

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

@@ -268,6 +268,14 @@ export interface GridOption {
   /** Do we want to enable a styling effect when hovering any row from the grid? */
   enableMouseHoverHighlightRow?: boolean;
 
+  /**
+   * Do we want to always enable the mousewheel scroll handler?
+   * In other words, do we want the mouse scrolling would work from anywhere.
+   * Typically we should only enable it when using a Frozen/Pinned grid and if it does detect it to be a frozen grid,
+   * then it will automatically enable the scroll handler if this flag was originally set to undefined (which it is by default unless the user specifically disabled it).
+   */
+  enableMouseWheelScrollHandler?: boolean;
+
   /** Do we want to enable pagination? Currently only works with a Backend Service API */
   enablePagination?: boolean;
 

packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid.spec.ts

@@ -334,12 +334,12 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
     expect(component.isGridInitialized).toBeTruthy();
   });
 
-  it('should load jQuery mousewheel when using a frozen grid', () => {
-    const loadSpy = jest.spyOn(component, 'loadJqueryMousewheelDynamically');
+  it('should load enable jquery mousewheel scrolling when using a frozen grid', () => {
+    component.gridOptions.enableMouseWheelScrollHandler = undefined;
     component.gridOptions.frozenRow = 3;
     component.initialization(divContainer, slickEventHandler);
 
-    expect(loadSpy).toHaveBeenCalled();
+    expect(component.gridOptions.enableMouseWheelScrollHandler).toBeTrue();
   });
 
   it('should keep frozen column index reference (via frozenVisibleColumnId) when grid is a frozen grid', () => {

packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts

@@ -425,8 +425,9 @@ export class SlickVanillaGridBundle {
   }
 
   initialization(gridContainerElm: HTMLElement, eventHandler: SlickEventHandler) {
-    if ((this.gridOptions?.frozenRow !== undefined && this.gridOptions.frozenRow >= 0) || this.gridOptions?.frozenColumn !== undefined && this.gridOptions.frozenColumn >= 0) {
-      this.loadJqueryMousewheelDynamically();
+    // 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) {
+      this.gridOptions.enableMouseWheelScrollHandler = true;
     }
 
     // create the slickgrid container and add it to the user's grid container
@@ -939,12 +940,6 @@ export class SlickVanillaGridBundle {
     }
   }
 
-  loadJqueryMousewheelDynamically() {
-    // load jQuery mousewheel only when using a frozen grid (this will make the mousewheel work on any side of the frozen container).
-    // DO NOT USE with Row Detail
-    require('slickgrid/lib/jquery.mousewheel');
-  }
-
   /**
    * On a Pagination changed, we will trigger a Grid State changed with the new pagination info
    * Also if we use Row Selection or the Checkbox Selector, we need to reset any selection