locked
Refreshing a ListView

    Question

  • I have a ListView whose data source is set to an array.  I want to periodically update the data in the array and, of course, the ListView.  Currently, my approach is to change the data in the array and reinvoke:

    myListView.winControl.dataSource = myArray;

    This works but the ListView goes blank before rendering again.

    Is this the correct/best approach or should I be using the ArrayDataSource object/pattern?

     

    Monday, October 17, 2011 3:23 PM

Answers

  • Hi Jr,

    You can simply bind the data and update that datasource to see the changes using the default binding.  When the datasource has changes, then the listview will update for you!

    For example, you can grab this sample:

    http://code.msdn.microsoft.com/windowsapps/ListView-interaction-model-c6f9a124

    Next, lets remove some data and change the type of myStoreData in program.js:

    var myStoreData = new WinJS.UI.ArrayDataSource([
    { title: "Banana Blast Frozen Yogurt", text: "Low-fat frozen yogurt", picture: "images/60Banana.png", stock: "in_stock" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png", stock: "in_stock" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png", stock: "in_stock" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png", stock: "in_stock" }
    ]);

    Next change this function that processes the scenario 1 add item button click:

        function scenarioOneAddToCart() {
            myStoreData.insertAtEnd("junkKey", { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png", stock: "in_stock" });
        }

    And there you have it!

     

    -Jeff

     


    Jeff Sanders (MSFT)
    Monday, October 17, 2011 4:41 PM
    Moderator

All replies

  • Hi Jr,

    You can simply bind the data and update that datasource to see the changes using the default binding.  When the datasource has changes, then the listview will update for you!

    For example, you can grab this sample:

    http://code.msdn.microsoft.com/windowsapps/ListView-interaction-model-c6f9a124

    Next, lets remove some data and change the type of myStoreData in program.js:

    var myStoreData = new WinJS.UI.ArrayDataSource([
    { title: "Banana Blast Frozen Yogurt", text: "Low-fat frozen yogurt", picture: "images/60Banana.png", stock: "in_stock" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png", stock: "in_stock" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png", stock: "in_stock" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png", stock: "in_stock" }
    ]);

    Next change this function that processes the scenario 1 add item button click:

        function scenarioOneAddToCart() {
            myStoreData.insertAtEnd("junkKey", { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png", stock: "in_stock" });
        }

    And there you have it!

     

    -Jeff

     


    Jeff Sanders (MSFT)
    Monday, October 17, 2011 4:41 PM
    Moderator
  • That should work, it's what I did for the conference app. In theory you could try to update the original data source, but trying to figure out what was added/editted/removed seems like a lot of work.

    You should be seeing a slide in animation for the new content, but you are correct that the old content just disappears rather than animating out. Would you prefer to have more animation on the exiting content?

     

    Cheers,

    -Jeff

    Monday, October 17, 2011 4:46 PM
  • Less animation in certain cases.

    The list is displaying a set of events that have occurred.  One of the fields in the template is the time (in minutes) since this event happened.  It would be a nicer presentation to not animate the time fields in the case of no newly added events during a periodic update.  Of course, when new events are added, animation should be used.

     

    Watching Sam Spencer's talk at /Build.  I think I can make this work.
    • Edited by jrboddie Monday, October 17, 2011 5:19 PM
    Monday, October 17, 2011 5:04 PM
  • I need to know where to put this code, is there a working example code page I can work from?
    Friday, November 02, 2012 3:32 AM
  • Monday, November 12, 2012 1:27 PM
    Moderator