locked
What event can I trap when attempt scrolling past the end of WinJS.UI.ListView?

    Question

  • My ListView scrolls beautifully but I need to trap some event when the user is trying to scroll past the beginning or end of the ListView items. Right now the ListView just jerks to the left or right and snaps back into place. I need to refill the datasource with new content...
    Thursday, November 08, 2012 8:56 AM

Answers

  • OK, if I understand you correctly, you're looking for an event in response to which you can request the next ten items and populate your data source, so that the ListView then updates and shows those new items.

    Because the ListView lacks such an event, what you're really looking at here is implementing your own data source that will be asked for those next items when you use the incremental loading behavior. That is, if you set loadingBehavior to incremental, set automaticallyLoadPages to true, set pagesToLoadThreshold to 1, and pagesToLoad to 1 (meaning load 1 more page when the last item is on the last page), then the data source will receive a request to provide that next 1 page of items.

    To do a custom data source, refer to the HTML ListView working with data sources sample. Look specifically at Scenario 4, which shows how to bring data down from a service a little at a time just as you need to do. I give a little more overview in the "Custom Data Sources" section of Chapter 5 in my book, and there's a talk from //Build 2011 on the mechanisms, http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-210T. (A few details have changed, but the concepts are the same.)

    .Kraig

    • Marked as answer by Ydnorok Wednesday, November 14, 2012 5:00 AM
    Tuesday, November 13, 2012 10:21 PM

All replies

  • For this you want to use incremental loading with the ListView by setting its loadingBehavior property to "incremental". You then set the pagesToLoad, automaticallyLoadPages, and pagesToLoadThreshold properties as needed for the specific behavior you want.

    I describe this on page 225 (the "Incremental Loading" section) in my free ebook, Programming Windows 8 Apps with HTML, CSS, and JavaScript, available here. In there I also refer to the ListView loading behaviors sample, scenarios 2 and 3, which provide the reference code for this.

    .Kraig


    Thursday, November 08, 2012 5:49 PM
  • Thank you for your reply, Kraig. I have looked at incremental loading (and I have downloaded two editions of your ebook a while ago), but it is unsuitable for my app. The web service only gives me ten items per request and only when the user requests more, my app fetches the next ten (see Amazon ECS). I was hoping to find an event I could subscribe to when the user attempts to scroll off either end of the listview items -- a more natural interface than the user having to click a button to invoke loadMorePages.

    .John

    • Edited by Ydnorok Friday, November 09, 2012 1:34 AM
    Friday, November 09, 2012 12:15 AM
  • OK, if I understand you correctly, you're looking for an event in response to which you can request the next ten items and populate your data source, so that the ListView then updates and shows those new items.

    Because the ListView lacks such an event, what you're really looking at here is implementing your own data source that will be asked for those next items when you use the incremental loading behavior. That is, if you set loadingBehavior to incremental, set automaticallyLoadPages to true, set pagesToLoadThreshold to 1, and pagesToLoad to 1 (meaning load 1 more page when the last item is on the last page), then the data source will receive a request to provide that next 1 page of items.

    To do a custom data source, refer to the HTML ListView working with data sources sample. Look specifically at Scenario 4, which shows how to bring data down from a service a little at a time just as you need to do. I give a little more overview in the "Custom Data Sources" section of Chapter 5 in my book, and there's a talk from //Build 2011 on the mechanisms, http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-210T. (A few details have changed, but the concepts are the same.)

    .Kraig

    • Marked as answer by Ydnorok Wednesday, November 14, 2012 5:00 AM
    Tuesday, November 13, 2012 10:21 PM