Lately I’ve been playing with the Windows 8 developer tools, being focused on the HTML5 + Javascript version.

Although the paradigm changes a bit (being a pure OOP developer) I must say I’m well impressed with it.

The labs are a great place to start, and will provide a general knowledge of the main features of the windows store apps.

One of these features is the semantic zoom. While I was trying to use it on a experience project of my own, I got the nice exception “Javascript runtime Error: Object doesn’t support property or method ‘itemFromDescription'” when zooming out.

When zooming out, the position of each item will be retrieved. The action happens on the ui.js file:

                if (typeof key === "string" && this._dataSource.itemFromKey) {
                    itemPromise = this._dataSource.itemFromKey(key, (this._isZoomedOut ? {
                        groupMemberKey: item.key,
                        groupMemberIndex: item.index
                    } : null));
                } else {
                    var description = (this._isZoomedOut ? item.groupDescription : item.firstItemDescription);

                    if (WinJS.validation) {
                        if (description === undefined) {
                            throw new WinJS.ErrorFromName("WinJS.UI.ListView.InvalidItem", strings.listViewInvalidItem);
                        }
                    }

                    itemPromise = this._dataSource.itemFromDescription(description);
                }

If you look closely, you’ll see that if the type of the key used for the group is not a string, the fallback will be the “item.groupDescription” (zoomed out) which obviously can be undefined (depending on the group object structure).

The workaround is to convert the group key to string:

var groupedItems = list.createGrouped(
    function groupKeySelector(item) {
         return item.departmentId.toString();
    },
    ....
);

And that’s it. It doesn’t solve the problem, but it goes around it.
Cheers