PDA

View Full Version : Drag and drop - the new TreePanel and a grid



BernardChhun
8 Jan 2007, 7:41 AM
I've succeeded in extending YAHOO.ext.dd.DragZone so that we can drag a grid's row into the treePanel.

here's how it looks:



GridDragZone = function(grid, config){
this.grid = grid;
GridDragZone.superclass.constructor.call(this, grid, config);
this.actor = new YAHOO.ext.Actor(document.body);
};

YAHOO.extendX(GridDragZone, YAHOO.ext.dd.DragZone, {
getDragData : function(e){
e = YAHOO.ext.EventObject.setEvent(e);
var selNodes = grid.getSelectedRowIndexes();
var dragData = { nodes: selNodes };

if(selNodes.length == 1){
var img = document.createElement('img');
img.src = this.grid.dataModel.getValueAt(this.grid.getSelectedRowIndex(), 4);
dragData.ddel = img;
dragData.single = true;
}else{
var div = document.createElement('div');
div.className = 'multi-proxy';
for(var i = 0, len = selNodes.length; i < len; i++){
var img = document.createElement('img');
img.src = this.grid.dataModel.getValueAt(selNodes[i], 4);

div.appendChild(img);
if((i+1) % 3 == 0){
div.appendChild(document.createElement('br'));
}
}
dragData.ddel = div;
dragData.multi = true;
}
//console.log('getDragData: ' + dragData.nodes);
return dragData;
},

// this method is called by the TreeDropZone after a node drop
getTreeNode : function(){
var treeNodes = [];
var nodeData = this.dragData.nodes;
var arrId = [];

for(var i = 0, len = nodeData.length; i < len; i++){
rowIndex = nodeData[i];
var data = {
No : grid.dataModel.getValueAt(rowIndex, 0),
source : grid.dataModel.getValueAt(rowIndex, 2),
url : grid.dataModel.getValueAt(rowIndex, 3),
thumbnail : grid.dataModel.getValueAt(rowIndex, 4),
prix : grid.dataModel.getValueAt(rowIndex, 5),
ville : grid.dataModel.getValueAt(rowIndex, 6),
genre : grid.dataModel.getValueAt(rowIndex, 7),
chambres : grid.dataModel.getValueAt(rowIndex, 8)
};
// ajouter la maison dans le treeview
treeNode = new YAHOO.ext.tree.TreeNode({
data: data,
text: money(data.prix) + ' - ' + data.ville,
icon: data.thumbnail,
leaf: true,
cls: 'image-node'
});
treeNodes.push(treeNode);
}
return treeNodes;
}
});


As y'all can see, it is very similar to the photo album example.

once you click on a row and hold the mouse button, images of the selected rows appears with a red crossed circle. Once you drag it over one of the tree nodes, the red circle transforms into a green plus button meaning you can drop it there...

using a jsonView it works all the time...what I can't figure out is that with the grid, it works like 20 % of the time!

try it out here : http://explorer.waka.ca
Everything is in french but just try the drag and drop.

what am I missing? is my extension worthless?

Bernard

jack.slocum
8 Jan 2007, 11:08 AM
I don't see anything in particular wrong with your code. One thing I did notice is your markup has some missing end tags (the a select with no end). I doubt that is the problem though.

The new grid 2 will have a drag zone built in, it shoudn't be long...

BernardChhun
9 Jan 2007, 6:25 AM
I don't see anything in particular wrong with your code. One thing I did notice is your markup has some missing end tags (the a select with no end). I doubt that is the problem though.

The new grid 2 will have a drag zone built in, it shoudn't be long...

I hope you don't feel pressure from me as it was not meant that way. I had a lot of fun figuring how it works....so I guess my work is useless now... :lol:

jammus
2 Feb 2007, 7:53 AM
This is great. I'm using a version of this for a project I'm working on. One small problem I'm having is that I have my tree dropConfig set so that appendOnly = true as I don't want tree nodes to be inserted before others. However when this is set I can't move items around in the tree or add items from the grid to the tree.

Any pointers anyone?

Cheers in advance.


PS - Loving your work

jammus
5 Feb 2007, 9:03 AM
clocked it. just overwrote isValidDropPoint in TreeDropZone so that it returns false on anything but an append.

slowly getting the hang of this

BernardChhun
5 Feb 2007, 9:52 AM
clocked it. just overwrote isValidDropPoint in TreeDropZone so that it returns false on anything but an append.

slowly getting the hang of this

cool keep on doing your thing jammus!

jammus
5 Feb 2007, 10:02 AM
new question :D

when dragging from any part of the grid (eg scroll bar, column headings) you start dragging the selected row. how do i prevent that?

will come back to it tomorrow and post if i suss it out. home time now :)

jammus
5 Feb 2007, 10:04 AM
cool keep on doing your thing jammus!

wilco :)