locked
How to WinJS.ui.setOptions not support template in listview?

    Question


  • Html template:

     <div id="pivotContactItem" data-win-control="WinJS.UI.Pivot">
                    <div data-win-control="WinJS.UI.PivotItem" data-win-options="{'header':'People'}" style="left: 20000px;">
                    <div id="divDisplayItems" class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
                        <div class="smallListIconTextItem">

                            <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: ImageAvatar" />
                            <div class="status">
                                <img src="#" data-win-bind="src: StatusIcon" />
                            </div>

                            <div class="smallListIconTextItem-Detail">
                                <h4 data-win-bind="textContent: DisplayName"></h4>
                                <h6 data-win-bind="textContent: Country"></h6>
                            </div>
                            <div class="box-social">
                                <center>
                                    <img class="social-icon" src="../../images/thumnail/superchat.png"
                                         data-win-bind="src:SocialIconType" />
                                </center>
                            </div>

                        </div>
                    </div>
                    <div  class="listLayoutTopHeaderTemplate" data-win-control="WinJS.Binding.Template">
                        <div class="listLayoutTopHeaderTemplateRoot">
                            <div class="boxgroup" data-win-bind="innerHTML: Groupname"></div>
                        </div>
                    </div>

                    <!-- The declarative markup necesary for ListView instantiation -->
                    <!-- Call WinJS.UI.processAll() in your initialization code -->
                    <div id="ContactlistView"
                         class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView"
                         data-win-options="{
                             itemTemplate: select('.smallListIconTextTemplate'),
                             groupHeaderTemplate: select('.listLayoutTopHeaderTemplate'),">
                    </div>

                </div>
            </div>

    My Code Javacript :
                WinJS.UI.setOptions(getlist, {
                    itemDataSource: ContactListView.itemList.dataSource,
                    itemTemplate: element.querySelector("smallListIconTextTemplate"),// can not find select template 

                    groupDataSource: ContactListView.itemList.groups.dataSource,
                    groupHeaderTemplate: element.querySelector("listLayoutTopHeaderTemplate"),// can not find select template 

                    selectionMode: WinJS.UI.SelectionMode.single,
                    tapBehavior: WinJS.UI.TapBehavior.invokeOnly,
                    swipeBehavior: WinJS.UI.SwipeBehavior.none,
                    layout: { type: WinJS.UI.ListLayout,  groupHeaderPosition: 'top' },
                    oniteminvoked: itemClick
                });

               
    • Edited by pheaktraty Thursday, December 04, 2014 7:59 AM
    Thursday, December 04, 2014 7:58 AM

Answers

  • Hi pheaktraty,

    As I can see from the documentation of setOptions function, the first parameter should be a control, however you wrote "getlist" here, could you validate if your getlist is a ListView control here?

    In general we should use something like: document.getElementById("mylist").winControl to get a control object, ref: winControl.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, December 05, 2014 1:59 AM
    Moderator
  • Hi,

    In addition to what Jamlez Hez commented, you are missing some crucial dots from your selectors

    // ...
    itemTemplate: element.querySelector("smallListIconTextTemplate"),
    // ...
    
    // Should be
    
    // ...
    itemTemplate: element.querySelector(".smallListIconTextTemplate"),
    // ...

    The parameter given to querySelector() should be a CSS-style selector string (https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector) - in your original version the function is trying to find an element with tag "smallListIconTextTemplate", which obviously doesn't exist, that name was assigned to a div's 'class' attribute.

    Also, a related note: you seem to be setting the itemTemplate already in the HTML in declarative manner, so that itemTemplate set in JS code shouldn't be needed at all in this case.

    Wednesday, December 10, 2014 6:19 PM

All replies

  • Hi pheaktraty,

    As I can see from the documentation of setOptions function, the first parameter should be a control, however you wrote "getlist" here, could you validate if your getlist is a ListView control here?

    In general we should use something like: document.getElementById("mylist").winControl to get a control object, ref: winControl.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Friday, December 05, 2014 1:59 AM
    Moderator
  • Hi,

    In addition to what Jamlez Hez commented, you are missing some crucial dots from your selectors

    // ...
    itemTemplate: element.querySelector("smallListIconTextTemplate"),
    // ...
    
    // Should be
    
    // ...
    itemTemplate: element.querySelector(".smallListIconTextTemplate"),
    // ...

    The parameter given to querySelector() should be a CSS-style selector string (https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector) - in your original version the function is trying to find an element with tag "smallListIconTextTemplate", which obviously doesn't exist, that name was assigned to a div's 'class' attribute.

    Also, a related note: you seem to be setting the itemTemplate already in the HTML in declarative manner, so that itemTemplate set in JS code shouldn't be needed at all in this case.

    Wednesday, December 10, 2014 6:19 PM