working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="table2">
    <tr>
    <td>
    <input id="txtinputFieldOne" class="inputFieldOne" style="height:30px;" /> 
    <input id="txtinputFieldTwo" class="inputFieldTwo" style="height:30px;" />
    </td>
    </tr>
      </table>
<table id="grid"></table>
<table id="documentlist1"></table>

JavaScript

var data = [[48803, "DSK1", "02200220", "OPEN"], [48769, "APPR", "77733337", "ENTERED"], [48813, "DSK1", "02200220", "OPEN"], [58769, "APPR", "77733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Portfolio Details', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'Portfolio',
        index: 'Portfolio',
        width: 90,
        sorttype: "date"},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Drag Drop Example",
});



var names = ["id", "Portfolio",  "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});
$("#grid").jqGrid('setGridParam', {gridComplete: makeGridRowsDraggable($("#" + this.id))});




function makeGridRowsDraggable(grid) {
    createDroppableElements();
    $("#grid").val(new Date().getTime());
    var $searchResultsGrid = grid;
    var searchResultsRows = $("#grid .ui-row-ltr");

    searchResultsRows.draggable({ appendTo: "body" }); searchResultsRows.draggable({
        create: function (event, ui) { }
    });
   
    searchResultsRows.css("cursor", "move").draggable("option", "helper", "clone").draggable({
        revert: "true",
        appendTo: 'body',
        cursor: "move",
        snap: "true",
        cursorAt: {
            top: 10,
            left: -5
        },
        helper: function (event) {
            //get a hold of the row id
            var rowId =...