:: Forum >>

"classic" select combo example

For those of us that don't like the Combo template (doesn't close in Firefox, hard to implement...), here's a simpler example using native <select>.
<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!
I was using a nice C#-String.Format()-like one-line statement to build an option, but decided to take it off the example not to confuse everyone.
String.format() available here http://chapnickman.com/2006/02/10/string-formatting-in-javascript ,
loop goes like this:
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" : "");

Ben
Wednesday, October 25, 2006
Forgot the most important!
Now, to all advanced AW-lovers out there: how would I turn this example into a nice, reusable template?
Ben
Wednesday, October 25, 2006
how we will fill the template combo in the AW please give me some code with example
Sunday, November 26, 2006

This topic is archived.


Back to support forum

Forum search