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

[Erik]

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?

[Pavlina]

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

 

 

[Erik]

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

[Pavlina]

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

 

 

[Erik]

The provided script causes issues in my application when the grid does not need vertical scrolling. The scrollbar will always appear. When I use it my fixed column becomes very wide.

Beside that, I am not looking for a way to show the vertical scrollbar.

What does the RadFormDecorator do to the RadGridView when using it?

Can you let me know when this issue is solved by the developers?

[Pavlina]

Hi,

Using RadFormDecorator will allow you to style the fake scroll of the grid and it will become visible. What happened after you try this approach?

Unfortunately I can not say when this problem will be fixed, but you can follow the status of this item in the link below:
http://feedback.telerik.com/Project/108/Feedback/Details/137218-radgrid-horizontal-scrollbar-is-not-visible-in-safari-for-mac

Regards,
Pavlina
Telerik

 

 

[Erik]

Hi Pavlina,

I am not sure you understand my issue correct. Some mouses give the user the opportunity to scroll horizontally by the mouse wheel or a touchpad on the mouse(magic mouse). I would like the RadGrid to add support for using that way to scroll the grid horizontally.

In my opinion the scrollbar behavior on the Mac is correct because user want that and are used to that in all applications on the Mac.

Regard,
Erik  

[Pavlina]

Hello Erik,

Indeed the described problem with the grid scrolling on MAC can be observed. Our developers are aware of this behavior and will improve it for one of the future versions of Telerik.UI for ASP.NET AJAX. 

Excuse us for the inconvenience caused and do not hesitate to contact us again if you have any questions regarding our controls.

Regards,
Pavlina
Telerik

 

 

[Erik]

Hi Pavlina,

That would be great! Where can I find this item? I would like to follow that item and start use it when it is fixed.

Regards,
Erik

[Pavlina]

Hi,

You can follow the status of this item here:
http://feedback.telerik.com/Project/108/Feedback/Details/137739-horizontal-scrolling-with-magic-mouse-on-the-mac-is-not-working

Regards,
Pavlina
Telerik