SemanticZoom throws an exception when using groups with integer key RRS feed

  • General discussion

  • 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 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 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 data-win-control="WinJS.UI.SemanticZoom" >
        <div data-win-control="WinJS.UI.ListView"
        <div data-win-control="WinJS.UI.ListView"

    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", {

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



    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

    Monday, June 11, 2012 7:33 PM

All replies

  • 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.

    Friday, June 15, 2012 4:48 PM
  • 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;

    • Edited by Ydnorok Thursday, November 15, 2012 6:23 AM
    Sunday, November 11, 2012 2:17 AM