locked
Dynamic data on ListView Items

    Question

  • How to change the data displayed on a ListView Item dynamically ?  (At periodic intervals)
    Thursday, October 25, 2012 3:46 PM

Answers

  • Hi Aashish_Gandhi,

    Since the ListView need to be bound with a collection of data items, if the entire collection changed, you probably need to reconstruct a WinJS.Binding.List with the new array/collection and set it as dataSource to the ListView control.

    Or the list (dataSource) remain unchanged, but you want to change some of the items in the list and make the ListView UI reflects the underlying data item changes(such as changes on some properties of the first item in the dataSource list), you can make use of Observable data objects when building the dataSource list. The WinJS.Binding.as method helps you convert an normal JSON object into an observable object so that changes on the observable instance can be updated to data binding UI elements (see following reference):

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

    Here is a simple example which uses ListView to display some RSS feed items. Each rssFeed item JSON object (contained the dataSource list ) is an observable object.

    WinJS.Namespace.define(
            "ListViewPageUtils", {
                feedItems: feedItems
            }
            );
    
    
    
    function loadBlogFeedsFromWebAsXML() {
            var feedUrl = "http://blogs.msdn.com/b/windowsstore/rss.aspx";
    
            console.log("Start retrieving feed at: " + feedUrl + " ... ");
    
    
            WinJS.xhr({url:feedUrl}).then(
            function (result) {
    
                var xmlDoc = new Windows.Data.Xml.Dom.XmlDocument();
                xmlDoc.loadXml(result.responseText);
    
                var nodes = xmlDoc.selectNodes("//item");
               
                console.log("Retrieved Feed, there are " + nodes.length + " items.");
    
                var items = new Array();
    
                nodes.forEach(function (val, idx, travObj) {
    
                    var title = val.selectSingleNode("title").innerText;
                    var description = val.selectSingleNode("description").innerText;
                    var link = val.selectSingleNode("link").innerText;
    		
    		// convert each object to an observable object here
                    var newItem = WinJS.Binding.as( {
                        title: title,
                        summary: description,
                        uri:link
                    });
                    
                    items.push(newItem);
    
                    
                }
                );
    
                ListViewPageUtils.feedItems = items;
    
    
                // Bind to ListView
    
                var lv = document.getElementById('lvBlogFeeds').winControl;
                lv.itemDataSource = new WinJS.Binding.List(ListViewPageUtils.feedItems).dataSource;
            },
            function (err) {
                console.log("Error occured when retrieving feed.");
            }
            );
    
        }
    


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by Song Tian Wednesday, October 31, 2012 8:52 AM
    Friday, October 26, 2012 9:16 AM
    Moderator