locked
Error grouping items on ui.js firstItemIndexHint property

    Question

  • Hi everyone,

    Well, I've been pulling my hair out with an error grouping items to render in a listview. When I set the items/groups datasources to the list I get an error in ui.js at line 16812 saying "Unable to get property 'firstItemIndexHint' of undefined or null reference".

    I have other pages in my application where grouping works fine but this one doesn't seems to work. I use the same binding method (WinJS.UI.setOptions) in all of them and I can't find any difference between them that causing this error.

    Can anyone tell me what's making the following code crash?.
    Any help is greatly appreciated. Thanks!

    javascript page code in ready function:

    var arr = new Array();
            //fill in an array with sample data.
            //name property is the one used for grouping
            //nm is rendered in the item template.
            for (var i = 0; i < 10; i++) {
    
                arr.push({
                    name: "group" + (i % 5),
                    nm: "namer" + i,
                });
    
            }
            //create a list based on the array.
            var items = new WinJS.Binding.List(arr);
    
            //group items by the name property (key selector function) and 
            //use it for rendering the group template (group data function)
            var groupDataSource = items.createGrouped(
                function (item) {
                    return item.name;
    
                },
                function (item) {
    
                    return {
                        name: item.name,
                        click: function () {
                            nav.navigate("mynavpage.html");
                        }
                    };
    
                });
    
             //get a reference to the listview control
             var listView = element.querySelector(".itemGroups").winControl;
    
             //set templates and datasources to listview
             //here's where calls to base.js/ui.js are made and where app fails.
             WinJS.UI.setOptions(listView, {
                groupHeaderTemplate: element.querySelector(".headerTemplate"),           itemTemplate:element.querySelector("#itemTemplate1"),
                itemDataSource: items.dataSource,
                groupDataSource: groupDataSource.groups.dataSource,
            });

    html page code

    <!-- group header template -->
     <div class="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
        <h2 class="group-title" data-win-bind="textContent: name" role="link">
        </h2>
     </div>
    
    <!-- item template -->
    <div id="itemTemplate1" data-win-control="WinJS.Binding.Template" style="display: none">
        <div class="itemTemplate item1x1" id="item1">
            <div class="itemText">
                <h4 class="itemTitle win-type-ellipsis" data-win-bind="textContent: nm"></h4>
            </div>
        </div>
    </div>
    
    <!-- fragment section -->
     <div class="myPage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pageTitle">Page Title</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <!-- listview Grid -->
            <div class="itemGroups" aria-label="List of groups" data-win-control="WinJS.UI.ListView"
                data-win-options="{ tapBehavior: 'toggleSelect' }">
            </div>
    
        </section>
    </div>



    • Edited by Diego Ledesma Wednesday, June 6, 2012 11:05 PM text formatting issues
    Wednesday, June 6, 2012 11:00 PM

Answers

  • Well, the issue was somewhat related to what tc74 mentioned.

    I was binding itemDataSource to the wrong collection. I binded it to groupDataSource.dataSource and it worked.

    Thanks for the hint!.

    • Marked as answer by Diego Ledesma Thursday, June 21, 2012 7:44 PM
    Thursday, June 21, 2012 7:43 PM

All replies

  • Change your groupDataSource: to items.groups.dataSource

    See http://msdn.microsoft.com/en-us/library/windows/apps/hh465464.aspx for reference (especially comment from Mike Levy )

    Thursday, June 7, 2012 1:38 PM
  • Thanks for your reply.

    I have tryed that but it fails binding items.groups.dataSource because items.groups is undefined.

    Thursday, June 7, 2012 2:21 PM
  • Well, the issue was somewhat related to what tc74 mentioned.

    I was binding itemDataSource to the wrong collection. I binded it to groupDataSource.dataSource and it worked.

    Thanks for the hint!.

    • Marked as answer by Diego Ledesma Thursday, June 21, 2012 7:44 PM
    Thursday, June 21, 2012 7:43 PM