Tree structure with drag and drop rows in jqgrid? - jqgrid

Question

I'm using jqgrid for tree structure in a table.I'm providing drag and drop row functionality.I want to call a callback method on drag event.Because I want to adjust the hierarchy of the rows which is a column having number in it ex:1.1,1.2.1,...Can I do this.
The following is the code I wrote inside my html:
jQuery(function(){
jQuery("#tree").tableDnD({scrollAmount:0});
jQuery("#tree").jqGrid({
url:'jsonSamplePots.json',
datatype: "json",
colNames: ["Task Id", "Task No.", "Task Name", "Priority", "Start Date", "End Date", "Task Type", "Link", "Link RelationShip", "Resources(Units)", "Reference"],
colModel: [
{name:'id', index:'id', width: 30, hidden: true, key: true},
{name:'no', width:80, sortable:false,editable:true},
{name:'name', width:150, sortable:false,editable:true},
{name:'priority', width:80, sortable:false,editable:true},
{name:'sDate', width:80, sortable:false},
{name:'eDate', width:80, sortable:false},
{name:'type', width:120, sortable:false},
{name:'link', width:80, sortable:false},
{name:'rship', width:80, sortable:false},
{name:'resources', width:300, sortable:false},
{name:'ref', width:80, sortable:false},
],
rowNum:10,
rowList:[10,20,30],
pager: '#pcelltbl',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Tasks",
cellEdit:true,
treeGrid: true,
ExpandColumn:'name',
gridComplete: function() {
//alert("gridcomplete");
$("#_empty","#tree").addClass("nodrag nodrop");
jQuery("#tree").tableDnDUpdate();
},
I'm using the following json data:
{
"total": "1",
"page": "1",
"records": "2",
"rows": [
{"id": "1", "cell": ["1", "Super <b>Item</b>", "300", "0", "", "false", "true", "true"]},
{"id": "2", "cell": ["2", "<a href='http://www.google.com'>Google</a>", "100", "1", "1", "false", "false", "true"]},
{"id": "3", "cell": ["3", "Sub Item 1", "50", "2", "2", "true", "true", "true"]},
{"id": "4", "cell": ["4", "Sub Item 2", "25", "2", "2", "false", "false", "true"]},
{"id": "5", "cell": ["5", "Sub-sub Item 1", "25", "3", "4", "true", "true", "true"]},
{"id": "6", "cell": ["6", "Sub Item 3", "25", "2", "2", "true", "true", "true"]},
{"id": "7", "cell": ["7", "<span style='background-color:LightGreen; color:Tomato'>Item 2</span>", "200", "1", "1", "false", "true", "true"]},
{"id": "8", "cell": ["8", "Sub Item 1", "100", "2", "7", "false", "false", "true"]},
{"id": "9", "cell": ["9", "Sub-sub Item 1", "50", "3", "8", "true", "true", "true"]},
{"id": "10", "cell": ["10", "Sub-sub Item 2", "50", "3", "8", "true", "true", "true"]},
{"id": "11", "cell": ["11", "Sub Item 2", "100", "2", "7", "true", "true", "true"]}
]
}
Thanks in advance