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