Scroll to top on view reload

9 posts, 0 answers
  1. Mat
    Mat avatar
    7 posts
    Member since:
    Jul 2012

    Posted 22 Aug 2012 Link to this post

    When loading data into a List View I need the list to scroll back to the top when a user leaves the view and then returns.

    $('.km-scroll-container').css("-webkit-transform", "translate3d(0px, 0px, 0px)");

    Has worked to allow the lists to appear to be reloaded at the start of the view but when scrolled the scroller jumps back to its previous point. 
  2.
  3. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 23 Aug 2012 Link to this post

    Hello Mat,

     
    I will suggest you use the reset method of the scroller. It will scroll the listview to the top.

    All the best,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 13 Apr 2014 in reply to Georgi Krustev Link to this post

    I have been trying this refering to the documentation you have mentioned without luck.

    When I do

    $("#list-container").kendoMobileListView({<br>            template : template,<br>            dataSource: kendo.data.DataSource.create( JSON.parse( getItem("events") ) )<br>        });<br><br>        //Scroll up automatically<br>       $("#list-container").data("kendoMobileScroller").animatedScrollTo(-100, -100);


    My List view is populated but I receive the following error message:

    Uncaught TypeError: Cannot call method 'animatedScrollTo' of undefined

    When I retry replace the last line by :

    $("#list-container").data("kendoMobileListView").animatedScrollTo(-100, -100);

    It doesn't work as well.

    Why is this happening ?

    Also, thanks to your post, I have discovered the scroller. Since I am not using many functionalities of the listview, is better to use the scroller instead of the listview (In term of perf ? ) ?

    Many Thanks
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 15 Apr 2014 Link to this post

    Hello Yohann,

    I would suggest you check the documentation of Kendo Mobile Scroller and more specifically the scrollTo method. I believe this is what you need to scroll the page.

    With regards to your second question, you probably will need to review the supported features of Kendo Mobile ListView and determine whether they are required or not. If you do not need any of them, but just to scroll a content then probably you can use only the scroller.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 16 Apr 2014 in reply to Georgi Krustev Link to this post

    Thanks for your quick answer.

    Not sure if you noticed but I'm working with a listview and NOT a scrollview

    apparently, listview don't have animatedScrollTo nor scrollTo as the console tells me "cannot red property "scrollTo" of undefined", the same with animatedScrollTo

    Therefore, doing :

    $("#list-container").data("kendoMobileScroller").scrollTo(-30, -30);

    Or

    $("#list-container").data("kendoMobileListView").scrollTo(-30, -30);


    do not work.

    So how can I scroll to the top of my LISTview ?

    Thank you :)
  11. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 17 Apr 2014 Link to this post

    Hi,

    You can get the scroller of the view using listview's scroller method:
    var listview = $("#listview").data("kendoMobileListView");
     
    var scroller = listview.scroller();
     
    //use scroller to scroll the page.
    Here is a simple Kendo Scratchpad demo showing how to get the scroller.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 17 Apr 2014 in reply to Georgi Krustev Link to this post

    YES ! That was it :)

    Just a last quick little question.

    I've been looking all over the documentation but couldn't find the little trick you gave me. Where was it ?

    Thank you very much.
  14.
  15. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 18 Apr 2014 Link to this post

    Hello Mat,

    Indeed, the method suggested by Georgi is not documented yet. Another straightforward (and documented one) alternative would be to use the application scroller method - it should work the same way.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Robby Parker
    Robby Parker avatar
    18 posts
    Member since:
    Jul 2012

    Posted 28 Jul 2015 Link to this post

    I do it this way and it works great:

    $("#listView").kendoMobileListView({
        dataSource: myDatasource,
        template: $("#listviewTemplate").text(),
        dataBound: function() {
            this.scroller().reset();
        }
    });

Back to Top