WinJSContrib.DataSourceManager (NuGet package)

This package is intended to help you build list with grouping and using semantic zoom for jump list between groups. It's a common UI pattern for Windows 8 and Windows Phone. You could use a controller object and keep managing the UI, or use a control that wraps everything for you.

To use this control, reference the javascript file in your default.html
<script src="/scripts/winjscontrib/mcnext.ui.datasourcemanager.js"></script>

You could use the manager alone by code :
var mgr = new MCNEXT.UI.DataSources.DataSourceManager({
    groupKind: MCNEXT.UI.DataSources.Grouping.alphabetic,
    field: 'metadata.genre',
    items: moviesSample,
    listview: page.zoomedInList,
    zoomedOutListView: page.zoomedOutList

The manager has properties with observable list. If you give your ListViews, it will update their datasource automatically.

It supports common grouping behaviors (alphabetic, by field, by year, by month, by day, ...).
You could also manage filters on the fly

If you want to have the common pattern of a grouped list view with jump list by semantic zoom, you could also use the custom control :

<div data-win-control="MCNEXT.UI.SemanticListViews" data-win-options="{
    listview: { 
        itemTemplate: select('#listItemTemplate'), groupHeaderTemplate : select('#groupItemTemplate')
    zoomedOutListview: { itemTemplate: select('#semanticItemTemplate')},
    data: {
        groupKind: MCNEXT.UI.DataSources.Grouping.byField,
        field: 'metadata.genre',
        items: moviesSample

Last edited Apr 11, 2014 at 10:17 AM by gleborgne, version 4