locked
Reload items in ListView control.

    Question

  • In my app I have a ListView control (just like in Grid DefaultTemplate).

    When user clicks ReloadButton I want to load new data to my ListView. In XAML I would simply reset the DataSource property. Unfortunatly, in WinJS it doesn't work. When I reset this property, no data are displayed. So here is my first question, do you know what is the reason of this? Why can't I set DataSource property twice, and what should I do to make it work?

    For now I simply remove all items and add them to the list again, like this:

    mySourceCollection.splice(0, mySourceCollection.length);
    ...
    getItems().forEach(function (item) {
                          mySourceCollection.push(item);
                      });

    Unfortunatly this solution is pretty ugly. When I remove items, they disapper with default fadeout animation, and than new are added with default fadein animation. The animations start almost in the same time and they overlap each other. It doesn't look nice. My second question is, how to disable default items animations and change it to sth else (like WinJS.UI.Animation.enterPage(item))Again, in XAML it's pretty simple, but how to do it in WinJS?

    Could you please give me an answer to any of those questions?

    Thanks a lot, 

    Greetings





    Saturday, May 18, 2013 1:12 PM

Answers

  • Yes there is an event Listview OnLoadingStateChanged. In the event handler function check for the listview loading state.

    What I have observed is that if you are loading/pushing the items after the "pageready" event, this event handler will hit twice.

    Once before the items are pushed (this is because the empty list will also load).

    Once after the pushing items (this is after rending the elements).

    What I do is keep a Boolean flag (initially false).. After assigning datasource (or pushing items) I make this falg true.

    In the event handler for OnLoadingStateChanged I check if listview state == "complete" && Boolean flag is true and the do what ever I want.

    Hope this helps...

    - Girija

    Tuesday, May 28, 2013 9:45 PM

All replies

  • Monday, May 20, 2013 9:12 PM
  • No :(.

    WinJS is a little unpredictable :/.

    What should I do? Generally, if it happend, that I have already added any items to mySourceCollection, re-setting it doesn't work. ListView.forceLayout does not help.

    Please help!

    Thursday, May 23, 2013 9:48 AM
  • I was thinking about another solution. How about removing the ListView control from page and than inserting it there again. Could sb please tell me if that would work? How should I do it? Should I simply set innerHTML of some kind of container div or use HTMLControl? Would I be able to get my ListView object by document.getElementbyId if it would be in the HTMLControl?
    Thursday, May 23, 2013 8:55 PM
  • What you can do is have a splash animation (div with ring or running dots) in the same place as list view but as hidden.

    When user clicks the reload button, hide the list and make the splash div visible and after you reloading is done, hide the splash div and show the list view.

    Other way is , user clicks the reload button, hide the list and make the splash div visible , after removing the items show the list view and hide the splash div. Then start adding items to list. This way at least the user would have a feel of items reloading.

    I am not sure if it will be optimum from UI perspective, but you can try these.

    - Girija

    Thursday, May 23, 2013 9:11 PM
  • One more thing.

    How can I know, that ListView has ended loading it's items? When all Push'es has been called for mySourceCollection, the ListView still needs some time to display them. Is there any kind of event for that?

    Tuesday, May 28, 2013 9:32 PM
  • Yes there is an event Listview OnLoadingStateChanged. In the event handler function check for the listview loading state.

    What I have observed is that if you are loading/pushing the items after the "pageready" event, this event handler will hit twice.

    Once before the items are pushed (this is because the empty list will also load).

    Once after the pushing items (this is after rending the elements).

    What I do is keep a Boolean flag (initially false).. After assigning datasource (or pushing items) I make this falg true.

    In the event handler for OnLoadingStateChanged I check if listview state == "complete" && Boolean flag is true and the do what ever I want.

    Hope this helps...

    - Girija

    Tuesday, May 28, 2013 9:45 PM