diff --git a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts index bea28bd56..9880c6f6a 100644 --- a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts +++ b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts @@ -336,14 +336,14 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () = expect(onAfterGridDestroyedSpy).toHaveBeenCalled(); }); - 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.frozenColumn = 3; component.ngOnInit(); component.ngAfterViewInit(); - expect(loadSpy).toHaveBeenCalled(); + expect(component.gridOptions.enableMouseWheelScrollHandler).toBeTrue(); }); describe('initialization method', () => { diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts index 5034af0e6..f956cbc80 100644 --- a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts +++ b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts @@ -2,6 +2,7 @@ // only import the necessary core lib, each will be imported on demand when enabled (via require) import 'jquery-ui-dist/jquery-ui'; import 'slickgrid/lib/jquery.event.drag-2.3.0'; +import 'slickgrid/lib/jquery.mousewheel'; import 'slickgrid/slick.core'; import 'slickgrid/slick.grid'; import 'slickgrid/slick.dataview'; @@ -272,10 +273,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn } ngOnInit(): void { - if (this.gridOptions && (this.gridOptions.frozenColumn !== undefined && this.gridOptions.frozenColumn >= 0) || (this.gridOptions.frozenRow !== undefined && this.gridOptions.frozenRow >= 0)) { - this.loadJqueryMousewheelDynamically(); - } - this.onBeforeGridCreate.emit(true); if (this.gridOptions && !this.gridOptions.enableAutoResize && (this._fixedHeight || this._fixedWidth)) { this.gridHeightString = `${this._fixedHeight}px`; @@ -384,12 +381,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn } } - 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 @@ -797,6 +788,11 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn } private initialization() { + // 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; + } + // make sure the dataset is initialized (if not it will throw an error that it cannot getLength of null) this._dataset = this._dataset || []; this.gridOptions = this.mergeGridOptions(this.gridOptions); diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts index 945f919bb..af41b5854 100644 --- a/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts +++ b/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts @@ -607,7 +607,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"', () => { diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts index 1e33e54a7..2b9988d6a 100644 --- a/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts +++ b/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts @@ -416,7 +416,7 @@ describe('headerMenuExtension', () => { instance.onCommand.notify({ column: columnsMock[0], grid: gridStub, 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(); }); @@ -429,7 +429,7 @@ describe('headerMenuExtension', () => { instance.onCommand.notify({ column: columnsMock[1], grid: gridStub, 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(); }); diff --git a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts index 9a8eeddf2..99d70b5e7 100644 --- a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts +++ b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts @@ -375,7 +375,7 @@ export class GridMenuExtension implements Extension { switch (args.command) { case 'clear-frozen-columns': const visibleColumns = [...this.sharedService.visibleColumns]; - this.sharedService.grid.setOptions({ frozenColumn: -1 }); + this.sharedService.grid.setOptions({ frozenColumn: -1, enableMouseWheelScrollHandler: false }); if (Array.isArray(visibleColumns) && Array.isArray(this.sharedService.allColumns) && visibleColumns.length !== this.sharedService.allColumns.length) { this.sharedService.grid.setColumns(visibleColumns); } diff --git a/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts index 279fd2421..7710f54f9 100644 --- a/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts +++ b/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts @@ -221,6 +221,15 @@ export class HeaderMenuExtension implements Extension { if (this.sharedService.grid && this.sharedService.grid.getColumns && this.sharedService.grid.setColumns && this.sharedService.grid.getColumnIndex) { const columnIndex = this.sharedService.grid.getColumnIndex(column.id); const currentColumns = this.sharedService.grid.getColumns() as Column[]; + + // if we're using frozen columns, we need to readjust pinning when the new hidden column is on the left pinning container + // we need to do this because SlickGrid freezes by index and has no knowledge of the columns themselves + const frozenColumnIndex = this.sharedService.gridOptions.frozenColumn || -1; + if (frozenColumnIndex >= 0 && frozenColumnIndex >= columnIndex) { + this.sharedService.grid.setOptions({ frozenColumn: frozenColumnIndex - 1 }); + } + + // then proceed with hiding the column in SlickGrid & trigger an event when done const visibleColumns = arrayRemoveItemByIndex(currentColumns, columnIndex); this.sharedService.visibleColumns = visibleColumns; this.sharedService.grid.setColumns(visibleColumns); @@ -331,7 +340,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.grid.setOptions({ frozenColumn: columnPosition } as GridOption); + this.sharedService.grid.setOptions({ frozenColumn: columnPosition, enableMouseWheelScrollHandler: true } as GridOption); // to freeze columns, we need to take only the visible columns and we also need to use setColumns() when some of them are hidden // to make sure that we only use the visible columns, not doing this would show back some of the hidden columns diff --git a/src/app/modules/angular-slickgrid/models/gridOption.interface.ts b/src/app/modules/angular-slickgrid/models/gridOption.interface.ts index 486955e40..89b85de08 100644 --- a/src/app/modules/angular-slickgrid/models/gridOption.interface.ts +++ b/src/app/modules/angular-slickgrid/models/gridOption.interface.ts @@ -249,6 +249,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;