Enable horizontal grid scrolling with mouse wheel

[Jose Maria Santos Gamero]

Hello. I want to scroll the grid horizontally by using the mouse wheel. I also want this to be enabled only when no vertical scroll is shown. Is there any way of achieving this by using grid settings?

If not, I am trying to handle this by manipulating the ".k-grid-content" element. But I am trying to access this element inside a directive with:

  ngAfterViewInit(): void {
    console.log(this.el.nativeElement.querySelectorAll('.k-grid-content'));
  }

Or with Renderer2:

this.renderer2.listen('.k-grid-content', 'wheel', (event) => {
      console.log('WHEEL: ', event);
});

But it is not working. Is it possible to access that element inside my directive?

Thank you.

[Slavena]

Hello Jose,

Thank you for the provided details.

The desired functionality could be achieved by implementing the wheel browser event in addition to some custom logic that is demonstrated in the following Stackblitz example:

https://stackblitz.com/edit/angular-dejnb8?file=app/app.component.ts

The element's scrollHeight and clientHeight properties are used to determine whether a vertical scrollbar is present:

 

if (gridContent.scrollHeight <= gridContent.clientHeight)

 

Please note that the approach isn't supported as a built - in feature. Instead it is dependent on the specific use-case scenario logic and should be used at the discretion of the developer.

I hope this steers you in the right direction. Let me know if further assistance is required on this case.

Regards,
Slavena
Progress Telerik