1

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>
carlpett
  • 12,203
  • 5
  • 48
  • 82

1 Answers1

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Aha, thank you. However, there is some wierd behaviour. In your demo, dragging a row copies it. Why is that? – carlpett Oct 17 '11 at 08:21
  • @carlpett: See UPDATED part of my answer. – Oleg Oct 17 '11 at 11:05
  • @carlpett: You are welcome! I posted my suggestions [here](http://www.trirand.com/blog/?page_id=393/bugs/drang-and-drop-not-working-since-jqueryui1-8-13/#p24910), so I hope that Tony (the developer of jqGrid) will include the fixes in the code of jqGrid. – Oleg Oct 17 '11 at 12:48