locked
Switching of ListView itemDataSource

    Question

  • Is it possible to change the itemDataSource between lists?  Below is a snippet of the scrubbed code I am trying to use.  It’s not working, or returning errors.  DOM Explorer confirms no change is being made when selecting the button.  Javascript console shows the following when manually entering the command:

    listView.datasource = Dog.dataSource

    [object Object]{...}

    <div class="myListView" id="listView"

                            data-win-control="WinJS.UI.ListView"

                            data-win-options="{ itemDataSource: Cat.dataSource}”>

                        </div>

    var Dog = new WinJS.Binding.List([
    { title: "dog", text: "dog" }]);

    var Cat = new WinJS.Binding.List([
    { title: "cat", text: "cat" }]);

    Function switchtocat(){
    listView1.itemDataSource = Cat.DataSource
    }

    Function switchtodog(){
    listView1.itemDataSource = Dog.DataSource
    }

    Is it possible to make this or something similar work?  Also tried inserting the HTML via .innerHTML with no success.

    Thursday, May 10, 2012 5:55 AM

Answers

  • Yes you can change data sources.  You may have made an error in your switching functions: Cat.DataSource should be Cat.dataSource.

    Here is a simple example of your scenario that works:

    <body>
        <div id="myTemplate" data-win-control="WinJS.Binding.Template">
            <div>
                <div data-win-bind="textContent: title"></div>
                <div data-win-bind="textContent: text"></div>
            </div>
        </div>
        <button id="cats">Cats</button>
        <button id="dogs">Dogs</button>
        <div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate:select('#myTemplate')}">
        </div>
    </body>

    (function () {
        "use strict";
    
        //Data sources
        var Dog = new WinJS.Binding.List([
    { title: "dog", text: "dog" }]);
    
        var Cat = new WinJS.Binding.List([
    { title: "cat", text: "cat" }]);
    
        //Button event handlers to switch sources
        function switchtocat() {
            listView1.itemDataSource = Cat.dataSource
        }
    
        function switchtodog() {
            listView1.itemDataSource = Dog.dataSource
        }
    
        //Hook up events
        WinJS.Utilities.ready(function () {
            document.getElementById('cats').addEventListener('click', switchtocat, false);
            document.getElementById('dogs').addEventListener('click', switchtodog, false);
        });
    
        //Get handle to the listView control
        var listView1;
        WinJS.UI.processAll().then(function () {
            listView1 = document.getElementById('listView').winControl;
        });
    
    })();

    • Proposed as answer by jrboddie Thursday, May 10, 2012 10:48 AM
    • Marked as answer by Lance Flugelhorn Thursday, May 10, 2012 11:38 AM
    Thursday, May 10, 2012 10:46 AM

All replies

  • Yes you can change data sources.  You may have made an error in your switching functions: Cat.DataSource should be Cat.dataSource.

    Here is a simple example of your scenario that works:

    <body>
        <div id="myTemplate" data-win-control="WinJS.Binding.Template">
            <div>
                <div data-win-bind="textContent: title"></div>
                <div data-win-bind="textContent: text"></div>
            </div>
        </div>
        <button id="cats">Cats</button>
        <button id="dogs">Dogs</button>
        <div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate:select('#myTemplate')}">
        </div>
    </body>

    (function () {
        "use strict";
    
        //Data sources
        var Dog = new WinJS.Binding.List([
    { title: "dog", text: "dog" }]);
    
        var Cat = new WinJS.Binding.List([
    { title: "cat", text: "cat" }]);
    
        //Button event handlers to switch sources
        function switchtocat() {
            listView1.itemDataSource = Cat.dataSource
        }
    
        function switchtodog() {
            listView1.itemDataSource = Dog.dataSource
        }
    
        //Hook up events
        WinJS.Utilities.ready(function () {
            document.getElementById('cats').addEventListener('click', switchtocat, false);
            document.getElementById('dogs').addEventListener('click', switchtodog, false);
        });
    
        //Get handle to the listView control
        var listView1;
        WinJS.UI.processAll().then(function () {
            listView1 = document.getElementById('listView').winControl;
        });
    
    })();

    • Proposed as answer by jrboddie Thursday, May 10, 2012 10:48 AM
    • Marked as answer by Lance Flugelhorn Thursday, May 10, 2012 11:38 AM
    Thursday, May 10, 2012 10:46 AM
  • Works perfect, thanks!

    I suspect my problem was not using:

       WinJS.UI.processAll().then(function () {
            listView1 = document.getElementById('listView').winControl;
        });

    Thursday, May 10, 2012 11:39 AM
  • Actually, I think there is a problem with my suggestion.  The WinJS.UI.processAll probably should be inside the WinJS.Utilities.ready construct to make sure the document is loaded before processing.  If you are using the template, this should not be a problem.

    (function () {
        "use strict";
    
        //Data sources
        var Dog = new WinJS.Binding.List([
    { title: "dog", text: "dog" }]);
    
        var Cat = new WinJS.Binding.List([
    { title: "cat", text: "cat" }]);
    
        //Button event handlers to switch sources
        function switchtocat() {
            listView1.itemDataSource = Cat.dataSource
        }
    
        function switchtodog() {
            listView1.itemDataSource = Dog.dataSource
        }
    
        var listView1;
        //Hook up events and controls
        WinJS.Utilities.ready(function () {
            document.getElementById('cats').addEventListener('click', switchtocat, false);
            document.getElementById('dogs').addEventListener('click', switchtodog, false);
            WinJS.UI.processAll().then(function () {
                listView1 = document.getElementById('listView').winControl;
            });
        });
    })();

    Thursday, May 10, 2012 12:09 PM