3.0.0

Move rows from one to the other grid control

Hi,

I made a control where you can send a row or multiple rows between two grids. It works with 2 javascript arrays but I think it is also possible with XML dataislands or XML source.

It works in IE and firefox . Maybe you can use it.
Put it in the examples\quickref and it works right away.

<code>
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/aqua/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>
#myGrid,#myGrid2 { width: 240px}
#myGrid,#myGrid2 { height: 140px}
#myGrid,#myGrid2 { border-width: 1px}
#myGrid,#myGrid2 { border-color: #000000}
#myGrid .aw-grid-row,#myGrid2 .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc}
/* Alternate row colors */
#myGrid .aw-alternate-even,#myGrid2 .aw-alternate-even {background: #fff;}
#myGrid .aw-alternate-odd,#myGrid2 .aw-alternate-odd {background: #eee;}
/* Selected rows */
#myGrid .aw-rows-selected,#myGrid2 .aw-rows-selected {background: #009999;}

</style>

<script>

// data sources
var myData = [
["Arie","End User"],
["Joost","End User"],
["Peter","End User"],
["Gert","End User"],
["Henk","Admin"],
["Bert","WebAdmin"],
["Koos","SuperUser"]
];


var myData2 = [["empty","empty"]];


var myData3 = [
["empty","empty"],
["Arie2","End User"],
["Joost2","End User"],
["Peter2","End User"],
["Gert2","End User"],
["Henk2","Admin"],
["Bert2","WebAdmin"],
["Koos2","SuperUser"]
];


</script>


<script>
// sets the headers
var myHeaders = ["User", "Role"];

// built the grid
var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setCellText(myData);
obj.setHeaderText(myHeaders);
obj.setSelectionMode("multi-row");
obj.setColumnCount(2);
obj.setRowCount(myData.length);
document.write(obj);

// shift tot the left button
var button = new AW.UI.Button;
button.setControlText("<<");
document.write(button);
button.onClick = function(){
shiftrowback()
}

// shift tot the right button
var button = new AW.UI.Button;
button.setControlText(">>");
document.write(button);
button.onClick = function(){
shiftrow();
}

// built the grid
var obj2 = new AW.UI.Grid;
obj2.setId("myGrid2");
obj2.setCellText(myData2);
obj2.setHeaderText(myHeaders);
obj2.setSelectionMode("multi-row");
obj2.setColumnCount(2);
myData2.splice(0,1);
obj2.setRowCount(myData2.length);
document.write(obj2);

// grid actions
obj.onRowDoubleClicked = function(event, index){ shiftrow(); };
obj2.onRowDoubleClicked = function(event, index){ shiftrowback(); };
obj.onRowClicked = function(event, index){ obj2.setSelectedRows([]) ; window.status = "Row " + index + " clicked"};
obj2.onRowClicked = function(event, index){ obj.setSelectedRows([]) ; window.status = "Row " + index + " clicked"};
obj.onControlClicked = function(event){ var gridfocus = obj ; var datafocus= myData; window.status ="obj clicked"};
obj2.onControlClicked = function(event){ var gridfocus = obj2 ; var datafocus= myData2; window.status ="obj2 clicked"};
//obj.onSelectedRowsChanged = function(array){ window.status = "selected rows: " + array };

// ###### functions

// Add a row
function addRow(rowData,grid,dataSrc){
dataSrc.unshift(rowData);
grid.setRowCount(dataSrc.length);
}
// delete a row
function delRow(index,grid,dataSrc){
dataSrc.splice(index,1);
grid.setRowCount(dataSrc.length);
}

// move rows to the right
function shiftrow(){
selectedRows = obj.getSelectedRows()
selectedRows.sort();
obj.setSelectedRows([]);
for(iter in selectedRows){
index = selectedRows[iter];
rowData = myData[index];
addRow(rowData,obj2,myData2);
}
selectedRows.reverse()
for(iter in selectedRows){
index = selectedRows[iter];
delRow(index,obj,myData);
}
obj.refresh()
obj2.refresh()
}

// move rows to the left
function shiftrowback(){
selectedRows = obj2.getSelectedRows()
selectedRows.sort();
obj2.setSelectedRows([]);
for(iter in selectedRows){
index = selectedRows[iter];
rowData = myData2[index];
addRow(rowData,obj,myData);
}
selectedRows.reverse()
for(iter in selectedRows){
index = selectedRows[iter];
delRow(index,obj2,myData2);
}
obj.refresh()
obj2.refresh()
}



</script>


<p></p>

<script>


var button = new AW.UI.Button;
button.setControlText("Selectall");
document.write(button);

button.onClick = function(){

rowindex = new Array()
for(key in myData){
rowindex[key]=key;
}
obj.setSelectedRows(rowindex);
alert(datafocus);
}

var button = new AW.UI.Button;
button.setControlText("Deselectall");
document.write(button);

button.onClick = function(){

obj.setSelectedRows([]);

}

document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");

var button = new AW.UI.Button;
button.setControlText("Selectall");
document.write(button);

button.onClick = function(){

rowindex = new Array()
for(key in myData2){
rowindex[key]=key;
}
obj2.setSelectedRows(rowindex);

}

var button = new AW.UI.Button;
button.setControlText("Deselectall");
document.write(button);

button.onClick = function(){

obj2.setSelectedRows([]);

}



</script>
</body>
</html>
</code>
Tim
June 29,
hi tim,

a good example, it's working fine and i like it.

greetings
mono
June 29,
There is only one thing not working yet.

When you do a multiselect with ctrl you can select rows in both grids.
Also the scrollbar disappears sometimes in IE when you shift rows to the other grid. But I used the free trial maybe this is working ok if you bougth the scripts.

Cheers!
Tim
June 30,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.