How to scroll to bottom in code on a View or ListView in Kendo UI Mobile?

4 posts, 0 answers
  1. Christoph
    Christoph avatar
    15 posts
    Member since:
    Aug 2013

    Posted 25 Nov 2013 Link to this post

    I have the need that I trigger a scroll to bottom once a new line gets added to the listview. This should be triggered by code but so far I have not found a good solution.

    So far my solution is:
    scrollViewToBottom: function (view) {
                var scroller = view.scroller;
                console.log("scrollheight " + scroller.scrollHeight() + " height: " + scroller.height());
                var offset = scroller.height();
                if (offset == 0)
                    offset = 100;
                scroller.scrollTo(0, scroller.scrollHeight() * -1 + offset);
            },

    but this does not work in most scenarious because scroller.scrollHeight and scroller.height don't seem to be initialized.

    Is there any better solution to this?

    Christoph
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 28 Nov 2013 Link to this post

    Hi Christoph,

    the code you have posted should work in general. I tested it in this jsbin sample, and it scrolls as expected. Am I missing something?

    Regards,
    Petyo
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Kendo UI is VS 2017 Ready
  4. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 05 Jun 2014 in reply to Christoph Link to this post

    I have a similar situation where I have a chat like application and need to scroll to the bottom and was wondering how the scroller.height() would ever be 0 and why you would set the offset to 100 if it's 0?  I ended up using something like the following to scroll to the bottom.

    function scrollToBottom() {
        // topOffset set when the view loads like the following
        // var topOffset = scroller.find(".km-scroll-container").position().top
     
        var usingNativeScrolling = app.view().element.data("use-native-scrolling");
        var scroller = app.view().scroller;
     
        if (usingNativeScrolling) {
            $("#myReplyBoxAtTheBottom")[0].scrollIntoView();
        } else {
            var scrollerHeight = scroller.scrollHeight();
            var viewportHeight = scroller.height();
     
            if ((scrollerHeight + topOffset) > viewportHeight) {
                var position = -1 * (scrollerHeight - viewportHeight - topOffset);
                scroller.animatedScrollTo(0, position);
            }
        }
    }

    So in my case in iOS and Android scrolling doesn't work correctly when the on screen keyboard is dismissed so I had to enable native scrolling and this breaks scroller.height() method so I had to find another way and in this case the scrollIntoView method seems to work in native mode but not in non-native mode.  I'm wondering why this is the case because I would prefer to eliminate all the extra calculation.

    It would be really nice if Telerik would just add a scrollToBottom method to the scroller.

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 10 Jun 2014 Link to this post

    Hi Christoph,

    The functionality that you are looking for is not supported. However I would like to encourage you to visit our UserVoice section, where you can share your suggestion and if it gets popular we will see it implemented in a future release.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready