jqGrid TableDnD issue

Question

I created a table using jqGrid Plugin for jQuery and relying on following demo, I want to drag and drop the rows of my table. Demo: http://trirand.com/blog/jqgrid/jqgrid.html (New in version 3.3 -> Row Drag and Drop)

When I try to drag a row, I get the error "TypeError: e is null" in firebug. I searched for a solution to this problem but I didn't find anything in this case... Moreover I tried to use the same version of jQuery and jQueryUI as shown in the example above, but it doesn't fix the problem. The new release of jQuery TableDnD (version 0.7) was not helpful, too Any idea to fix this problem?

My code:

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jqueryUI-1.10.3.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-de.js"></script>
<script type="text/javascript" src="js/jqGrid/i18n/grid.locale-de.js"></script>
<script type="text/javascript" src="js/jqGrid/jqGrid-4.5.2.js"></script>
<script type="text/javascript" src="js/plugins/jqTableDnD-0.5.js"></script>

<link type="text/css" rel="stylesheet" href="css/cupertino/jquery-ui-1.10.3.css"/>
<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css" />
<link type="text/css" rel="stylesheet" href="css/ui.multiselect.css" />

<table id="grid"></table>
<div id="navi"></div>

<script type="text/javascript">
    $(document).ready(function() {    
        $("#grid").tableDnD({scrollAmount:0});

        $("#grid").jqGrid({
            colNames:["Artnr", "Bezeichnung", "Angebot (Position)", "Enddatum Startseite", "Eigener Bestand", "Versandlager Bestand"],
            colModel:[
                {name:"artnr", index:"artnr", align:"center", width:75, sortable:false, formatter:formatPic},
                {name:"benennung", index:"benennung", width:400, sortable:false, formatter:formatLink }
                ...
            ],
            datatype: "json",
            editurl: "edit.php",
            height: "auto",
            mtype: "POST",
            pager: "#navi",
            rowNum: 20,
            sortname: "angebot",
            sortorder: "asc",
            url: "load.php",
            viewrecords: true,
            gridComplete: function() {
                $("#_empty","#grid").addClass("nodrag nodrop");
                $("#grid").tableDnDUpdate();
            }
        }).navGrid ('#navi', {view:false,edit:false,add:false,del:true,search:false}, {}, {}, {}, {}, {} )
    });

    function formatPic(cellVal, options, rowObject) {
        return "<htmltag title=\""+ cellVal +"\" class=\"tooltip\">"+ cellVal +"</htmltag>";
    }

    function formatLink(cellVal, options, rowObject) {
        return "<a href=\"../details.php?art=" + rowObject[0] + "\" target=\"_blank\">"+ cellVal +"</a>";
    }
</script>

Thanks in advance!

Answer 1

Many demos from the official jqGrid demo page are really very old . In other words the demo from "New in version 3.3" -> "Row Drag and Drop" don't work in the current version of jqGrid. . On the other side "New in version 3.6" -> "Sortable Rows" provide demonstration of the method sortableRows which you can use. It uses jQuery UI Sortable widget internally. So you don't need to include jqTableDnD-0.5.js .

You can search in StackOverflow for more examples which demonstrate the usage of sortableRows . For example the old answer shows how to use update callback ( start callack is other place of interest) to trace changes of rows order. You can use other callbacks (see the documentation ). The answer shows changing of style of draged row during moving it between rows. i think that one can use almost the same in case of usage sortableRows too.