locked
How to get winControl of the ListView in the Pivot?

    Question

  • <div id="pivotScenario3" class="wide" data-win-control="WinJS.UI.Pivot" data-win-options="{ title: 'Me', selectedIndex: 1 }">
            <div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Title1', managedLV: true }">
                <div data-win-control="WinJS.UI.ListView"></div>
            </div>
            <div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Title2', managedLV: true }">
                <div data-win-control="WinJS.UI.ListView"></div>
            </div>
            <div class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'Title3', managedLV: true }">
                <div id="listView1" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : Items.itemList.dataSource,
                itemTemplate: select('#smallListIconTextTemplate'),
                layout: {type: WinJS.UI.GridLayout}}">
                </div>
            </div>
    

    home.js

    <script>
    
    (function () {
            "use strict";
    
            var lView;
    
            WinJS.UI.Pages.define("/default.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) {
                    lView = element.querySelector("#listView1").winControl; // is undefined
                },
    
                unload: function () {
     
                },
    
                updateLayout: function (element, viewState, lastViewState) {
     
                },
    
                selectAllClicked: function (eventInfo) {
          
                },
    
                selectionChanged: function (eventInfo) {
                    alert('changed');
                }
            });
    
    })();
    </script>

    element.querySelector("#listView1").winControl; // is undefined

    please help me! Thanks


    nihaoku.cn 创意生活!

    Saturday, October 25, 2014 12:58 AM

Answers

  • I believe the reason for this behavior is because MS recommends that each one of the items inside the Pivot control should be its own page control (html, css, js). So, I think the processor does not go into the items in the Pivot, making your winControls undefined.  I had the same issue and solved it by adding the definition of the listview by hand, which binds the winControl. You might have to also add definitions for your templates by hand if you are using those.

    WinJS.UI.Pages.define("/default.html", {

                ready
    : function (element, options) {

                    var listDiv = element.querySelector("#listView1");  // Your html element on the page.

                    var listView = new WinJS.UI.ListView(listDiv, null);  // Declare a new list view by hand.

                    listDiv.winControl; // is now not undefined

                    // add your listView properties here

                    var itemDiv = document.getElementById("smallListIconTextTemplate");  // Your template container

                    var itemTemplate = new WinJS.Binding.Template(itemDiv, null);  // Create a template

                    listView.itemTemplate = itemDiv;  // Bind the list view to the element

                    listView.forceLayout();

                }

    }

    I hope that helps.


    Tuesday, November 4, 2014 5:21 PM

All replies

  • Could you try something like:

    document.getElementById("listView1").winControl

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, October 27, 2014 1:16 AM
    Moderator
  • Thanks, but it's also undefined.
    Thursday, October 30, 2014 11:50 AM
  • I believe the reason for this behavior is because MS recommends that each one of the items inside the Pivot control should be its own page control (html, css, js). So, I think the processor does not go into the items in the Pivot, making your winControls undefined.  I had the same issue and solved it by adding the definition of the listview by hand, which binds the winControl. You might have to also add definitions for your templates by hand if you are using those.

    WinJS.UI.Pages.define("/default.html", {

                ready
    : function (element, options) {

                    var listDiv = element.querySelector("#listView1");  // Your html element on the page.

                    var listView = new WinJS.UI.ListView(listDiv, null);  // Declare a new list view by hand.

                    listDiv.winControl; // is now not undefined

                    // add your listView properties here

                    var itemDiv = document.getElementById("smallListIconTextTemplate");  // Your template container

                    var itemTemplate = new WinJS.Binding.Template(itemDiv, null);  // Create a template

                    listView.itemTemplate = itemDiv;  // Bind the list view to the element

                    listView.forceLayout();

                }

    }

    I hope that helps.


    Tuesday, November 4, 2014 5:21 PM
  • Wednesday, November 5, 2014 5:47 PM