Grid Dnd drag and drop

[jay@moduscreate.com]

This horse has been beaten to death, but i'm going to beat it some more!



// Put the ddrow function just before your render call.

var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'GridDD',
copy:false,
notifyDrop : function(dd, e, data){
var sm=grid.getSelectionModel();
var rows=sm.getSelections();

var cindex=dd.getDragData(e).rowIndex;
for (i = 0; i < rows.length; i++) {
rowData=ds.getById(rows[i].id);
if(!this.copy) {
ds.remove(ds.getById(rows[i].id));
ds.insert(cindex,rowData);
}
};
}
});

grid.render();

[rodiniz]

Nice to see this code here.. thanks a lot.

[galdaka]

Thanks.

Extended examples:

DnD between grid

[Johnnie]

Great idea,thanks

[Taurus]

... but there's one problem: One can drag a row and drop it on the header or footer of the grid, as the drop target is grid.container. How can we stop this and allow dropping on rows only?

[Animal]

Try AFTER the render:



var ddrow = new Ext.dd.DropTarget(grid.getView.mainBody, {
ddGroup : 'GridDD',
copy:false,
notifyDrop : function(dd, e, data){
var sm=grid.getSelectionModel();
var rows=sm.getSelections();

var cindex=dd.getDragData(e).rowIndex;
for (i = 0; i < rows.length; i++) {
rowData=ds.getById(rows[i].id);
if(!this.copy) {
ds.remove(ds.getById(rows[i].id));
ds.insert(cindex,rowData);
}
};
}
});

[aktome2001]

It looks like there might have been a small error in that code. The first line should be


var ddrow = new Ext.dd.DropTarget(grid.getView().mainBody, {"getView" was missing the "()".

Based on some code that I found at another post (http://extjs.com/forum/showthread.php?p=25515#post25515) I modified the above code to this and it works for me:

var ddrow = new Ext.dd.DropTarget(grid.getView().mainBody, {
ddGroup : 'GridDD',
copy:false,
notifyDrop : function(dd, e, data){
var sm=grid.getSelectionModel();
var rows=sm.getSelections();
var cindex=dd.getDragData(e).rowIndex;
if (!this.copy){
for(i = 0; i < rows.length; i++) {
ds.remove(ds.getById(rows[i].id));
};
};
ds.insert(cindex,data.selections);
}
});Test in FF 2 and IE 6

[jay@moduscreate.com]

Try AFTER the render:



var ddrow = new Ext.dd.DropTarget(grid.getView.mainBody, {
ddGroup : 'GridDD',
copy:false,
notifyDrop : function(dd, e, data){
var sm=grid.getSelectionModel();
var rows=sm.getSelections();

var cindex=dd.getDragData(e).rowIndex;
for (i = 0; i < rows.length; i++) {
rowData=ds.getById(rows[i].id);
if(!this.copy) {
ds.remove(ds.getById(rows[i].id));
ds.insert(cindex,rowData);
}
};
}
});




Animal, this is weird. I'm able to drag and drop items to the grid body and they disappear. What am i doing wrong?
http://screencast.com/t/Rob3VLMjf




// create the editor grid
grid = new Ext.grid.EditorGrid('photoGrid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
enableDragDrop: true,
ddGroup: 'GridDD',
ddText: 'drag and drop to change order',
autoExpandColumn: 'mediaComment',
//height: 400,
loadMask: true
});
grid.render();
var ddrow = new Ext.dd.DropTarget(grid.getView().mainBody, {
ddGroup : 'GridDD',
copy:false,
notifyDrop : function(dd, e, data){
var sm=grid.getSelectionModel();
var rows=sm.getSelections();

var cindex=dd.getDragData(e).rowIndex;
for (i = 0; i < rows.length; i++) {
rowData=ds.getById(rows[i].id);
if(!this.copy) {
ds.remove(ds.getById(rows[i].id));
ds.insert(cindex,rowData);
}
};
}
});

[Andrey Leonidovich]

djliquidice, simple fix:

var cindex=dd.getDragData(e).rowIndex;
if (typeof cindex != "undefined") {
for (i = 0; i < rows.length; i++) {
rowData=ds.getById(rows[i].id);
if(!this.copy) {
ds.remove(ds.getById(rows[i].id));
ds.insert(cindex,rowData);
}
}
sm.selectRecords(rows);
}

[jay@moduscreate.com]

Andrey, you are THE MAN!!


I know absolutely nothing about D&D, thus i was completely lost. thanks a bunch!

-Jay

[august]

djliquidice, simple fix:

var cindex=dd.getDragData(e).rowIndex;
if (typeof cindex != "undefined") {
for (i = 0; i < rows.length; i++) {
rowData=ds.getById(rows[i].id);
if(!this.copy) {
ds.remove(ds.getById(rows[i].id));
ds.insert(cindex,rowData);
}
}
sm.selectRecords(rows);
}

var cindex=dd.getDragData(e).rowIndex-----this dd. function name is confusing,is it point to the drop target? why called getDragData(e。。。。。

If i get this thread earlier ,i will save my day....thank you for two bunches.

[rule3]

I got this work but I wondering if I have EditorGrid with PHP/MySQL how can I save order to order_id field.
I think it will work if I just make loop that post all rows with their

new Ext.grid.RowNumberer()
value and PHP code just updates that row number value to order_id field..
I just not have idea how to make JS part of this.. with PHP I don't need help.

[roderick.wu]

hi, all, i am planning to use DnD on one grid to reorder the records in the grid, do you have any ideas? i am not familiar with DnD, not sure if this thread is for DnD between 2 grids or in one.

for example, if the gird records is as following:
----------
1 a1 b1 c1
----------
2 a2 b2 c2
----------
3 a3 b3 c3
----------
I want to drag the 3rd record to the place between 1st and 2nd

----------
1 a1 b1 c1
----------
3 a3 b3 c3
----------
2 a2 b2 c2
----------

[ruchika]

Hi,
the below code for moving items within the grid works fine for me. But what happens is every time i drag an iten and drop, the item gets drpped at the bottow of the grid. Is it possible for us to specify the position we want to drop the item being dragged?

Thanks,
Ruchika

[jay@moduscreate.com]

Try the following example from my book: http://extjsinaction.com/examples/chapter14/dnd_grid_to_grid.html

[elnove]

Great Example. Do you have the same for DD Grid to Tree ?

[jay@moduscreate.com]

Not for the book, no. But it's not hard if you learn how drag and drop works.

[greencavern]

Hi everybody !

First let me thank you for these good examples... They were very useful !

I'm using the "override method" (see jgarcia@tdg-i.com (http://www.extjs.com/forum/member.php?172-jgarcia-tdg-i.com) post before) for a grid to grid DnD.
My objective is to place any object of the first grid in the second grid ANY NUMBER OF TIMES.
So the element from the first grid must not be deleted as it can be reused to put another instance of himself in the second grid.

I managed of course to find the "delete" lines in the code and i tried to remove them. By doing this, it works as i want the first time i add the element to the second grid... But the second time, i've a error.

I'm almost sure it's an index problem but i don't manage to find out a solution... Any idea ?

Suggestion could be made on the exemple gave by jgarcia (http://extjsinaction.com/examples/chapter14/dnd_grid_to_grid.html) as it's almost what i use.

Any help would be greatly appreciated !

Thanks and CYA.

[greencavern]

Thanks..

I managed to find something with the help of this thread : http://www.extjs.com/forum/showthread.php?78016-Create-Duplicate-Record-in-Grid-on-DND

(http://www.extjs.com/forum/showthread.php?78016-Create-Duplicate-Record-in-Grid-on-DND)It was as i thought an index problem...

And its working now ! ^^