Scrollbar missing on iPad with Virtual Scrolling

17 posts, 1 answers
  1. Josh
    Josh avatar
    29 posts
    Member since:
    Feb 2009

    Posted 06 Jun 2013 Link to this post

    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!
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 10 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Dave
    Dave avatar
    17 posts
    Member since:
    Jan 2009

    Posted 28 Aug 2013 Link to this post

    It's still an issue, so is this planned to be changed/fixed or just SOL using virtual scroll on an iPad?
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 30 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Hans
    Hans avatar
    28 posts
    Member since:
    Mar 2011

    Posted 12 Mar 2014 Link to this post

    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.

  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2894 posts

    Posted 13 Mar 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Ryan
    Ryan avatar
    14 posts
    Member since:
    Oct 2012

    Posted 09 Dec 2014 Link to this post

    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!



  8. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 11 Dec 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Ryan
    Ryan avatar
    14 posts
    Member since:
    Oct 2012

    Posted 12 Dec 2014 in reply to Dimo Link to this post

    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.


  10. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 15 Dec 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Lee
    Lee avatar
    31 posts
    Member since:
    Jun 2014

    Posted 20 Dec 2017 in reply to Dimo Link to this post

    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

  12. Angel Petrov
    Admin
    Angel Petrov avatar
    1099 posts

    Posted 22 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  13. Lee
    Lee avatar
    31 posts
    Member since:
    Jun 2014

    Posted 22 Dec 2017 in reply to Angel Petrov Link to this post

    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

  14. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 25 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  15. Lee
    Lee avatar
    31 posts
    Member since:
    Jun 2014

    Posted 27 Dec 2017 in reply to Ivan Zhekov Link to this post

    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

  16. Answer
    Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 29 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  17. Lee
    Lee avatar
    31 posts
    Member since:
    Jun 2014

    Posted 02 Jan 2018 in reply to Ivan Zhekov Link to this post

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

    Thx

    Lee

Back to Top