I have a select drop-down list and would like to populate a grid that will refresh depending on which option is selected. I want to use arrays to populate the grid.
var myData= [
["a","a1","a2"],
["b","b1","b2"],
["c","c1","c2"],
["d","d1","d2"],
["e","e1","e2"],
];
var myData1= [
["f","f1","f2"],
["g","g1","g2"],
["h","h1","h2"],
["i","i1","i2"],
["j","j1","j2"],
];
var myData2= [
["k","k1","k2"],
["l","l1","l2"],
["m","m1","m2"],
];
var myData3= [
["n","n1","n2"],
["o","o1","o2"],
["p","p1","p2"],
["q","q1","q2"],
];
Ex:
<form>
<select name="first">
<option value="0">populate grid with myData Array</option>
<option value="1">populate grid with myData1 Array</option>
<option value="2">populate grid with myData2 Array</option>
<option value="3">populate grid with myData3 Array</option>
</select>
</form>
<!-- Grid -->
<div id="grid">
<script>
//create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
//set number of rows/columns
obj.setRowProperty("count", 6);
obj.setColumnProperty("count", 3);
//provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});
//set headers width/height
obj.setRowHeaderWidth("0px");
obj.setColumnHeaderHeight("20px");
//set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});
//write grid html to the page
document.write(obj);
</script>
</div>