How do you clear and reset an Endless Scrolling ListView?

2 posts, 0 answers
  1. Derrick
    Derrick avatar
    4 posts
    Member since:
    Jun 2013

    Posted 18 Dec 2013 Link to this post

    I am implementing an Endless Scrolling list view.  I would like to persist the list data items and position when I navigate to a detail view and return.  This works.  I would also like to be able to completely reset the Endless Scrolling list view when I go back to the main app view and return to the Endless Scrolling ListView, just like I had set the Endless Scrolling view itself to data-reload="true".  This is not working for me.

    I can reset and clear a normal ListView like this;

    contactListSource = new kendo.data.DataSource.create({data:[]});
    $("#contacts_list_search_results").kendoMobileListView({
    dataSource: contactListSource,
    template: $("#contact_list_item_template").html()
    });


    The paging functionality complicates the clear with the Endless Scrolling list and causes issues when I try to reset the ListView.  The next time I come back to the Endless Scrool List the display starts in the middle of the list, and the first records from the list often don't get displayed. This is what I have so far to clear and rest (it only works if I have not scrolled on the original list, so I believe the issue has to do with a persisted scroll position):

                        $(".km-scroll-container").css("-webkit-transform", "");
                        $("#contacts_list_search_results").data("kendoMobileListView").dataSource.data([]);
                        $("#contacts_list_search_results").data("kendoMobileListView").dataSource._page=1;
                        $("#contacts_list_search_results").data("kendoMobileListView").dataSource._skip=0;

    How is it possible to completely clear and reset and Endless Scrolling list view?

    Thanks,
    Derrick
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 20 Dec 2013 Link to this post

    Hello Derrick,

    If you want to reset the widget you should read the first page of its dataSource and reset its scroller. For example:
    var listview = $("#endless-scrolling").data("kendoMobileListView");
    listview.dataSource.page(0); //request the first page
    listview.scroller().reset(); //reset the scroller

    In case you want to clear the DataSource (e.g. no information to be displayed) you should create a new DataSource instance and set it through the setDataSource method.
    The scroller have to be reset too.

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