ActiveWidgets • Example - move rows between two grids (selector) • move java script

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>
Example - move rows between two grids (selector)

Forum search
