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 175 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
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

Sort by
0
Pavlina
Telerik team
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.

 
0
Erik
Top achievements
Rank 1
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
0
Pavlina
Telerik team
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.

 
0
Erik
Top achievements
Rank 1
answered on 02 Sep 2014, 09:23 AM
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?
0
Pavlina
Telerik team
answered on 04 Sep 2014, 05:22 PM
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
 

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.

 
0
Erik
Top achievements
Rank 1
answered on 05 Sep 2014, 07:03 AM
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  
0
Pavlina
Telerik team
answered on 09 Sep 2014, 12:27 PM
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
 

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.

 
0
Erik
Top achievements
Rank 1
answered on 09 Sep 2014, 12:34 PM
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
0
Pavlina
Telerik team
answered on 12 Sep 2014, 09:05 AM
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
 

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.

 
Tags
Grid
Asked by
Erik
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Erik
Top achievements
Rank 1
Share this question
or