locked
How do I change groups dynamically with a ListView?

    Question

  • Hi

    So I have a WinJS.UI.listView item in a grid layout connected to a groupedList. 

    My goal is to be able to dynamically sort through by different groups. I've been searching for a few days and can't find any relevant documentation on how to do this. 

    I.E. I have items with {title: "title", date: "01/01/1990", status: "status"}. When the page first loads, the items are grouped by date. Now I have two buttons also on the page, one for "Date" and the other for "Status". When the "status" button is clicked I want the listView to update the grouping to group by the status instead of the date. And similarly grouped by date when clicking the "Date" button. 

    The items are generated from saved app data, not a server, and the groupedLists for both date and status are created from the data when the app initializes. 

    Thanks!


    Sunday, January 19, 2014 10:53 PM

Answers

  • As you have already created two grouped lists (using WinJS.Binding.List.createGrouped, I imagine), then all you need to do is change the itemsDataSource and groupDataSource properties of the ListView in response to your button taps.

    Let's say you have two lists called groupedByDate and groupedByStatus, which you created with createGrouped. Assume that the variable listview is the ListView object (e.g. document.getElementById("myList").winControl).

    To set the date grouping, then:

    listview.itemsDataSoruce = groupedByDate.dataSource;
    listview.groupDataSource = groupedByDate.groups.dataSource;

    To get the status grouping:

    listview.itemsDataSource = groupedByStatus.dataSource;
    listview.groupDataSource = groupedByStatus.groups.dataSource;
    

    You shouldn't need to do anything else, as the ListView should update automatically.

    Kraig

    Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft Press. First edition (for Windows 8) also available.


    • Marked as answer by TR1320 Tuesday, January 21, 2014 2:57 AM
    Monday, January 20, 2014 5:13 PM

All replies

  • I think you'll have to redefine your sorted list, and reattach it to the ListView using "setOptions" method. I did not try it, but it should work.

    If your view is not updating, try to force the refresh using 

    WinJS.UI.processAll(WinJS.Utilities.id('yourListId'));

    Monday, January 20, 2014 12:48 PM
  • As you have already created two grouped lists (using WinJS.Binding.List.createGrouped, I imagine), then all you need to do is change the itemsDataSource and groupDataSource properties of the ListView in response to your button taps.

    Let's say you have two lists called groupedByDate and groupedByStatus, which you created with createGrouped. Assume that the variable listview is the ListView object (e.g. document.getElementById("myList").winControl).

    To set the date grouping, then:

    listview.itemsDataSoruce = groupedByDate.dataSource;
    listview.groupDataSource = groupedByDate.groups.dataSource;

    To get the status grouping:

    listview.itemsDataSource = groupedByStatus.dataSource;
    listview.groupDataSource = groupedByStatus.groups.dataSource;
    

    You shouldn't need to do anything else, as the ListView should update automatically.

    Kraig

    Author, Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition, a free ebook from Microsoft Press. First edition (for Windows 8) also available.


    • Marked as answer by TR1320 Tuesday, January 21, 2014 2:57 AM
    Monday, January 20, 2014 5:13 PM
  • Thank you. This was actually one of the first things I tried, but I forgot to add .winControl when I selected my list. That explains a lot of the errors I was getting. 

    I've also found your book very useful I might add. Thank you so much!

    -TR

    Tuesday, January 21, 2014 2:34 AM
  • Yep, that would do it! Fortunately, after you forget winControl a few times, you start to remember more consistently :)

    Glad you're enjoying the book!

    Tuesday, January 21, 2014 4:05 AM