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

Scroll to top on view reload

8 Answers 794 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Mat
Top achievements
Rank 1
Mat asked on 22 Aug 2012, 03:37 PM
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. 

8 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 23 Aug 2012, 08:27 AM
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!
0
Yohann
Top achievements
Rank 1
answered on 14 Apr 2014, 02:17 AM
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
0
Georgi Krustev
Telerik team
answered on 15 Apr 2014, 10:52 AM
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!
 
0
Yohann
Top achievements
Rank 1
answered on 17 Apr 2014, 12:04 AM
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 :)
0
Georgi Krustev
Telerik team
answered on 17 Apr 2014, 10:44 AM
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!
 
0
Yohann
Top achievements
Rank 1
answered on 18 Apr 2014, 02:34 AM
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.
0
Petyo
Telerik team
answered on 18 Apr 2014, 08:32 AM
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!
 
0
Robby Parker
Top achievements
Rank 1
answered on 28 Jul 2015, 04:50 PM

I do it this way and it works great:

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

Tags
ListView (Mobile)
Asked by
Mat
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Yohann
Top achievements
Rank 1
Petyo
Telerik team
Robby Parker
Top achievements
Rank 1
Share this question
or