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

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

    Thursday, November 15, 2012 12:43 PM

All replies

  • 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

    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

    #Data binding (Windows Store apps using JavaScript and HTML) (Windows)

    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 Wednesday, November 21, 2012 9:27 AM
    • Unmarked as answer by giohji Wednesday, November 21, 2012 11:19 AM
    Monday, November 19, 2012 7:29 AM
  • 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?
    Wednesday, November 21, 2012 11:19 AM
  • Does not work, the whole group blinks out and in.
    Thursday, November 29, 2012 11:08 AM
  • Did you try to attach to this event:
    and call ev.preventDefault()?

    • Proposed as answer by Cobra Tap Saturday, December 1, 2012 10:53 PM
    Saturday, December 1, 2012 10:53 PM