How to update listview group header without blinking the whole list?

Question

Hello, I am using the WinJS.ListView with grouped items and I want to dinamically change the group header (there is an item counter in the header) as I add new items to the list, but the only way I managed to do that is by calling bindinglist.notifyMutated() to the binding list, I tried calling bindinglist.groups.notifyMutated() but nothing happens. This is not a solution for me because notifyMutated() makes the whole list fade out and then fade in.

Please help!

Answer 1

Hi giohji,

When you use data binding to populate ListView in Windows Store javascript app, you can directly make changes on the datasource list and the changes will be shown on the ListView control automatically (no need to manually call the "notifyMutated" method). However, when you making changes to the datasource, you need to add/remove objects against the WinJS.Binding.List object(rather than the underlying javascript array you use to create the WinJS.Binding.List). For example:

Suppose I construct the following list as datasource of a ListView control:

 

function generateTestGroupedData() {
        var rawItems = [
            { title: "Music Player", subTitle: "music player" },
            { title: "Sun Glasses", subTitle: "sun glasses" },
            { title: "Sports Bag", subTitle: "sports bag" },
            { title: "T-Shirt", subTitle: "t-shirt" },
            { title: "Laptop", subTitle: "laptop" },
            { title: "Table", subTitle: "table" },
            { title: "Chop Stick", subTitle: "chop stick" },
            { title: "Motor", subTitle: "motor" },
            { title: "Boat", subTitle: "boat" },
            { title: "Flower Seeds", subTitle: "flower seeds" },
            { title: "Red Wines", subTitle: "red wines" },
            { title: "Chocalate", subTitle: "chocalate" }
        ];
        ListViewPageUtils.rawProducts = rawItems;
        var list = new WinJS.Binding.List(rawItems);
       
        var groupedItems = list.createGrouped(getGroupKey, getGroupData, compareGroups);
         
  
 // Defined in global namespace via WinJS.Namespace.define
        ListViewPageUtils.productItems = groupedItems;
 
 // Bind datasource to ListView
 var lvHost = document.getElementById('lvGroupedData');
                
        lvHost.winControl.itemDataSource = ListViewPageUtils.productItems.dataSource;
        lvHost.winControl.groupDataSource = ListViewPageUtils.productItems.groups.dataSource;
    }
// For grouped data
    function compareGroups(lk, rk) {
        return lk.charCodeAt(0) - rk.charCodeAt(0);
    }
    function getGroupKey(dataItem) {
        return dataItem.title.toUpperCase().charAt(0);
    }
    function getGroupData(dataItem) {
        return {
            name: dataItem.title.toUpperCase().charAt(0)
        };
    }

then, I can just randomly add some new items into the datasource list (of WinJS.Binding.List type) I created before and the change will be reflected on ListView immediately (e.g.)

document.getElementById('btnAddDataRandom').addEventListener("click", function () {
                var randNum = Math.random() * 1000 % 26;
                var newCode = 'A'.charCodeAt(0) + randNum;
                var newTitle = String.fromCharCode(newCode, newCode, newCode);
                
                var newItem = {
                    title: newTitle,
                    subTitle: newTitle
                };
                ListViewPageUtils.productItems.push(newItem);
            });

You can also call "pop" or "splice" method to remove items directly from the WinJS.Binding.List object. Here are some references about databinding in Windows Store app with Html5 + js:

#Data Binding in a Windows Store App with JavaScript
http://msdn.microsoft.com/en-us/magazine/jj651576.aspx

#Data binding (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh758311.aspx

---

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

Answer 2

Can you give me an example on how to change the group name without adding/removing items and without making the whole group fade in/fade out?

Answer 3

Does not work, the whole group blinks out and in.

Answer 4

Did you try to attach to this event:
http://msdn.microsoft.com/en-us/library/windows/apps/jj126155.aspx
and call ev.preventDefault()?