scroll to top when view is loaded

3 posts, 1 answers
  1. Scott Buchanan
    Scott Buchanan avatar
    38 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>
    </div>
    <script type="text/x-kendo-template" id="agendaTemplate">
      <a href="views/session.html?id=#: Sequence #">#: Start + ": " + Name #</a>
    </script>

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

    function submitScrollClick(){
        // 1
        //document.getElementById("dayText").focus();
        //document.getElementById("scrollText").scrollIntoView();
     
        // 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?
        //alert("Click!");
        }

    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?

    Best,
    Scott

     

     

     

     

     

     

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1873 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.

    Regards,
    Tsvetina
    Telerik
     

    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
    38 posts
    Member since:
    Dec 2008

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

    Tsvetina,

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

    Thanks,
    Scott 

     

Back to Top