jqGrid drag drop row re-ordering with server side data - jquery-ui

Question

When I drag and drop in jqGrid, I need to trigger a change in order for my items on the server side. I felt this would be a simple exercise, but I have yet to encounter a code example of how this can be achieved. I have looked at trying to use the jQueryUI events information, but the target is listed as the entire grid. I have been able to extract the source row Id from the onstop event via ui.helper.context.id, but I have had no luck what-so-ever identifying the dropped-on-item (and more importantly its id) within the list.
Just to clarify, I am dragging and dropping within the same jqGrid in an attempt to re-order the items on the server.
I have a jqGrid:
$("#modelList").jqGrid({
url: getMSModelsJsonUrl + '?manuf=1',
datatype: "json",
colNames: ['ID', 'Name'],
colModel: [
{ name: 'optionValue', key: true, index: 'optionValue', width: 55, editable: false, hidden: true, editrules: { edithidden: true } },
{ name: 'optionDisplay', index: 'optionDisplay', width: 155, editable: false }
],
onSelectRow: function (id) {
var manuf = $("#manufList").jqGrid('getGridParam', 'selrow');
self.modelsTableInfo.currentSelection(manuf);
$('#bodyList').setGridParam({ url: getMSBodiesJsonUrl + '?manuf=' + manuf + '&model=' + id }).trigger('reloadGrid');
},
loadComplete: function () {
var grid = $("#modelList"),
ids = grid.jqGrid("getDataIDs");
if (ids && ids.length > 0)
grid.jqGrid("setSelection", ids[0]);
},
sortname: 'optionValue',
viewrecords: true,
sortorder: "desc",
caption: "Models",
height: 350,
rowNum: 1000,
autowidth: true
});
and a drag and drop binding thus:
$("#modelList").jqGrid('gridDnD', {
connectWith: '#modelList',
onstop: function (event, ui) {
var draggedItem = ui.helper.context.id;
var dragTarget = event.target.id;
alert(draggedItem +" to "+dragTarget );
},
beforedrop: function (event, ui, data, source, target) {
return data;
}
});
When something is dragged and dropped with the above code, it reports the source and target id as being the same.
I must be missing something here, as this all seems like an obvious use of the drag and drop functionality.
-- Edit ---
I ended up going for this solution that uses tableDnD as well, as I couldn't get jqGrid working (I'd love to see a solution though)
jQuery("#modelList").tableDnD({
scrollAmount: 0,
onDrop: function(table, row) {
var rows = table.tBodies[0].rows;
var rowIdBeforeNewPosition =null;
for (var i=0; i
if (rows[i].id === row.id) {
if (i > 0)
rowIdBeforeNewPosition = rows[i-1].id;
}
}
var manufId = $("#manufList").jqGrid('getGridParam', 'selrow');
$.ajax({ url: setModelOrderJSONUrl + '?manufId=' + manufId + '&modelIdToMove=' + row.id + '&modelIdToPositionAfter=' + rowIdBeforeNewPosition, type: "POST" }).done(function (wasSuccessful) {
if (!wasSuccessful)
$('#modelList').trigger('reloadGrid'); //Reload to reflect true situation
});
}
});
$("#modelList").jqGrid({
url: getMSModelsJsonUrl + '?manuf=1',
datatype: "json",
colNames: ['ID', 'Name'],
colModel: [
{ name: 'optionValue', key: true, index: 'optionValue', width: 55, editable: false, hidden: true, editrules: { edithidden: true } },
{ name: 'optionDisplay', index: 'optionDisplay', width: 155, editable: false }
],
onSelectRow: function (id) {
var manuf = $("#manufList").jqGrid('getGridParam', 'selrow');
self.modelsTableInfo.currentSelection(manuf);
$('#bodyList').setGridParam({ url: getMSBodiesJsonUrl + '?manuf=' + manuf + '&model=' + id }).trigger('reloadGrid');
},
loadComplete: function () {
var grid = $("#modelList"),
ids = grid.jqGrid("getDataIDs");
if (ids && ids.length > 0)
grid.jqGrid("setSelection", ids[0]);
},
gridComplete: function () {
$("#_empty", "#modelList").addClass("nodrag nodrop");
jQuery("#modelList").tableDnDUpdate();
},
sortname: 'optionValue',
viewrecords: true,
sortorder: "desc",
caption: "Models",
height: 350,
rowNum: 1000,
autowidth: true
});