jQuery Grid Plugin - jqGrid

The error:

in the function getPosition, (e.offsetParent)

I want to create a table and have the ability to Drag and Drop rows to reorder items.

In my scenario I load the data manually into the grid using 'addRowData'

The problem I found is that the getPosition function of the TableDnD extension has null parameters and that occurs because while initializing and setting the complete callback gridComplete the table is still empty.

here is my sample:

//Data Array

var mydata = [

{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },

{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },

{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }

];

//Init

$(document).ready(function () {

jQuery("#list1").tableDnD()

jQuery("#list1").jqGrid({

datatype: "local",

colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],

colModel: [

{ name: 'id', index: 'id', width: 60, sorttype: "int" },

{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },

{ name: 'name', index: 'name', width: 100 },

{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },

{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },

{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },

{ name: 'note', index: 'note', width: 150, sortable: false }

],

caption: 'Drag and Drop',

gridComplete: function () {

jQuery("#list1").tableDnDUpdate();

}

});

for (var i = 0; i <= mydata.length; i++)

jQuery("#list1").jqGrid('addRowData', i + 1, mydata[i]);

});