:: Forum >>

"classic" select combo example - now on edit only!

Same as previous example ( /javascript.forum.16874.1/classic-select-combo-example.html ), now the select appears only onCellClicked.
It all works but it's messy, not really reusable and column-wise, I still think I could do much better with a template, but I don't really know how to start.

<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>
Ben
Wednesday, October 25, 2006

This topic is archived.


Back to support forum

Forum search