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
Thanks man, that helped a lot!