Scrollbar missing on iPad with Virtual Scrolling

[Josh]

I have a KendoGrid with Virtual Scrolling enabled.  When I view my site on an iPad, the scrollbar is missing from the grid, and the "flick" scrolling effect does not work.  The Grid scrolls a down a few items then stops when I try to flick to scroll.  

You can see this behavior by pulling up the Scrolling Virtualization demo on an iPad:
http://demos.kendoui.com/web/grid/virtualization-remote-data.html

Thank you for your help!

[Alexander Valchev]

Hi Joshua,

When virtual scrolling is enabled, the Grid does not use standard scroller of the device, which is why the scrollbar is not visible and does not have a flick/bounce effects. On the other hand you should not have issue with displaying/requesting the data items.

Regards,
Alexander Valchev
Telerik

[Dave]

It's still an issue, so is this planned to be changed/fixed or just SOL using virtual scroll on an iPad?

[Alexander Valchev]

Hello Dave,

The behaviour is expected for Grid with virtual scroller. I am afraid that changing it is not in our immediate plans. Please accept my apology for the inconvenience caused.

Regards,
Alexander Valchev
Telerik

[Hans]

Is there already a proper solution for this matter?

I.e. It is visually not clear at all for users on an IPad that there is more data available when using virtual scroller in the grid. Especially when the row (height) exactly ends aligned to the bottom of the grid. There is also no indication like with regular paging (i.e. 10-20 of 100 items).

Is you look at the "Virtualization of remote data" demo for the web grid on an IPad, it looks like there are only 15 rows available (no visual indicators), while from a desktop browser, it is clear since there is a scroll bar.

[Alexander Valchev]

Hello Hans,

The native iOS scroller is not always visible as well. I fully understand your concern however this is UI pattern introduced by Apple itself. You can test this yourself - open a random web page on iOS device (for example - http://www.usatoday.com/) and note that the scroller is not visible initially - it popus up when the user starts dragging and disappears shortly after user stops.
If you want to give a hint to the users that Grid contains more items you can put a message somewhere on the page.

Regards,
Alexander Valchev
Telerik

 

 

[Ryan]

This is definitely an issue on all mobile devices we tested on!  

As an example, if you set virtual:false and try scrolling a grid in Android, a nice blue scrollbar appears at the right and scrolling is smooth.

However setting virtual:true breaks consistency -- no scrollbar appears at all and trying to touch scroll is like dragging your finger through concrete.  The expected behavior is that in the first page of results, the blue scrollbar appears just as if you had virtual:false.  Then when you hit the end of the scroll buffer, the next page is loaded via ajax, and the scrollbar should shrink a bit indicating the buffer has been made larger.

I watched what was happening in the web inspector and with virtual:true, kendo fails to add a "km-scroll-container" like it does when there is virtual:false.

Please fix this to make virtual scrolling usable on mobile devices!

[Dimo]

Hello Ryan,

The virtual scrolling cannot work with the Kendo UI Scroller, that's why we use drag and drop for the data table.

I made a quick test with our online demos, and the behavior with regard to the visibility of the scrollbar is identical when virtual scrolling is enabled and when it is disabled.

Nexus 7 / Android 4.4.4 - a scrollbar appears during scrolling in both cases
iPad 4 / iOS 8 - a scrollbar does not appear during scrolling in either case

Generally, virtual scrolling is not usable on mobile devices for another reason - since the user cannot grab and drag the scrollbar "thumb", (s)he can practically never reach the bottom of the Grid if there are too many pages. If you go to the following demo and try reaching the bottom of the Grid by only using the mouse wheel, you will see what I mean.

http://demos.telerik.com/kendo-ui/grid/virtualization-local-data

Regards,
Dimo
Telerik

[Ryan]

First, a Nexus 7 is special in that it only has Chrome installed.  If you test on the default Android browser the vast majority of devices use, you will see there is a scrollbar in normal and not one in virtual (i tested this in your online demos).  And if you are packaging kendo in a Cordova android app you can bet most devices that install it aren't going to have the Chrome based canvas.

Second, create a test where you run both tests on grids with identical pageSize settings.  Say I have my grid with a pageSize of 30 (so there is a buffer).  When virtual=false, in the default Android browser, you can smoothly scroll down to the point at which it stops.

Now say you change virtual=true.  When the grid loads, it is going to load all 30 records and there will be a buffer just like before.  The expected behavior is that, since those 30 are loaded, you should have the exact same smooth scrolling experience while you scroll down to the bottom.  The only difference in virtual should be that when you reach the bottom, Kendo detects it and shows the "waiting" spinner and loads the next chunk of 30 records.

I am not saying anyone on a mobile device would ever grab a scrollbar.  But it is expected that it should appear when scrolling (it does not in the default Android browser).  

Really though I don't care as much about the scrollbar as I do the smoothness of scrolling the records that have already been loaded.  To be usable on a mobile device, the scrolling of the content that is loaded locally needs to be smooth.  But it virtual mode it is horrific and not the expected behavior.

[Dimo]

Hello Ryan,

According to web specifications, the browser should stop firing touch events, which originate from an element that has been removed from the DOM. During virtual scrolling, the table is re-rendered while the user moves through the "pages", which effectively stops the dragging. If you use a larger page size, the re-rendering will occur more rarely and scrolling will be smoother.

Regards,
Dimo
Telerik

 

 

[Lee]

Is there a fix for this.  I'm having the same issue.  I'm not using virtual:

        .Scrollable(scrl => scrl.Enabled(true).Virtual(false))
Whenever I use the device emulator in Chrome to view the page in ipad, iphone, galaxy, whatever device I select, my scroll bars disappear and if the grid is full I cannot scroll left/right or up/down.  I'm using kendo.mvc 2016.1.112.545

Thanks

Lee

[Angel Petrov]

Hi Lee,

As my colleague Dimo mentioned in one of the previous replies. When using iPad the scroll does not appear not matter whether virtual scrolling is enabled or not and the experienced behavior is expected.

Regards,
Angel Petrov
Progress Telerik

[Lee]

yes I understand that, but regardless of whether or not the scroll bar is visible or not I should be able to scroll by clicking on an area of the grid and dragging my finger up/down (in an emulator I'm dragging my mouse up/down) and the data "scrolls" up/down or drag left/right to scroll to the left or right.  This is not occurring which is making the grid unfunctional.  If the grid is not full (in which case I don't need to scroll down) and there is a blank area beneath the rows, I can "grab" that area and scroll left/right.  I don't believe this could be intended that there is no way to "scroll" up/down left/right if your grid is full.  I know this is complex to describe, if you like I can move this to a helpdesk ticket and we can setup a remote session for you to see what I'm talking about?

 

Thanks

Lee

[Ivan Zhekov]

Hello, Lee.

There is a quick way to determine if the issue is happening on a global scale (i.e. a bug that applies to all usages) or something specific to your case (i.e. a localized bug or a problem with the configuration): open kendo demos-- https://demos.telerik.com/kendo-ui/grid/index -- and if the behaviour you described is present there, then we'll log it as a bug and fix it.

If the behaviour is not present there, you should start a new support thread and provide some details how we can simulate the same behaviour locally. Ideally, attach a test case, or create one using dojo.telerik.com. Then and only then we can tell exactly what's happening.

This is a three year old thread and the information prior your reply may or may not be relevant, so starting a new thread is the best way to tackle this issue.

Regards,
Ivan Zhekov
Progress Telerik

[Lee]

I'm using mvc so I tested using the mvc demo instead of the kendo-ui one.  At first I could not recreate it with the main generic grid one.  That grid isn't using very many grid features.  So I commented out most of the grid features in my code until I found the specific one that was causing the issue.  It is the .Selectable.  When I turn that off the grid works.  When I turn it on, it doesn't.  And I can recreate this when I go to your mvc demo for selection and test it.  

https://demos.telerik.com/aspnet-mvc/grid/selection

Thanks

Lee

[Ivan Zhekov]

Hello, Lee.

When the selectable property is set to "multiple", the grid can not be scroallbe on mobile devices, because both the scrolling and the selection are listening to the same event.

This is well known limitation outlined in our documentation: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/selectable.

Regards,
Ivan Zhekov
Progress Telerik

[Lee]

Makes sense.  Thanks for info.  Issue also seems to be applicable if using single selection.  You might want to update the doc.

Thx

Lee