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");
}
}
