Example - move rows between two grids (selector)

Quite common it is necessary to build a form where the user selects items by moving them from one list to another (with two butons). Here is an example which implements such form with two grids.

Both grids share the same dataset and the code only moves row indices from one grid to another.
<html>
<head>
    <script src="../../runtime/lib/aw.js"></script>
    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>

    .aw-column-0 {width: 50px}
    .aw-column-1 {width: 150px}

</style>
<script>

    var myCells = [
        ["MSFT","Microsoft Corporation"],
        ["ORCL", "Oracle Corporation"],
        ["SAP", "SAP AG (ADR)"],
        ["CA", "Computer Associates Inter"],
        ["ERTS", "Electronic Arts Inc."],
        ["SFTBF", "Softbank Corp. (ADR)"],
        ["VRTS", "Veritas Software Corp."],
        ["SYMC", "Symantec Corporation"],
        ["INFY", "Infosys Technologies Ltd."],
        ["INTU", "Intuit Inc."],
        ["ADBE", "Adobe Systems Incorporate"],
        ["PSFT", "PeopleSoft, Inc."],
        ["SEBL", "Siebel Systems, Inc."],
        ["BEAS", "BEA Systems, Inc."],
        ["SNPS", "Synopsys, Inc."],
        ["CHKP", "Check Point Software Tech"],
        ["MERQ", "Mercury Interactive Corp."],
        ["DOX", "Amdocs Limited"],
        ["CTXS", "Citrix Systems, Inc."],
        ["KNM", "Konami Corporation (ADR)"]
    ];

    var myHeaders = [
        "Ticker", "Company Name"
    ];

    var i, j;

    // initialize source row indices array
    var source = [];
    for (i=0; i<myCells.length; i++){
        source[i] = i;
    }

    // source grid
    var obj1 = new AW.UI.Grid;
    obj1.setSize(200, 300);
    obj1.setPosition(50, 50);
    obj1.setCellData(myCells);
    obj1.setHeaderText(myHeaders);
    obj1.setColumnCount(myHeaders.length);
    obj1.setRowIndices(source);
    obj1.setRowCount(source.length);
    obj1.setSelectionMode("multi-row");
    document.write(obj1);

    // initialize target row indices array
    var target = [];

    // target grid
    var obj2 = new AW.UI.Grid;
    obj2.setSize(200, 300);
    obj2.setPosition(400, 50);
    obj2.setCellData(myCells);
    obj2.setHeaderText(myHeaders);
    obj2.setColumnCount(myHeaders.length);
    obj2.setRowIndices(target);
    obj2.setRowCount(target.length);
    obj2.setSelectionMode("multi-row");
    document.write(obj2);

    // move rows from source to target grid
    function toTarget(){
        var a = obj1.getSelectedRows();
        for(i=0; i<a.length; i++){
            obj1.deleteRow(a[i]);
            obj2.addRow(a[i]);
        }
        obj2.setSelectedRows(a.concat());
        obj1.setSelectedRows([]);

        label.setControlText("Target: " + obj2.getRowIndices());

        obj1.raiseEvent("adjustScrollBars"); // bug in AW 2.0
        obj2.raiseEvent("adjustScrollBars");
    }

    // move rows from target back to source
    function toSource(){
        var a = obj2.getSelectedRows();
        for(i=0; i<a.length; i++){
            obj2.deleteRow(a[i]);
            obj1.addRow(a[i]);
        }
        obj1.setSelectedRows(a.concat());
        obj2.setSelectedRows([]);

        label.setControlText("Source: " + obj1.getRowIndices());

        obj1.raiseEvent("adjustScrollBars"); // bug in AW 2.0
        obj2.raiseEvent("adjustScrollBars");
    }

    var button1 = new AW.UI.Button;
    button1.setPosition(300, 150);
    button1.setControlText("&gt;&gt;");
    button1.onControlClicked = toTarget;
    document.write(button1);

    var button2 = new AW.UI.Button;
    button2.setPosition(300, 200);
    button2.setControlText("&lt;&lt;");
    button2.onControlClicked = toSource;
    document.write(button2);

    var label = new AW.UI.Label;
    label.setPosition(50, 400);
    document.write(label);

</script>
</body>
</html>
Alex (ActiveWidgets)
April 13,
Example - move rows between two grids (selector)

See also:

Search

New Data Grid

Version 2
