locked
Adding a List Box to a WinJS.Binding.Template

    Question

  • Hello there

    I am trying to work out how to add editable controls (in particular a list box (<select>) and a <canvas>) to a list view (WinJS.UI.ListView) in an 8.1 HTML5\JavaScript store app.  I.E I want to have a <select> and a <canvas> on each tile, and to programmatically access each one.

    At the moment, I have a simple template:

    <div id="dwcIconElementsTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 200px; height: 60px;">
            <span data-win-bind="innerText: sName;"></span>
            <select id="cboIconType"></select>
            <canvas id="cvnIcon"></canvas>
        </div>
    </div>

    An example of the sort of code I want to implement (to populate the list boxes) is below.

    This does in fact work to some extent (each instance of the list box is populated correctly), however the list box does not work correctly (I can't select a new value in any instance of the list box).

    In this case, I want to implement the same functionality on all instances of the list box (i.e. the list of options is the same in each one), however I need to extend the application so that I can access the individual elements (for example, I need to draw a different picture on each canvas, and will need to respond to events such as onchange etc.).

    Many thanks

    Geoff Olding

    function mRefreshElements() {
        MURefreshList(oController.oIcon.aoCurrentPictureElements(), "dwcIconElements", "dwcIconElementsTemplate");
     
        var cboIconType = document.getElementById("cboIconType");
        MUPopulateCombo("cboIconType", oController.oIcon.asIconTypeOptions, -1);
    }

    function MUPopulateCombo(sElement, asData, iSelectedIndex)
    {
        try{
            var nElement;
            var nElements;
            var cboElement = document.getElementById(sElement);
            var optNew;

            MUClearCombo(sElement);
            nElements = asData.length;
            for (nElement = 0; nElement < nElements; nElement++) {
                optNew = document.createElement("option");
                optNew.text = asData[nElement];
                cboElement.add(optNew);
            }
            if (iSelectedIndex != undefined) {
                cboElement.selectedIndex = iSelectedIndex;
            }
        }
        catch (exThis) {
            MUHandleException(exThis, "MUPopulateCombo");
        }
    }

    Wednesday, March 19, 2014 11:06 AM

All replies

  • Hi Geoff,

    May I know when you fire the mRefreshElements() event? Or can you tell us a scenario for calling this method.

    Basically if you call var cboIconType = document.getElementById("cboIconType"); The result might be a collection of Select control, not what you need.

    --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.

    Thursday, March 20, 2014 7:42 AM
    Moderator
  • Hi James

    The code is run when the application initialises (from app.onactivated()).

    I get the same effect if I run the code from a button instead.

    As far as I can see, the call to document.getElementById() returns one object.  I realise that the call to document.getElementByid() is probably wrong - my post is about what I should be doing to access the individual instances of the list box.

    Regards

    Geoff Olding

    Thursday, March 20, 2014 9:33 AM
  • Hi Geoff,

    Yes, but in your page, there are many objects have the same id, so getElementById() is not a good option.

    However I have an idea, you can assign a name to select control, and use getElementsByName() to get a list of controls, if you know the index, it would be very easy to modify the item.

    --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.

    Friday, March 21, 2014 10:58 AM
    Moderator
  • Thanks for your suggestion.

    If I call document.getElementsByName() immediately after setting the data source of the listview, I don't get the required result from getElementsByName() (instead, I get an array of 1 item).

    If I subsequently call document.getElementsByname() (I am testing this from a button), I do seem to get the right result (an array of 4 items, which is the right number), and I can populate each of the individual items (after population, I can see the 7 options associated with each item in the Quickwatch window).

    However, the list boxes are not displayed correctly - if I click on a list box, it opens up with a long list of empty options, as if the list box had not been populated.

    Regards

    Geoff Olding

    Tuesday, March 25, 2014 10:22 AM