jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

Trying to enable drag & drop between 3 or more tables

Tags: jqueryui drag drop connectWith

12/10/2010
21:51

zoopside

New Member

Members

Forum Posts: 2

Member Since:
12/10/2010

Offline

Hello all,

I hesitate to call this a "bug", as it is probably a new requirement, but I'm hoping for a bit of direction, if possible. Code can be found here : http://drop.io/az98jvr.

I am trying to create 3 to N tables between which I can drag and drop individual rows. In the demo file above, I'm creating 3 grids, and connecting them with

jQuery("#grid3").jqGrid('gridDnD',{connectWith:'#grid1,#grid2'});

jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1,#grid3'});

jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2,#grid3'});

I should first note that connecting 1 table to the other 2 works without issue, but when connecting the other 2 the issue(s) arise. I stepped through grid.jqueryui.js, and found that line 397 was attempting to pull data from the incorrect source table. Here's the original line with my comment, and 'fix' :

//var getdata = $('#'+$t.id).jqGrid('getRowData',accept);

// the issue with the above is that the $t variable is not always correct, so the getdata object is attempting to be retrieved from the wrong table.

// hopefully, we can use only the information from the ui variable to get this data.

var getdata = ui.draggable.parent().parent().jqGrid('getRowData',accept);

I changed the getdata to try to use the ui variable so that we aren't dependent on the $t which is set to 'this' above. I'm not sure why the 'this' variable would be incorrect, but this will resolve the first situation which is the dropping of an empty row.

The second issue, which is persistent is the inability to drop rows. Dragging from grid1 to grid2 or grid3 always works, but dragging from grid2 to grid3 often doesn't work. Or the droppable area is a bit more fragile for some reason. I noticed that this is probably in the "accept" block of drop and have changed line 386 as follows :

//var tid = $(d).closest("table.ui-jqgrid-btable");

var tid = d.parent().parent(); // source table

Instead of grabbing the 'closest', I'm trying to use the d variable to get the value of the source table to check 'accept' on.

The end result is improved, but not quite ready. Oddly, it works very well in IE8, but not as well in Chrome & Firefox, which is a first for me.

So, if you've read this far and can point me in the right direction, I'd really appreciate it. Thanks beforehand for any help.

23/10/2010
17:28

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

First of all thanks.

The first description is a bug and your fix seems to resolve it.

I do not have problems with your seconf description.

Also be a sure you have set the id key correct.

Thanks again the first fix in in GitHub

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

26/10/2010
18:02

zoopside

New Member

Members

Forum Posts: 2

Member Since:
12/10/2010

Offline

Hello,

You're most welcome. Thank you for a great product.

Also, I noticed that the second issue (issues with dropping of rows) basically resolves itself when there is some distance between the tables. On my initial test, the table borders were touching, and I think this led to the drop zone confusion. From debugging, I could tell that the error occurred when I was actually dropping a row from #1 to #2, but the drop zone fired table #1 or #3.

When I integrated the tables into a more realistic design (e.g. with space between the table borders), I have had no further issues.

So, thanks again.

-Joe

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
24 Guest(s)

Currently Browsing this Page:
1 Guest(s)