Drag and drop rows in a jqgrid

Question

I am trying a drag & drop option for rows in a jqgrid. I have tried with this fiddle. Thanks a lot for any valuable suggestions.

I have tried with

jQuery("#mytable").gridDnD();

and also with

jQuery("#mytable").jqGrid('gridDnD');

Answer 1

I was having the same problem so I looked into your example.

Made a few changes and now it seems to work.

Include: jQuery UI.js as this is where the base jquery drag and drop code is. Include: jquery.tablednd.js

Move the Dnd call and sortable rows calls to after you create the grid.

Working fiddle: http://jsfiddle.net/netroworx/6wMm7/

$(document).ready(function() {
    jQuery("#mytable").jqGrid({
      datatype:"clientSide",
      data:[ {"number": 1, "segment":"first", "name": "chap0"},
             {"number": 2, "segment":"second",  "name": "chap1"},
             {"number": 3, "segment":"third",  "name": "chap2"},
           ],
      colNames:['Chapter Name', 'Chapter Number', 'Document Segment'],
      colModel:[
              {name:'name'},
              {name:'number', sorttype:'number'},
              {name:'segment'},
              ],
      autowidth:true,
      height:'200',
      sortname: 'number',
      viewrecords: true,
      caption: 'My first grid',
      altRows:true

  }); 
   jQuery("#mytable").sortableRows();   
   jQuery("#mytable").jqGrid('gridDnD');

        });