CODEWITHSUNDEEP
javascripthtmlwindows-8
Vinicius Rocha
Vinicius Rocha

Reputation: 4223

How do I implemet groups using WinJS.UI.ListView with ListLayout layout

How do I implemet groups using WinJS.UI.ListView with ListLayout:

        <div id="itemTemplate" data-win-control="WinJS.Binding.Template">
            <div data-win-bind="innerText: title"></div>
        </div>  
        <div id="headerTemplate" data-win-control="WinJS.Binding.Template">
            <div data-win-bind="innerText: group"></div>
        </div>  
        <div id="menu" data-win-control="WinJS.UI.ListView" data-win-options="{automaticallyLoadPages:false, groupHeaderTemplate:select('#headerTemplate'), groupDataSource:QuickGuide.itemListGrouped.groups.dataSource, itemDataSource:QuickGuide.itemListGrouped.dataSource, itemTemplate:select('#itemTemplate'), layout:{type:WinJS.UI.ListLayout}}">
        </div>

The JS file:

function getGroupKey(dataItem) {
    return dataItem.group;
}

function getGroupData(dataItem) {
    return {
        group: dataItem.group
    };
}

var dataList = new WinJS.Binding.List(dataArray);
var dataListGrouped = dataList.createGrouped(getGroupKey, getGroupData);

WinJS.Namespace.define("QuickGuide", {
    data: dataArray,
    itemList: dataList,
    itemListGrouped: dataListGrouped
});

It works only with GridLayout and not with ListLayout.

Upvotes: 1

Views: 1517

Answers (1)

louis.luo
louis.luo

Reputation: 2971

I think don't think ListLayout support a groupHeader as GridLayout does. Referring to MSDN docs, WinJS.UI.GridLayout has groupHeader property, but WinJS.UI.ListLayout doesn't. Maybe Microsoft think it doesn't make sense to have a groupHeader for ListLayout because in all the samples that I have seen, the vertically scrolling ListLayout either don't have a "group", or they display the "groupHeader" as the list item instead of real items in the ListView (ref: GridLayout application generated by VS11). If you wan't a horizontally scrolling ListView with groupHeader, then just use css to make it look like "list items" instead of "Grids" (ref: /Build// app in Consumer Preview store)

Upvotes: 2

Related Questions