ListView bound to storage files with grouping capabilities in WinJS - windows-8

Question

I would like to replicate the song view of the Music app, in my Windows 8 Metro app using WinJS.
I'm using a StorageDataSource to load files from the music library in a list view. This works well, now I'd like to group music files by some property (ex.: album).
StorageDataSource does not support grouping, so I'm looking for tips on how to go at this. It has to be efficient as the user can have many items in the library, but I don't need it to auto-update when new files are added/removed (though it would be nice).
My current understanding is that I need to build 2 custom data sources:
One or the itemDataSource of the ListView, and is a wrapper around StorageDataSource. Ex.: the getItemsFromIndex implementation queries the underlying dataSource for its items that it wraps in a literal. I can't just set the StorageDataSource as its objects are immutable.
One for the groupDataSource of the listView. I build it manually once when the app loads, by iterating over my first StorageDataSource and determining how many groups I have, and where each one starts in terms of itemDataSource indexes.
It works, but I wonder if there's a better way. It also seems impossible to have groups in a ListLayout and it forces items to be displayed horizontally.
Does anyone have tips for the high level view of what's required here? Thanks.

Answer 1

First, you are correct that if you are using a list layout that grouping isn't supported; its only supported in the Grid layout. You could choose to insert fake data items for the groups that you could style as you needed using a custom item template rendering function.
The rest of your stuff will require some learning I suggest you take a look at the ListView samples to really understand the ins and outs of the data source API.
One option is to let the ListView calculate them for you by supplying the computerDataSourceGroups function:
http://msdn.microsoft.com/en-us/library/windows/apps/hh700578.aspx
The other option is that the StorageDataSource source is right the for you to look at; adding grouping to this as a raw datasource may in fact be your most efficient and maintainable solution. It will hopefully allow you to continue to leverage the virtualization of the listview without causing the data source to de virtualized. You should find the source in the references node in VS, in ui.js.