Question

I’m creating two grids with the tableToGrid method in jqGrid. Now I’d like the rows to be drag and drop-able between these two grids. Simply adding 'gridDnD' : true in the options does not work. How is it done?

Example:

<script type="text/javascript">
$(function() {
tableToGrid("#table1", { gridDnD: {connectWith: "#table2" } });
tableToGrid("#table2", { gridDnD: {connectWith: "#table2" } });
}
</script>

<table id="table1">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1</td>
<td>Val 2</tr>
</tr>
</tbody>
</table>

<table id="table2">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
</table>

Answer 1

gridDnD is a method of jqGrid and not an option which you can use in tableToGrid directly. So you have to rewrite the code to something like the following:

tableToGrid("#table1");
tableToGrid("#table2");
$("#table1").jqGrid('gridDnD', {connectWith: "#table2"});
$("#table2").jqGrid('gridDnD', {connectWith: "#table1"});

See the demo.

UPDATED: I analysed the problem with coping of rows during drag&drop instead of moving. The problem seems be a compatibility problem of jqGrid with jQuery UI starting with Version 1.8.13. How you can see on the demo which uses jQuery UI 1.8.12 the code work correctly.

I found out that the lines of grid.jqueryui.js code (the lines 11078-11079 of jquery.jqGrid.src.js)

var ids = $(ui.helper).attr("id");
$($t).jqGrid('delRowData',ids );

are the source of the problem. The ui.helper[0] contains the dropped row with empty id starting with jQuery UI 1.8.13.

If you would change the code to

var id = this.id;
$($t).jqGrid('delRowData',id);

the code will work in both new jQuery UI (tested with 1.8.16) and in the old one (1.8.12). See the corresponding demo here.

I have currently no time for more exact analyse of changes between jQuery UI 1.8.12 and 1.8.13. Probably there are a bug in jQuery UI. Nevertheless I will post my suggestion described above as the bugfix in the trirand forum. I think it will be good to have jqGrid code which has less compatibility problems with different versions of jQuery UI.