This is a migrated thread and some comments may be shown as answers.

Horizontal scrolling with Magic mouse on the Mac is not working correct

9 Answers 566 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Erik asked on 27 Aug 2014, 10:14 AM

Hi,

Some of our users work with our application on the Mac with the Safari with the Magic mouse. We got some issues about horizontal scolling in the RadGrid of Telerik. With this mouse it is possible to scroll horizontal without using the scrollbars by moving your finger sideways. On the content/data in the RadGrid this doesn't scroll horizontal or sometimes it only scrolls the content div(data) native without scrolling the column headers and keeping the fixed columns into place.

When we use the Magic mouse on the horizontal scrolbar area itself the scrolling works fine. We see the same behaviour in Windows with a Logitec RX1000 with horizontal scrolling possibilities on the scrollwheel(press left and right).

In our research we found out that the scrollbars behaves different dependent on the type of mouse the user is using on the Mac.
http://blog.0100.tv/2012/11/webkit-scrollbars-on-os-x/

Using the horzontal scrolling by the Magic mouse works fine on another div in our application with overflow: auto or overflow: scroll.

What can I do to solve these issues? Can this be solved for the RadGrid?

9 Answers, 1 is accepted

answered on 29 Aug 2014, 04:06 PM

Hello,

By default, Safari on Mac hides scroll bars. This is normal behavior for them. They become visible after scrolling with the mouse or hovering on them. There is one more specific thing. When RadGrid is with frozen columns we render a "fake" scroll which is a wrapper div with width equal to the grid's width and an inner div which is as wide as the data div. The data is actually scrolled using JavaScript logic. So this is not the native browser scroll. That's why you can't scroll horizontally using the Mac mouse horizontal scroll. In order to resolve the issue we would advise you to add a RadFormDecorator on the page like on the grid Scrolling demo.

Regards,
Pavlina
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 01 Sep 2014, 08:45 AM

Hi Pavlina,

Thanks for your reply on my post.

I know the html structure of the RadGrid. The issue is that only the div with the data is scrolled by horizontal scrolling the the mouse. The other divs stay at the scroll start position so the wrong column headers are shown above the visible scrolled data. The javascript to keep the divs in sync seems not fires in this case.

I searched on the internet and I found some links how to handle these events in javascript. There is even a jQuery plugin for this.
http://stackoverflow.com/questions/18202892/horizontal-mousewheel-events-for-left-and-right-wheel-spin
http://stackoverflow.com/questions/23952491/jquery-mousewheel-scroll-horizontally

So can this be implemented in the RadGrid to solve this issue?

Regards,
Erik

answered on 02 Sep 2014, 08:44 AM

Hello Erik,

The described issue can be observed and our developers will fix it as soon as possible. Meanwhile you can add the following javascript code in order to workaround it:

function onGridCreated(sender, args) {

var fakeScroll = $get(sender.get_id() + "_Frozen");

if (parseInt(fakeScroll.style.height, 10) < 12) {

fakeScroll.style.height = "17px";

}

Another option to resolve this problem as I already mentioned in the previous post is to put RadFormDecorator on the page and set the grid as decorated control.

Please excuse us once again for the inconvenience caused.

Regards,
Pavlina
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.