Can a select drop down list be added to my winJS toolbar via Javascript?

Question

I have created a toolbar in my windows app which contains a few buttons.

What I want is a select dropdown list along side these buttons but no idea how to create it or append it to the toolbar via Javascript (as the elements of the list will change depending on the dataset I use).

I create my toolbar like so :

//JS

var viewsDataArray = [
    new WinJS.UI.Command(null, { id: 'cmdDelete', label: 'delete', section: 'primary', type: 'button', icon: 'delete', tooltip: 'View 1', onclick: clickbuttonprintout() }),
    new WinJS.UI.Command(null, { id: 'cmdFavorite', label: 'favorite', section: 'primary', type: 'toggle', icon: 'favorite', tooltip: 'View 2', onclick: clickbuttonprintout() }),
                            ];


window.createImperativeToolBar2 = function () {
         var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer2"), {
                    data: new WinJS.Binding.List(viewsDataArray)
                });
            }

createImperativeToolBar2();

//html 

<div id="toolbarContainer2" style="direction: rtl" ></div>

Fiona

The +50 indicator already appears in the title; there is no need for you to add it yourself. Now that you have posted a bounty, please do not make any more minor title edits to bump your question. – Accommodate

Answer 1

Try using "content" command type. As per the documentation @ https://msdn.microsoft.com/en-in/library/windows/apps/dn904220.aspx its supposed to support <input> tag.

This creates an Command that can host other HTML markup inside of it, including text, <input> tags, and even a subset of WinJS controls. Only a <div> element can host a content Command.

UPDATE

https://jsfiddle.net/vnathalye/yg0rs4xc/

You need to create a <div> tag and pass it as first param to new WinJS.UI.Command.

Once that is done you can add select drop down or any other control to that div and that should appear in the toolbar. In the above jsfiddle link I've hardcoded select tag in the div.

Momentary

Is it possible to show an example of this working ? I've managed to add the 'content' in the 'type' and there's a space on my toolbar for it but obviously as I havent appended anything to it, nothing is there. Do you know how to create the select drop down via JS (as I need do it dynamically as I'm dependant on data being fed to it) and append it to this content tag ? – Fiona