Sorting grouped items in listview

Question

I need to sort individual items in groups. The Listview api lets me to create sorted groups or sort whole list. I need to sort item in the respective groups.

Is it possible?

Answer 1

I was struggling with the same issue and neither found a useful example, nor a hint. Then I started to combine SortedListProjection and GroupedSortedListProjection, and by that, finally made it work.

My use case was to have groups in alphabetical, ascending order, but within a group, have the items ordered by a timestamp, descending.

Here is how I set it up in the JavaScript file:

var list = new WinJS.Binding.List(); // list gets populated later in the code
var sortedList = list.createSorted(compareItems);
var groupedList = list.createGrouped(getGroupKey, getGroupData, compareGroups);

WinJS.Namespace.define("my.stuff", {
    sortedList: sortedList,
    groupedList: groupedList
});

The important thing was to keep the item sorting in sync with the grouping. Therefore the item sorting function is calling grouping functions.

Below are all four functions used for sorting and grouping:

compareItems = function (leftItem, rightItem) {
    let leftKey = getGroupKey(leftItem);
    let rightKey = getGroupKey(rightItem);
    let compare = compareGroups(leftKey, rightKey);
    if (compare == 0) { // if keys are equal compare timestamps
        return leftItem.timestamp < rightItem.timestamp ? 1
            : leftItem.timestamp > rightItem.timestamp ? -1 : 0;
    }
    return compare;
};

getGroupKey = function (item) {
    return item.name + item.category;
};

getGroupData = function (item) {
    return {
    name: item.name + " (" + item.category + ")"
    };
};

compareGroups = function (leftKey, rightKey) {
    return leftKey.toUpperCase().localeCompare(rightKey);
};

Finally, the combined declaration of both lists for the ListView:

<div id="dataDeliveriesList" class="hidden"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
        itemDataSource: my.stuff.sortedList.dataSource,
        itemTemplate: select('#itemTemplate'),
        groupDataSource: my.stuff.groupedList.groups.dataSource,
        groupHeaderTemplate: select('#groupHeaderTemplate'),
        layout: {
            type: WinJS.UI.ListLayout
        }
    }">
</div>

Answer 2

It's possible. ObservableCollection doesn't provide a sorting option, and therefore you'll have to create a new collection that's sorted on a selected property. See sample code below. For other sorting options, read the blog post here and another stackoverflow thread.

// TODO: Create an appropriate data model for your problem domain to replace the sample data
var group = SampleDataSource.GetGroup((String)navigationParameter);
this.DefaultViewModel["Group"] = group;
//this.DefaultViewModel["Items"] = group.Items;

// Sort items by creating a new collection
ObservableCollection<SampleDataItem> grpSorted = new ObservableCollection<SampleDataItem>(
group.Items.OrderBy(grp => grp.Title));

this.DefaultViewModel["Items"] = grpSorted;