<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
This is a drag and drop example between 2 grids.<br>
<b>Click and drag a cell to move a row from the left grid to the right grid</b>.
<hr> <BR><BR>
<style>
#myGrid { width: 300px; height:150px; margin: 0px; padding: 0px}
#myGrid .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myGrid .aw-alternate-even {background: #E7E7D6;}
#myGrid .aw-alternate-odd {background: #F7F3E7;}
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-0 {color: red;}
#myGrid .aw-mouseover-row {background: lightblue}
#myGrid .aw-mouseover-row .aw-column-0 {background: lightblue}
#myGrid {-moz-user-select: none}
#myTarget { width: 300px; height:150px; margin: 0px; padding: 0px}
#myTarget .aw-alternate-even .aw-column-0 {background: #E0E0E0;}
#myTarget .aw-alternate-odd .aw-column-0 {background: #E0E0E0;}
#myTarget .aw-alternate-even {background: #E7E7D6;}
#myTarget .aw-alternate-odd {background: #F7F3E7;}
#myTarget .aw-rows-selected {background: #316ac5;}
#myTarget .aw-rows-selected .aw-column-1 {background: #316ac5;}
#myTarget .aw-rows-selected .aw-column-0 {color: red;}
#myTarget .aw-mouseover-row {background: lightblue}
#myTarget .aw-mouseover-row .aw-column-0 {background: lightblue}
#myTarget {-moz-user-select: none}
</style>
<div id="englob" onmousemove="dragRowMouseMove(event)" >
<script>
var HeaderText = ["Number","Description"];
var CellText = [
["1","Description 1"],
["2","Description 2"],
["3","Description 3"],
["4","Description 4"],
["5","Description 5"],
["6","Description 6"],
["7","Description 7"],
["8","Description 8"],
["9","Description 9"],
["10","Description 10"],
["11","Description 11"],
["12","Description 12"],
["13","Description 13"],
["14","Description 14"],
["15","Description 15"]
];
var TargetCellText = [[]]; //If i don't specify that we have an array of array here, it will put the array in the first column
var obj = new AW.UI.Grid;
obj.setId("myGrid");
obj.setHeaderText(HeaderText);
obj.setCellText(CellText);
obj.setColumnCount(2);
obj.setRowCount(15);
obj.setVirtualMode(false);
// DISABLE SORTING - This simple example will not work if sorted
obj.onHeaderClicked = function(event,index){return 'disabled'};
obj.setSelectionMode("single-row");
obj.setSelectorVisible(true);
obj.setSelectorWidth(25);
var target = new AW.UI.Grid;
target.setId("myTarget");
target.setHeaderText(HeaderText);
target.setCellText(TargetCellText);
target.setColumnCount(2);
target.setRowCount(1);
target.setVirtualMode(false);
// DISABLE SORTING - This simple example will not work if sorted
target.onHeaderClicked = function(event,index){return 'disabled'};
target.setSelectionMode("single-row");
target.setSelectorVisible(true);
target.setSelectorWidth(25);
/**********************/
function DeleteSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice(insertindex,1);
obj.setRowCount(obj.getRowCount()-1);
obj.refresh();
}
/**********************/
function AddNewRowBelowSelectedRow(){
var insertindex=obj.getSelectedRows([0]);
CellText.splice((insertindex*1)+1,0,["new","new"]);
obj.setRowCount(obj.getRowCount()+1);
obj.refresh();
}
// DRAGGING FUNCTIONS
var startrow;
/**********************/
// BEGIN DRAG & DROP - THIS RECORDS THE STARTING (DRAG) ROW
function dragstart(e, column, row){
startrow=row;
var FeedbackRow = document.getElementById('FeedbackRow');
FeedbackRow.style.display="";
dragRowMouseMove(e);
var content = '<table width="300"><tr><td>'+CellText[row][0]+'</td><td>'+CellText[row][1]+'</td></tr></table>';
FeedbackRow.innerHTML=content;
}
/**********************/
// END DRAG & DROP - THIS CODE MOVES THE DRAG ROW TO THE DROP LOCATION
function dragstop(){
startrow=undefined;
var FeedbackRow = document.getElementById('FeedbackRow');
FeedbackRow.style.display="none";
}
var dragRowMouseMove = function(event) {
var FeedbackRow = document.getElementById('FeedbackRow');
if (FeedbackRow.style.display!="none")
{
// DRAG IN PROGRESS -
// 1) MOVES THE VISUAL FEEDBACK ROW
// 2) AUTO SCROLLS THE TARGET GRID IF NEEDED
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
FeedbackRow.style.top=y-18;
FeedbackRow.style.left=x-100;
document.getElementById('debug').innerHTML="x="+x +" y="+y;
}
}
/***********************/
// THESE ARE CALLED TO START AND STOP THE DRAG AND DROP OF ROWS
obj.onCellMouseDown = function(event, column, row){ dragstart(event, column, row) };
obj.onCellMouseUp = function(event, column, row){ if (startrow) dragstop() };
obj.setEvent("onmousemove", dragRowMouseMove);
var yDropMin=0;
var yDropMax=0;
var xDropMin=0;
var xDropMax=0;
var rowHeight=0;
target.onCellMouseUpForward = function(event) {
if(!AW.ie) { var x = event.pageX ; var y = event.pageY ; }
else{ var x = event.screenX ; var y=event.screenY }
// check if the mouse up is in the target grid
var gridHeight=150;
var gridWidth=300;
var selectorWidth=0;
if (target.getSelectorVisible())
{
selectorWidth=target.getSelectorWidth();
}
if (yDropMin==0)
{
var el = target.getCellTemplate(0, 0).element();
rowHeight =el.offsetHeight;
yDropMin = AW.getTop(el); // y of first row
yDropMax = yDropMin - target.getHeaderHeight()+gridHeight;
xDropMin = AW.getLeft(el); // x of first row
xDropMax = xDropMin + gridWidth-selectorWidth; // x of first row
}
if (x>xDropMin && x<xDropMax && y>yDropMin && y<yDropMax)
{
// mouse up is in the grid, compute row and forward event
// we need to tinker that with the position of the scrollbar
target.onCellMouseUp(event,0,Math.round((y-yDropMin+target.getScrollTop())/rowHeight));
}
}
target.onCellMouseUp = function(event, column, row) {
if (startrow) {
if (TargetCellText[0][0]==undefined)
{
TargetCellText[0][0]=CellText[startrow][0];
TargetCellText[0][1]=CellText[startrow][1];
}
else
{
var insertindex=row;
if (insertindex>target.getRowCount()-1)
{
insertindex=target.getRowCount();
}
//alert("add val from row " + startrow + " at row " + row +" insert index= " + insertindex );
TargetCellText.splice((insertindex*1),0,CellText[startrow]);
target.setRowCount(target.getRowCount()+1);
}
target.refresh();
dragstop();
}
};
document.write(obj);
document.write(target);
document.onmouseup = function () { // stop draging the row when onmouseup happens out of the grids
if (startrow) { dragstop() ; }
}
</script>
<br>
<button onclick="AddNewRowBelowSelectedRow()">Add New Row Below Selected Row</button>
<button onclick="DeleteSelectedRow()">Delete Selected Row</button>
<hr>
This has been tested using AW 2.0 (standard/final) and IE and Firefox 1.0. It has some limitations
<ul>
<li>Only works on ARRAY based grid.
<li>Array is manipulated directly using splice (instead of addRow / deleteRow).
<li>Sorting is not supported so it is disabled
</ul>
</div>
<div id="FeedbackRow" style="position:absolute;display:none" onmouseup="target.onCellMouseUpForward(event)">
</div>
<div id="debug">
</div>
<div id="debug2">
</div>
</body>
</script>
</html>This topic is archived.