scroll to top when view is loaded

Thread is closed for posting
3 posts, 1 answers
  1. Scott Buchanan
    Scott Buchanan avatar
    42 posts
    Member since:
    Dec 2008

    Posted 14 Dec 2015 Link to this post

    This app displays sessions at a conference.  There is a Days view, with a list of the conference days.  Selecting a day loads the Agenda view (a list of sessions), filtered for the selected day.  Suppose Sunday contains 12 sessions and Monday contains 4 and the following occurs:

    1. User selects Sunday
    2. User scrolls to the bottom of the Sunday sessions
    3. User selects the back button
    4. User selects Monday
    5. At this point the list of sessions appears empty.  They are in fact simply scrolled up to the prior position.

    The Agenda view is very simple

    <div data-role="view" data-title="NAMAS Conference" data-layout="main" data-model="APP.models.agenda" data-after-show="afterShow">
      <h1 style="margin-bottom: 0px" data-bind="html: title"></h1>
      <h2 style="margin: 0px" id="dayText"></h2>
        <input id="scrollText" type="text" />
      <ul data-role="listview" data-style="inset" data-template="agendaTemplate" data-bind="source: ds"></ul>
      <a data-role="button" data-click="submitScrollClick">Test Scroll</a>
    <script type="text/x-kendo-template" id="agendaTemplate">
      <a href="views/session.html?id=#: Sequence #">#: Start + ": " + Name #</a>

    I added the button "Test Scroll" for testing.  I have tried the methods I knew / found online with no success: 

    function submitScrollClick(){
        // 1
        // 2
        //$("html, body, #container").animate({
        //$("html, body, #container").animate({
        //            scrollTop: $("#dayText").offset().top
        //        }, 100);
        // 3
        //window.scrollTo(0, 0);
        //we are getting the event, right?

    The alert() does fire, but the other three attempts to put the list back to the top do not display the items that are present but not visible.

    How can this be accomplished?








  2. Answer
    Tsvetina avatar
    2324 posts

    Posted 17 Dec 2015 Link to this post

    Hi Scott,

    The easiest way to reset your view when you re-open it is to set data-reload="true" in the view definition. This way, it will be entirely reloaded when you open it. This is useful in such scenarios, where the data is different every time, based on previous selection.


    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

  3. Scott Buchanan
    Scott Buchanan avatar
    42 posts
    Member since:
    Dec 2008

    Posted 17 Dec 2015 in reply to Tsvetina Link to this post


    You are correct - that is easy.  Works great.  I need to spend more time learning all those configuration properties (wish they were in the AppBuilder editor "intellisense")



Back to Top