Scroll to top on view reload

[Mat]

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. 

[Georgi Krustev]

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

[Yohann]

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

[Georgi Krustev]

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

 

 

[Yohann]

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 :)

[Georgi Krustev]

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

 

 

[Yohann]

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.

[Petyo]

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

 

 

[Robby Parker]

I do it this way and it works great:

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