locked
Can't acccess winControl property

    Question

  • document.getElementById("groupedListView").winControl;

    Im not able to access winControl property. The above code is returning an undefined value. If i use document.getElementById("groupedListView"); it wil return that element.

    Sunday, February 17, 2013 3:55 PM

Answers

  • WinJS.UI.processAll is an asynchronous function. It starts working when you call it, but there's no guarantee that it has completed when it returns. So like I said, the actual WinJS control (the .winControl for the ListView in this case) is not necessarily instantiated at the point you're trying to access it.

    The DOMContentLoaded event indicates that the HTML elements in the page have been instantiated, so element.querySelector will work, yes. But you need to put that code inside the completed function for WinJS.UI.processAll().done() as so:

    WinJS.UI.processAll().done(function () {
        var listView = element.querySelector("#groupedListView").winControl;
    });
    

    Then it should work.

    .Kraig

    • Marked as answer by Song Tian Friday, February 22, 2013 10:14 AM
    Monday, February 18, 2013 4:02 PM

All replies

  • Hi,

    Please post more code of that.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, February 18, 2013 2:43 AM
  • Without knowing more, as Song requested, my guess is that you're trying to do this before WinJS.UI.processAll as completed it's work. It's during processAll that data-win-control attributes are processed, the WinJS controls are instantiated, and those resulting objects are assigned to the .winControl properties of the HTML element containing it.

    Note that WinJS.UI.processAll returns a promise, so any work you need to do that's dependent on WinJS controls being instantiated must be contained within the completed function given to that promise's then/done method.

    Kraig
    Author, Programming Windows 8 Apps in HTML, CSS, and JavaScript,
    a free ebook from Microsoft Press

    • Proposed as answer by NagendraVivek Monday, February 18, 2013 4:17 AM
    Monday, February 18, 2013 3:09 AM
  • I'm using listview inside an iframe. Its like an app inside an iframe. Here the js code.

    (function () {
        "use strict";
        document.addEventListener("DOMContentLoaded", function () {
            WinJS.UI.processAll();
            var listView = element.querySelector("#groupedListView").winControl;
        });

    })();

    Monday, February 18, 2013 12:53 PM
  • I'm using listview inside an iframe. Its like an app inside an iframe. Here the js code.

    (function () {
        "use strict";
        document.addEventListener("DOMContentLoaded", function () {
            WinJS.UI.processAll();
            var listView = element.querySelector("#groupedListView").winControl;
        });

    })();

    I tried using that in the same function but it's not working.

    Monday, February 18, 2013 12:54 PM
  • WinJS.UI.processAll is an asynchronous function. It starts working when you call it, but there's no guarantee that it has completed when it returns. So like I said, the actual WinJS control (the .winControl for the ListView in this case) is not necessarily instantiated at the point you're trying to access it.

    The DOMContentLoaded event indicates that the HTML elements in the page have been instantiated, so element.querySelector will work, yes. But you need to put that code inside the completed function for WinJS.UI.processAll().done() as so:

    WinJS.UI.processAll().done(function () {
        var listView = element.querySelector("#groupedListView").winControl;
    });
    

    Then it should work.

    .Kraig

    • Marked as answer by Song Tian Friday, February 22, 2013 10:14 AM
    Monday, February 18, 2013 4:02 PM