More information on this topic is available in the documentation section: /aw.templates.combo/.
<html>
<head>
<title>ActiveWidgets - grid with classic "select" combobox</title>
<script src="/Test/ActiveWidgets/runtime/lib/aw.js" language="javascript"></script>
<link href="/Test/ActiveWidgets/runtime/styles/xp/aw.css" rel="stylesheet">
</head>
<body>
<script language="javascript">
<!--
var grid = new AW.UI.Grid;
var myCells = [
["a", 1, "EN"],
["b", 2, "EN"],
["c", 3, "FR"],
["d", 2, "FR"],
["e", 1, "EN"]
];
var myHeaders = ["text", "combo", "language"];
// assign cells and headers text
grid.setHeaderText(myHeaders);
grid.setCellData(myCells);
// set number of columns/rows
grid.setColumnCount(myHeaders.length);
grid.setRowCount(myCells.length);
// rows need to be bigger to fit the combos
grid.setRowHeight(25);
grid.setCellText(
function(col, row){ return buildCombo(col, row, [1, 2, 3, 4], ["Option 1", "Option 2", "Option 3", "Option 4"]) },
1); // column 1 (combo) is a combo
grid.setCellText(
function(col, row){ return buildCombo(col, row, ["EN", "FR"], ["English", "French"]) },
2); // column 2 (language) is a combo
// This will build a combo, populated with items specified in 'values' and 'texts' (must be arrays of same length),
// and select the proper item according to cell(col, row)'s value.
function buildCombo(col, row, values, texts)
{
var value = grid.getCellValue(col, row);
var select = "<select onchange='grid.setCellValue(this.value, " + col + ", " + row + ")'>";
// Here we create the options, basically putting correct value and text,
// and adding 'selected' if the current cell's value is the current option's value.
for (var i = 0; i < values.length; i++)
{
var option = "<option value='%value%' %selected%>%text%</option>";
option = option.replace("%value%", values[i]);
option = option.replace("%text%", texts[i]);
option = option.replace("%selected%", (value == values[i]) ? "selected" : "");
select += option;
}
select += "</select>"
return select;
}
grid.onCellValueChanged = function(value, col, row)
{
alert("value: " + value + ", col: " + col + ", row: " + row);
}
document.write(grid);
//-->
</script>
</body>
</html>
Note: the loop for building options is ugly!var optionPattern = "<option value='{0}' {2}>{1}</option>";
for (var i = 0; i < optionValues.length; i++)
select += optionPattern.format(values[i], texts[i], (value == values[i]) ? "selected" : "");