This is a migrated thread and some comments may be shown as answers.

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

3 Answers 480 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Christoph
Top achievements
Rank 2
Christoph asked on 25 Nov 2013, 09:11 AM
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

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 28 Nov 2013, 06:53 AM
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.
0
RES
Top achievements
Rank 1
answered on 05 Jun 2014, 06:12 PM
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.

0
Kiril Nikolov
Telerik team
answered on 10 Jun 2014, 07:51 AM
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!
 
Tags
General Discussions
Asked by
Christoph
Top achievements
Rank 2
Answers by
Petyo
Telerik team
RES
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question
or