:: Forum >>

drap row from one grid, drop in another one

Hi,

Is is possible to do that ? like I would have a big grid, and the user would drag some items from the big grid anbd drop them in a smaller grid that would be like is favorites items ?

I've seen many drag and drop within a grid, to order it, but not between grids.

Thanks

Lucho
Wednesday, February 22, 2006
Hi,

I'd like to be able to do this too.

Cheers
Daniel
Monday, February 27, 2006
Hi Daniel,

Lucho (who started this thread) posted this sample in another thread at:
/javascript.forum.11225.46/this-example-shows-how-to.html

<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>
Rob Francis
Monday, February 27, 2006

This topic is archived.


Back to support forum

Forum search