locked
document.getElementById('favouriteList').winControl returning undefined RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi, 

    I am trying to create a page with WinJS.UI.Hub. It has a ListView nested inside it. It looks something like this:

          <div data-win-control="WinJS.UI.Hub">
                <div id="hubse" data-win-control="WinJS.UI.HubSection" data-win-options="{header : 'Products', isHeaderStatic : true}">
                    <div id="ItemsList" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{selectionMode:'multi', layout:{type : WinJS.UI.GridView}}" style="height:80vh"></div>
                </div>
             </div>

    In the JS file, i am trying to get the ListView like this. 

            var list2 = document.getElementById('ItemsList').winControl;

    Unfortunately, list2 comes out to be undefined. After troubleshooting this a bit, i found that if the same ListView was put out side the WinJS.UI.Hub, the above line of code works perfectly fine. 

    Is this a bug? or i need to be using ListView differently when nested inside the Hub?

    Thanks

    Gurpreet Singh

    Saturday, November 23, 2013 7:15 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Gurpreet,

    You need to wait for the hub wincontrol to finish loading.  Using the sample template you could do something like this:

        ready: function (element, options) {
            var hub = element.querySelector(".hub").winControl;
            
            hub.onheaderinvoked = function (args) {
                args.detail.section.onheaderinvoked(args);
            };
            hub.onloadingstatechanged = function (args) {
                if (args.srcElement === hub.element && args.detail.loadingState === "complete") {
                    hub.onloadingstatechanged = null;
                    hub.element.focus();
                    var myList = document.getElementById("theList");
                    var ctl = myList.winControl;

                }
            }
    Jeff

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Monday, November 25, 2013 6:31 PM
    Moderator

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    You have to call it in or after the page ready function.  It will not be created until then.

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Monday, November 25, 2013 3:55 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Jeff, 

    Apologies. But, i am calling it in the ready function. I understand that it needs to be called in the ready function. 

    I am putting the code below:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>

                <div data-win-control="WinJS.UI.Hub">
                    <div data-win-control="WinJS.UI.HubSection" data-win-options="{header : 'Test'}">
                        <div id="list" data-win-control="WinJS.UI.ListView"></div>
                    </div>
                </div>

</body>
</html>


    (function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.

            BindDataToList();
        }
    });

    function BindDataToList()
    {
        var data = new WinJS.Binding.List([{ Name: "Bob" }, { Name: "Charles" }, { Name: "Tom" }]);

        var listView = document.getElementById("list").winControl;

        listView.itemDataSource = data.dataSource;
    }
})();

    Please let me know if you need me to share a sample project with you. 

    Thanks

    Gurpreet Singh

    Monday, November 25, 2013 4:54 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    I see.... Sorry for misunderstanding. Your issue is that you can get the object itself but the winControl is not instantiated yet.  You can defer getting that when the control has been instantiated. Let me do a quick sample from the template and get back to you.

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Monday, November 25, 2013 6:25 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Gurpreet,

    You need to wait for the hub wincontrol to finish loading.  Using the sample template you could do something like this:

        ready: function (element, options) {
            var hub = element.querySelector(".hub").winControl;
            
            hub.onheaderinvoked = function (args) {
                args.detail.section.onheaderinvoked(args);
            };
            hub.onloadingstatechanged = function (args) {
                if (args.srcElement === hub.element && args.detail.loadingState === "complete") {
                    hub.onloadingstatechanged = null;
                    hub.element.focus();
                    var myList = document.getElementById("theList");
                    var ctl = myList.winControl;

                }
            }
    Jeff

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Monday, November 25, 2013 6:31 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Jeff,

    Thanks for the help!!!

    That worked perfectly!!

    Thanks

    Gurpreet Singh

    Monday, November 25, 2013 7:52 PM