scroll to top when view is loaded

[Scott Buchanan]

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

 

 

 

 

 

 

[Tsvetina]

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

 

 

[Scott Buchanan]

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