jqgrid get rows in grid after move rows - jqgrid

Question

I have a grid with 3 columns that looks like:
col1 col2 col_sortorder
AAAA 1000 1
AAAA 1002 2
AAAA 1003 3
I made it possible that the user can change the sortoder in the grid by using the mouse. For example move the second row on the top, so the grid looks like:
col1 col2 col_sortorder
AAAA 1002 2
AAAA 1000 1
AAAA 1003 3
I achieved this with:
jQuery("#list").jqGrid('sortableRows');
jQuery("#list").bind('sortstop', function() { fun_sort(event) });
Now I want to update my database with a new value for the col_sortorder.
The function fun_sort() is triggered by the sortstop-event correctly.
My intention was just to read all the data from the grid and use the forloop-index as the new value for the col_sortorder, but when I read through my grid using:
var allRowsInGrid = $('#list').jqGrid('getGridParam','data');
for (i = 0 ; i <= allRowsInGrid.length -1; i++){
var col1 = allRowsInGrid[i].col1;
var col2 = allRowsInGrid[i].col1;
var col_sortorder = i+1; //new value for sortorder
// call ajax to update the database
}
The function getGridParam always returns the initial grid order and not the order after I have moved a row inside the grid.
Can somebody tell me how I can to this?

Answer 1

I find your question interesting and thus I created the demo https://jsfiddle.net/OlegKi/xw0gcjez/, which demonstrates how you can solve the problem. I used update callback of sortableRows, which is the same as "sortupdate" event (see the documentation).
$("#list").jqGrid("sortableRows", {
update: function () {
updateColSortorder();
// the data of the column col_sortorder will contain
// now sequensial values 1,2,3...
// even the display values are still old
// reload grid to display updated data
var p = $grid.jqGrid("getGridParam");
// we reset sortname to "col_sortorder" only to reload
// with minimal visual changes for the user
p.sortname = "col_sortorder";
p.sortorder = "asc";
setTimeout(function () {
$grid.trigger("reloadGrid");
}, 0);
}
});
where updateColSortorder is
function updateColSortorder () {
var rows = $grid[0].rows, localRow, i;
for (i = 0; i < rows.length; i++) {
if ($(rows[i]).hasClass("jqgrow")) {
// row is a row with data. row.id is the rowid
localRow = $grid.jqGrid("getLocalRow", rows[i].id);
localRow.col_sortorder = i;
}
}
}
The grid uses HTML table internally. Thus $grid[0] is the DOM of table, which has rows properties. Every row has id property and so on. The order of elements in the rows collection corresponds the order in which the rows are displayed.