More information on this topic is available in the documentation section: /aw.templates.combo/.
<html>
<head>
<title>ActiveWidgets - grid with classic "select" combobox - on edit only</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 getText(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 getText(col, row, ["EN", "FR"], ["English", "French"]) },
2); // column 2 (language) is a combo
grid.onCellValueChanged = function(value, col, row)
{
alert("value: " + value + ", col: " + col + ", row: " + row);
}
var lastCell;
grid.onCellClicked = function(e, col, row)
{
if (lastCell && lastCell.col == col && lastCell.row == row)
return; // same cell was clicked: do nothing
//console.debug("onCellClicked - col: " + col + ", row: " + row);
if (lastCell && (lastCell.col == 1 || lastCell.col == 2))
{ // we had a combo cell selected before: was it changed?
var originalValue = grid.getCellValue(lastCell.col, lastCell.row);
var newValue = grid.getCellTemplate(lastCell.col, lastCell.row).element().getElementsByTagName("select")[0].value;
//console.debug("had combo before - original value: %s - new value: %s", originalValue, newValue);
// if value WAS changed, commit changes
if (newValue != originalValue)
grid.setCellValue(newValue, lastCell.col, lastCell.row);
// why isn't the cell updated on setCellValue ??
// I shouldn't have to do that manually...
if (lastCell.col == 1)
{
var text = getText(lastCell.col, lastCell.row, [1, 2, 3, 4], ["Option 1", "Option 2", "Option 3", "Option 4"]);
grid.setCellText(text, lastCell.col, lastCell.row);
}
else if (lastCell.col == 2)
{
var text = getText(lastCell.col, lastCell.row, ["EN", "FR"], ["English", "French"]);
grid.setCellText(text, lastCell.col, lastCell.row);
}
}
// current cell is now the last cell
lastCell = {col: col, row: row};
// change cell content to a combobox (it would be nice to open it automatically too...)
if (col == 1)
{
var text = buildCombo(col, row, [1, 2, 3, 4], ["Option 1", "Option 2", "Option 3", "Option 4"]);
grid.setCellText(text, col, row);
}
else if (col == 2)
{
var text = buildCombo(col, row, ["EN", "FR"], ["English", "French"]);
grid.setCellText(text, col, row);
}
}
// This will get the text corresponding to cell(col, row)'s value.
function getText(col, row, values, texts)
{
var value = grid.getCellValue(col, row);
for (var i = 0; i < values.length; i++)
if (values[i] == value)
return texts[i];
}
// 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>";
// 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;
}
document.write(grid);
//-->
</script>
</body>
</html>