Mousewheel event in row detail #618

meta-akshita-agrawal · 2020-10-29T13:44:52Z

General Topic

Your Environment

Software	Version(s)
Angular	9.0
Angular-Slickgrid	2.17
TypeScript	3.7

Context or Topic

Hi Author,

Thanks for making such a great library :). I am reporting the issue for the row detail feature in your library. I am unable to scroll row detail div through the mouse wheel. Once scrolled down(dragging with the pointer), it moves up with the mouse wheel but never down.
I am not sure if you have a solution for this or even this issue is any priority for you but I have tried everything and unable to get hold of this. If you have any workaround, it will be a big help.
The last option is that I apply a third party jquery plugin on the row detail div.

PS: Reproducible in the library itself

Steps to reproduce :

Change row count from 9 to 5 on this line
Go to the Row detail page, open any of the row detail
Try to scroll div with mouse wheel event

Expected Behavior

When the pointer is in the row detail area, the mouse wheel should scroll the row detail div rather than the table div

Current Behavior

Possible Solution

What I realized that when I inspect and remove the last 2 mouse wheel slick grid events, it starts working as expected. Maybe these 2 events are preventing the inside mouse wheel event

ghiscoding · 2020-10-29T14:21:56Z

That is most probably an issue in the core lib 6pac/SlickGrid which will have to addressed in that fork not in Angular-Slickgrid. You should try to see if you can replicate the issue in the core lib Example - Row Detail, if it's reproducible there then it's in the core lib, if not then it might be in Angular-Slickgrid (but I doubt it)

meta-akshita-agrawal · 2020-10-29T14:47:02Z

No, it's not reproducible in 6pac/Slickgrid

ghiscoding · 2020-10-29T14:52:14Z

I seriously have no time to look into this, so I would require your help in troubleshooting the issue. It might be something in the CSS styling (SASS in Angular-Slickgrid).

ghiscoding · 2020-10-29T14:58:25Z

The main difference against the core lib is that I created my own SASS styling in Angular-Slickgrid, sometime it's not fully in sync with the core lib on the styling side. You can see the full styling on this line of slick-plugins.scss file and you can also compare the styling directly in chrome. The other place to possibly look into would be the implementation of Row Detail in Angular-Slickgrid via the rowDetailViewExtension.ts, it's different compare to the core because it's specific code to load an Angular component dynamically.

I would think the issue is possibly in the SASS

meta-akshita-agrawal · 2020-10-29T14:59:12Z

Thanks, let me dig into it.

meta-akshita-agrawal · 2020-10-29T15:07:28Z

Also, wanted to know if this is any other scroll plugin in the detail view? Because the outside scroll looks like a browser scroll and the internal one looks like some another. In the core lib, it seems that both scroll bars are browsers.
Just a thought, that the scroll plugin may have created this problem.
Can I get hold of that part of the code?

ghiscoding · 2020-10-29T15:12:18Z

I don't know why that is different, but again I think it might be CSS styling but I don't know more than that. I already gave you the 2 files to look into the SASS file or the rowDetailViewExtension.ts

ghiscoding · 2020-10-29T18:27:19Z

I strongly believe it's CSS and so I changed the Angular-Slickgrid - Row Detail demo to have the scroll and posted a question on Stack Overflow here, you can refer to that SO and maybe upvote the question. Hopefully someone can answer just by looking at the live demo.

meta-akshita-agrawal · 2020-10-30T06:11:52Z

Thanks a lot. Though I commented on different parts of the CSS and tested, none changed the issue. I also tried overriding that mouse wheel event listener, that didn't work too

- when jQuery mousewheel is imported, SlickGrid attaches a scroll handler which prevent scrolling to work as normal, this however should only be used with frozen grids since it creates other issues like seen in Row Detail were it doesn't behave correctly - NOTE that this is more of a patch and a SlickGrid grid option flag would be better to handle that, possibly create a flag in future SlickGrid version

- when jQuery mousewheel is imported, SlickGrid attaches a scroll handler which prevent scrolling to work as normal, this however should only be used with frozen grids since it creates other issues like seen in Row Detail were it doesn't behave correctly - NOTE that this is more of a patch and a SlickGrid grid option flag would be better to handle that, possibly create a flag in future SlickGrid version - ref Angular-Slickgrid issue [#618](ghiscoding/Angular-Slickgrid#618)

#619) * fix(extensions): import jQuery mousewheel only with frozen, fixes #618 - when jQuery mousewheel is imported, SlickGrid attaches a scroll handler which prevent scrolling to work as normal, this however should only be used with frozen grids since it creates other issues like seen in Row Detail were it doesn't behave correctly - NOTE that this is more of a patch and a SlickGrid grid option flag would be better to handle that, possibly create a flag in future SlickGrid version

ghiscoding · 2020-11-02T16:53:15Z

Pushed a patch for this under the new release v.2.23.x. I say it's a patch since a better implementation would be to add a new flag in SlickGrid (core) to disable the mousewheel scroll handler (which is what causes this issue and was answered in the SO question), right now I'm only importing the jquery.mousewheel.js if your grid uses the frozen (pinning) feature but it's not a full fix because as soon as it loaded once it stays loaded and that will still cause the problem.

So anyway, the patch is available under the new release v.2.23.x

If you like the lib and haven't already upvoted, please do so ⭐
Thanks

- when using TypeScript, we must always import the mousewheel jquery lib even if we don't need it because TypeScript does not yet support dynamic import. So providing a grid option to only use the mousewheel handler when we really want it is the only bulletproof way to only use that handler only when we really need it (typically when using a frozen grid) - ref Angular-Slickgrid [issue](ghiscoding/Angular-Slickgrid#618)

…555) * feat: add enableMouseWheelScrollHandler option to allow dynamic load - when using TypeScript, we must always import the mousewheel jquery lib even if we don't need it because TypeScript does not yet support dynamic import. So providing a grid option to only use the mousewheel handler when we really want it is the only bulletproof way to only use that handler only when we really need it (typically when using a frozen grid) - ref Angular-Slickgrid [issue](ghiscoding/Angular-Slickgrid#618) * refactor: dynamically add mousewheel scrolling handler on setOptions

ghiscoding · 2020-12-02T21:47:26Z

There is now a new grid option flag called enableMouseWheelScrollHandler in the SlickGrid core lib which you can use to enable/disable the mousewheel scroll, it will automatically enable the flag when detecting the grid as being a frozen grid, any other grid will expect this flag to be disabled and won't interfere with the Row Detail plugin. There was 2 PRs made to fix this, the 1st PR was more of a temporary fix while the the 2nd one is a permanent fix.

Cheers ⭐

ghiscoding added bug open to contribution labels Oct 29, 2020

ghiscoding mentioned this issue Oct 30, 2020

fix(extensions): import jQuery mousewheel only with frozen, fixes #618 #619

Merged

ghiscoding added wip and removed open to contribution labels Oct 31, 2020

ghiscoding mentioned this issue Oct 31, 2020

fix(extensions): import jQuery mousewheel only with frozen ghiscoding/aurelia-slickgrid#450

Merged

ghiscoding closed this as completed in #619 Nov 2, 2020

ghiscoding mentioned this issue Nov 25, 2020

feat: add enableMouseWheelScrollHandler option to allow dynamic load 6pac/SlickGrid#555

Merged

ghiscoding mentioned this issue Nov 30, 2020

feat(core): add enableMouseWheelScrollHandler grid option #641

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mousewheel event in row detail #618

Mousewheel event in row detail #618

meta-akshita-agrawal commented Oct 29, 2020 •

edited

Loading

ghiscoding commented Oct 29, 2020

meta-akshita-agrawal commented Oct 29, 2020

ghiscoding commented Oct 29, 2020

ghiscoding commented Oct 29, 2020

meta-akshita-agrawal commented Oct 29, 2020

meta-akshita-agrawal commented Oct 29, 2020 •

edited

Loading

ghiscoding commented Oct 29, 2020

ghiscoding commented Oct 29, 2020 •

edited

Loading

meta-akshita-agrawal commented Oct 30, 2020 •

edited

Loading

ghiscoding commented Nov 2, 2020

ghiscoding commented Dec 2, 2020 •

edited

Loading

Mousewheel event in row detail #618

Mousewheel event in row detail #618

Comments

meta-akshita-agrawal commented Oct 29, 2020 • edited Loading

General Topic

Your Environment

Context or Topic

Expected Behavior

Current Behavior

Possible Solution

ghiscoding commented Oct 29, 2020

meta-akshita-agrawal commented Oct 29, 2020

ghiscoding commented Oct 29, 2020

ghiscoding commented Oct 29, 2020

meta-akshita-agrawal commented Oct 29, 2020

meta-akshita-agrawal commented Oct 29, 2020 • edited Loading

ghiscoding commented Oct 29, 2020

ghiscoding commented Oct 29, 2020 • edited Loading

meta-akshita-agrawal commented Oct 30, 2020 • edited Loading

ghiscoding commented Nov 2, 2020

ghiscoding commented Dec 2, 2020 • edited Loading

meta-akshita-agrawal commented Oct 29, 2020 •

edited

Loading

meta-akshita-agrawal commented Oct 29, 2020 •

edited

Loading

ghiscoding commented Oct 29, 2020 •

edited

Loading

meta-akshita-agrawal commented Oct 30, 2020 •

edited

Loading

ghiscoding commented Dec 2, 2020 •

edited

Loading