SemanticZoom throws an exception when using groups with integer key

Question

I started creating a Semantic Zoom in a new application where I had a group with an integer key and I get this exception:

SCRIPT438: Exception was thrown but not handled in user code at line 22339, column 21 in ms-appx://microsoft.winjs.1.0.rc/js/ui.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'itemFromDescription'
File: ui.js, line: 22339 column: 21

But if I change the key to a string it works. Any suggestion, I would prefer to keep my integer index.

Note: I explain here my code...

First I created a very simple HTML page:

<div id="groupHeader" data-win-control="WinJS.Binding.Template">
    <div style="font-size:25px; height:40px" data-win-bind="innerText: title"></div>
</div>
<div id="itemTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width:150px;height:150px">
        <div style="font-size:18px" data-win-bind="innerText: title"></div>
        <div data-win-bind="innerText: description"></div>
    </div>
</div>
<div id="groupTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width:250px;background-color:#0094ff">
        <div style="font-size:25px" data-win-bind="innerText: title"></div>
    </div>
</div>
<div data-win-control="WinJS.UI.SemanticZoom" >
    <div data-win-control="WinJS.UI.ListView"
        data-win-options="{
        itemDataSource:TestData.items.dataSource,
        groupDataSource:TestData.groups.dataSource,
        itemTemplate:itemTemplate,
        groupHeaderTemplate:groupHeader
        }">
    </div>
    <div data-win-control="WinJS.UI.ListView"
        data-win-options="{
        itemDataSource:TestData.groups.dataSource,
        itemTemplate:groupTemplate
        }">
        </div>
</div>

And then I created a data.js like this:

/// <reference path="ms-appx://Microsoft.WinJS.1.0.RC/js/base.js" />
/// <reference path="ms-appx://Microsoft.WinJS.1.0.RC/js/ui.js" />
(function () {
    "use strict";
    //var data=[{key:"one", title:"one",description:"first item",group: {key:"1",title:"group one"}},
    //    {key:"two", title:"two",description:"second item",group: {key:"1",title:"group one"}},
    //    {key:"three", title:"three",description:"third item",group: {key:"1",title:"group one"}},
    //    {key:"four", title:"four",description:"fourth item",group: {key:"2",title:"group two"}},
    //    {key:"five", title:"five",description:"fifth item",group: {key:"2",title:"group two"}},
    //    { key: "six", title: "six", description: "sixth item", group: { key: "2", title: "group two" } }];
    var data = [{ key: "one", title: "one", description: "first item", group: { key: 1, title: "group one" } },
       { key: "two", title: "two", description: "second item", group: { key: 1, title: "group one" } },
       { key: "three", title: "three", description: "third item", group: { key: 1, title: "group one" } },
       { key: "four", title: "four", description: "fourth item", group: { key: 2, title: "group two" } },
       { key: "five", title: "five", description: "fifth item", group: { key: 2, title: "group two" } },
       { key: "six", title: "six", description: "sixth item", group: { key: 2, title: "group two" } }];
    var list = new WinJS.Binding.List(data);
    var groupedList = list.createGrouped(
        function groupKey(item) {
            return item.group.key;
        },
        function groupData(item) {
            return item.group;
        });
    WinJS.Namespace.define("TestData", {
        items:groupedList,
        groups:groupedList.groups
    });
})();

If I use the first data[] the application works, with the second one it throws the exception. I'm using Windows 8 RP

Thanks,

Juanma

---

Juan Manuel Servera
twitter: @jmservera
mi blog: http://jmservera.wordpress.com
Únete al grupo de WP7 en LinkedIn
MCPD WP7 Developer - MCTS Sharepoint 2010 Application Development

Answer 1

I remember hitting this myself, so just I went back and looked at my grouping functions I found this:

function groupKey(item) {
    return item.group.key + ""; // note: Making it a string because _positionItem in UI.js is dumb.
}

So yeah; I think they have a bug to fix. You can use that hack to cast the int into a string for a work-around. It does not seem to have any ill effects.

Answer 2

Time to fix this!!!! Switching from group view to detail view also throws the same exception.

Please add in ui.js after line 23542 (in _positionItem) the following two lines:

if (item.firstItemKey === undefined)

    item.firstItemKey = item.key;

Workaround follows:

///<WORKAROUND for="listview's _positionItem is garbage code">
var _groupItems = myGroupedList.groups._list._groupedItems;
for (var q in _groupItems) {
   if (_groupItems[q].firstItemKey === undefined)
      _groupItems[q].firstItemKey = _groupItems[q].key;
}
///</WORKAROUND>