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("                                             ");

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.

Move rows from one to the other grid control

See also:

Search

New Data Grid

Version 2