Remove From My Forums

Switching of ListView itemDataSource

Question
0

Sign in to vote

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

0

Sign in to vote

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

Answered by:

Switching of ListView itemDataSource

Question

Answers

All replies