locked
Update grouped listview

    Question

  • I cannot get my listview to update when i add to the datasource....

    HTML:

    <section data-win-control="WinJS.UI.SemanticZoom" aria-label="Main content" role="main">   
                
                     <!-- The zoomed-in view. -->    
                    <div id="zoomedInListView" class="groupeditemslist win-selectionstylefilled"
                        data-win-control="WinJS.UI.ListView" 
                        data-win-options="{ 
                            itemDataSource: exerciseList.groupedItemsList.dataSource, 
                            itemTemplate: select('#mediumListIconTextTemplate'), 
                            groupHeaderTemplate: select('.headertemplate'), 
                            groupDataSource: exerciseList.groupedItemsList.groups.dataSource, 
                            selectionMode: 'none', 
                            tapBehavior: 'none', 
                            swipeBehavior: 'none', 
                            layout: { type: WinJS.UI.GridLayout } 
                        }" style="right: 735.54px;  bottom: -203px; "
                    ></div>
    
                    <!--- The zoomed-out view. -->
                    <div id="zoomedOutListView" class="groupeditemslist win-selectionstylefilled"
                        data-win-control="WinJS.UI.ListView"
                        data-win-options="{ 
                            itemDataSource: exerciseList.groupedItemsList.groups.dataSource, 
                            itemTemplate: select('#semanticZoomTemplate'), 
                            selectionMode: 'none', 
                            tapBehavior: 'none', 
                            swipeBehavior: 'none', 
                            layout: { type: WinJS.UI.GridLayout } 
                        }"
                    ></div>
    
                </section>

    JS:

    var exerciseList = [{ id: "0", name:"blank", avg: "" }]; // Sorts the groups. function compareGroups(left, right) { return left.charCodeAt(0) - right.charCodeAt(0); } // Returns the group key that an item belongs to. function getGroupKey(dataItem) { return dataItem.name.toUpperCase().charAt(0); } // Returns the title for a group. function getGroupData(dataItem) { return { title: dataItem.name.toUpperCase().charAt(0) }; } // Create a WinJS.Binding.List from the array. var itemsList = new WinJS.Binding.List(exerciseList); // Create the groups for the ListView from the item data and the grouping functions var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups); WinJS.Namespace.define("exerciseList", { groupedItemsList: groupedItemsList }); function loadExercises(results) { var obj = JSON.parse(JSON.stringify(eval("(" + results["response"] + ")"))); var ksName = ''; $.each(obj, function (i, item) { if (item['name'] && item['name'] != 'undefined') { var id = item['ID']; var name = $("<div/>").html(item['name']).text(); exerciseList.push({ id: id, name: name, avg: '' }); // datasource.change("0", { id: id, name: name, avg: '' }); } });

      var listView = document.querySelector('#zoomedInListView').winControl;
     
        console.dir("test");

        listView.dataSource = groupedItemsList;

    } (function () { "use strict"; var page = WinJS.UI.Pages.define("/pages/exerciselist/exerciselist.html", { ready: function (element, options) { WinJS.UI.processAll(element); //Get exercises json from IAL and call loadExercises() API.passedVars = { "subject": options['id'] } doRequest('exercises', 'loadExercises'); } }); })();


    Listview is populated when page loads with just a holding item: 

    exerciseList.push({ id: id, name: name, avg: '' });

    I then call and process my json feed and push it to the datasource array:

    exerciseList.push({ id: id, name: name, avg: '' });

    But it dosnt update...

    Friday, November 16, 2012 10:19 AM

Answers


  • Hi Ashley,

    I think the issue you encounter is due to you directly modify the raw javascript array object (instead of the WinJS.Binding.List object). To make the WinJS control be notified about the changes, we need to manipulate the WinJS.Binding.List object (created from the raw js array). For example, in your code you create the data source in the following sequence:

    ---------------------------
    var exerciseList = [{ id: "0", name:"blank", avg: "" }];
    .......
    var itemsList = new WinJS.Binding.List(exerciseList);
    ......
    var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);
    --------------------------

    Then, if you want to update the dataSource (and let the ListView automatically show the changes), you need to directly manipulate the "itemsList" or "groupedItemsList" object through the "push", "pop" or "splice" method (of WinJS.Binding.List type).


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Thursday, November 22, 2012 2:26 PM
    Monday, November 19, 2012 6:28 AM
    Moderator