locked
Dynamically update a Metro listView upon horizontal scroll (JS/HTML) RRS feed

  • Question

  • In the following code which was a part of a task:

                var dataObj = document.getElementById("listView").winControl;
                var postList = new WinJS.Binding.List(appData); //appData is a JSON object data array
                var filteredList = postList.createFiltered(function _filterItems(item) { return item.ID < 3 });
                dataObj.itemDataSource = filteredList.dataSource;

    I got a small problem and had no one to ask,
    if upon the display of 3 items i may add a few more - 
    scroll horizontally and load it upon,
    reaching the edge of the screen and get baffled
    as the data updates on my lil' apps scaffold*?

    *Since my team leader had me arrange it like a poem, i'll rephrase for clarity:

    in a filtered list which is generated from an array of 20 items, only 3 items are displayed.
    i'd like to dynamically load more items as i scroll to the side.

    what's the best way to achieve it? 

    with regards,

    Mike.

     
    • Edited by Mike_86 Tuesday, June 19, 2012 9:22 AM
    Tuesday, June 19, 2012 9:19 AM

Answers

  • Instead of using the createFiltered function of the List object, you could maintain 2 separate lists:  1 that contains all the data, and 1 that contains only the items you want to bind to the UI (you would need to implement your own filtering, but that should not be too difficult).  When the user scrolls to the end of the list, you could simply add a new item to the list that your UI is bound to.

    Dave Paquette @Dave_Paquette www.davepaquette.com

    • Marked as answer by Dino He Monday, July 9, 2012 10:34 AM
    Tuesday, June 19, 2012 5:09 PM

All replies

  • Hi Mike,

    From your description it sounds like you want a Virtualized datasource. See this thread: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/f5207ddc-ea6b-423d-bdd6-483b2134f9cb

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, June 19, 2012 12:31 PM
    Moderator
  • Hi Jeff and thank you for your quick reply.

    From looking at the article you've suggested, it seems like an overkill for what i need.

    What i've got is an array of 20 objects. I filter it to display 3.

    I can create a function that will instantiate a new list with a new size , let's say 4, and rebind it - but it'll load the entire list.

    I can append an HTML template and nest it into the listView, but it'll decrease the apps performance to some extent, and it just seem wrong.

    These two will take minutes to implement and if there's a way to know you've reached to the edge of the list (is there?), it's just a matter of binding it to this event.

    i have no problem of getting the data and tracking its count, updating it whenever necessary and managing it in the way i need. It's much much (much) simpler than reconstructing and implementing entire interfaces, since i just create XHR calls and populate an array, that's it.

    All i need is a way of updating my list template dynamically, that's all.

    perhaps i missed the whole point since the bing example is much more complex than i'll ever need for my simple feature, but isn't there another way?

    Tuesday, June 19, 2012 2:00 PM
  • Instead of using the createFiltered function of the List object, you could maintain 2 separate lists:  1 that contains all the data, and 1 that contains only the items you want to bind to the UI (you would need to implement your own filtering, but that should not be too difficult).  When the user scrolls to the end of the list, you could simply add a new item to the list that your UI is bound to.

    Dave Paquette @Dave_Paquette www.davepaquette.com

    • Marked as answer by Dino He Monday, July 9, 2012 10:34 AM
    Tuesday, June 19, 2012 5:09 PM
  • The filtered list is the second list, i'm doing the content limitation @ the beginning. is there a way to dynamically add listItems to an existing list via the winJS API? the only example i've seen was appending a child element via JS. is That the only way of achieving it?
    Wednesday, June 20, 2012 7:29 AM
  • Can't you just call the push method on the first binding list?

     postList.push(myNewItem);


    Dave Paquette @Dave_Paquette www.davepaquette.com

    Wednesday, June 20, 2012 2:29 PM