WinJS : Binding ListView itemDataSource with List.groups.dataSource fails - windows-8

Question

I am facing a really annoying behaviour of grouped WinJS.Binding.List.
When trying to create a SemanticZoom, i fill (in markup) the zoomed-out view items and zoomed-in view headers with the same data from a list.groups.dataSource :
<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom" data-win-options="{ initiallyZoomedOut: true }">
<div id="zoomedInListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: Data.myCategories.dataSource,
itemTemplate: select('#zoomedInItemTemplate'),
groupDataSource: Data.myCategories.groups.dataSource,
groupHeaderTemplate: select('#zoomedInHeaderTemplate')
}"
></div>
<div id="zoomedOutListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: Data.myCategories.groups.dataSource,
itemTemplate: select('#zoomedOutItemTemplate')
}"
></div>
</div>
This code works or doesn't depending on my data :
if i use my real-world data, which is a 3-level tree of categories generated from remote data (i call WinJS.xhr), the zoomed-out ListView fails to bind its itemDataSource with the groups. So my SemanticZoom is well processed but the zoomed-out view is empty.
More precisely, in my zoomed-out view :
This code fails :
data-win-options="{
itemDataSource: Data.myCategories.groups.dataSource,
itemTemplate: select('#zoomedOutItemTemplate')
}"
This code works but displays the detailed categories while i want the groups :
data-win-options="{
itemDataSource: Data.myCategories.dataSource,
itemTemplate: select('#zoomedOutItemTemplate')
}"
This code works, which proves my groups are well-formed when i call createGrouped earlier, but it makes no sense for me to do this since i need my zoomed-out view to display only main groups in which to zoom :
data-win-options="{
itemDataSource: Data.myCategories.dataSource,
itemTemplate: select('#zoomedOutItemTemplate'),
groupDataSource: Data.myCategories.groups.dataSource
}"
if i use sample and simpler data, everything works fine, and i can use my SemanticZoom.
Since the bug seems to happen depending on my input data, below are two snippets of the raw data with which i define a WinJS.Binding.List :
The real-world data, not working : (json-stringified from my generated data)
var myCategories = [{
"id":"CAT_1_1",
"title":"Category 1.1",
"groupKey":0,
"groupId":"CAT_1",
"groupTitle":"Category 1" },
{...}];
The sample data, working : (hand-written)
var myCategories = [
{ group: 1, id: "1.1", title: "item 1.1" },
{ group: 1, id: "1.2", title: "item 1.2" },
];
FYI :
- the bug doesn't come from the templates, i checked.
Thanks for your help, i have struggled with this one for 2 days now...

Answer 1

I finally found the problem :
WinJS.Binding.List.createGrouped() must receive a groupKey(itemData) function as parameter, which returns a key to identify the group for each item.
The returned key must be a STRING, while my real data was returning an INT. Changing this solved the problem.
This is not mentioned in common Windows 8 quickstarts and confusion may come from the compare(leftKey, rightKey) function which uses group keys to calculate a sorting criteria and returns a number.
Hope this will help.