How to initialize a jqGrid with the proper events for row re-ordering (Sortable)

Question

I'd like to be able to subscribe to the events that are raised during a Sortable drag and drop operation (New in 3.6 Sortable Rows) as I need to persist this information back to storage. I've tried onstop and onstart from http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods#drag_and_drop_rows_between_grids but it seems to only work with drop target being another table.

Thank you, Stephen

The Columns:

var col_names = ['Qty', 'SFC', 'Item Nbr', 'Brand', 'Product', 'Catalog', 'Price', 'UOM', 'Case', 'Remarks', 'Wt.', 'Par', 'Purchased', 'ProductId', 'SortPriority'];
var col_model = [
{ name: 'Quantity', index: 'Quantity', width: 22, sorttype: "number", editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 15} },
{ name: 'ProductAttributes', index: 'ProductAttributes', width: 50 },
{ name: 'ItemNum', index: 'ItemNum', width: 50, align: "right" },
{ name: 'BrandName', index: 'BrandName', width: 100 },
{ name: 'ProducName', index: 'ProducName', width: 150 },
{ name: 'Catalog', index: 'Catalog', width: 100 },
{ name: 'Price', index: 'Price', width: 40, sorttype: "number", align: "right" },
{ name: 'UOM', index: 'UOM', width: 30 },
{ name: 'CasePack', index: 'CasePack', width: 30 },
{ name: 'PackageRemarks', index: 'PackageRemarks', width: 80 },
{ name: 'AveWeight', index: 'AveWeight', width: 30, align: "right" },
{ name: 'Par', index: 'Par', width: 25, align: "right", editable: true, edittype: 'text', editoptions: { size: 15, maxlength: 15} },
{ name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 40, align: "right" },
{ name: 'ProductId', index: 'ProductId', hidden: true, key: true },
{ name: 'SortPriority', index: 'SortPriority', hidden: true }
 ];

The Grid:

favoriteGrid = $('#favoriteGrid');

favoriteGrid.jqGrid({
    url: '/xxx/yyy/',
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    jsonReader: {
        id: "ProductId",
        cell: "",
        root: function (obj) { return obj.rows; },
        page: function () { return 1; },
        total: function () { return 1; },
        records: function (obj) { return obj.rows.length; },
        repeatitems: true
    },
    colNames: col_names,
    colModel: col_model,
    pager: $('#favoritePager'),
    pginput: false,
    rownumbers: true,
    rownumWidth: 25,
    rowNum: 1000,
    autowidth: true,
    height: '500px',
    sortable: true, // enable column sorting
    multiselect: true, // enable multiselct
    gridview: true,
    ignoreCase: true,
    loadonce: true, // one ajax call per 
    loadui: 'block',
    loadComplete: function () {
        var gr = $('#favoriteGrid');
        fixGridSize(gr);
    },
    onSelectRow: function (id) {
        if (id && id !== lastSel) {
            favoriteGrid.restoreRow(lastSel);
            lastSel = id;
        }
        favoriteGrid.editRow(id, true);
    },
    onstop: function (event, ui) {
        alert("onstop");
    }
}).jqGrid('navGrid', '#favoritePager',
    { add: false, edit: false, del: false, search: true, refresh: false },
    {},
    {},
    {},
    { multipleSearch: true, showQuery: false },
    {}).jqGrid('sortableRows').jqGrid('gridDnD');

EDIT1:

The table generated from jqGrid IS sortable, so I think it's a matter of using these jquery functions, after initialization.

$('#favoriteGrid').bind("sortstart", function (event, ui) {
    alert("start");
});

$('#favoriteGrid').bind("sortstop", function (event, ui) {
    alert("stop");
});

Answer 1

It's a good question!

To catch the results of resorting of the columns you should use sortable as function instead of boolean true:

sortable: function (permutation) {
    alert ('permutation=' + permutation.join(','));
}

see the demo. If you reorder 'Client' and 'Date' columns you will receive the alert message

The columns 'rn' and 'cb' used internally for row numbers and multiselect checkboxes are first and have indexes 0 and 1. The columns 'Client' has the index 2 and 'Date' has the index 3. To the permutation array after the reordering of 'Client' and 'Date' columns will be [0, 1, 3, 2, 4, 5, 6, 7, 8, 9]

It's important to mention that if you need to set some options of the jQuery UI Sortable you should use another format of sortable parameter of jqGrid:

sortable: {
    update: function (permutation) {
        alert ('permutation=' + permutation.join(','));
    },
    options: {
        opacity: 0.8
    }
}

see the next demo:

UPDATE: To monitor the reordering of rows you can do the following:

favoriteGrid.jqGrid('sortableRows', {
    update: function (ev, ui) {
        alert ("The row with the id=" + ui.item[0].id +
            " is moved. New row index is " + ui.item[0].rowIndex);
    }});

see the demo. You can get more detailed information about the rows before and after the new position of the moved row with the following

favoriteGrid.jqGrid('sortableRows', {
    update: function (ev, ui) {
        var item = ui.item[0], ri = item.rowIndex, itemId = item.id,
            message = "The row with the id=" + itemId +
                " is moved. The new row index is " + ri;
        if (ri > 1 && ri < this.rows.length - 1) {
            alert(message + '\nThe row is inserted between item with rowid=' +
                this.rows[ri-1].id + ' and the item with the rowid=' +
                this.rows[ri+1].id);
        } else if (ri > 1) {
            alert(message +
                '\nThe row is inserted as the last item after the item with rowid=' +
                this.rows[ri-1].id);
        } else if (ri < this.rows.length - 1) {
            alert(message +
                '\nThe row is inserted as the first item before the item with rowid=' +
                this.rows[ri+1].id);
        } else {
            alert(message);
        }
    }});

see the next demo.

Answer 2

Current implementation that works is

$('#favoriteGrid').bind("sortstart", function (event, ui) {
    // I had no need for this action
});

$('#favoriteGrid').bind("sortstop", function (event, ui) {

    var lista = jQuery("#favoriteGrid").getDataIDs();
    var items = [];

    for (i = 0; i < lista.length; i++) {
        var rowData = jQuery("#favoriteGrid").getRowData(lista[i]);
        items.push({ productId: rowData.ProductId, rowNum: i });
    }

    var fromFolder = $("#favorite-products > a.selected").attr("data-folderId");
    var payload = { FolderId: fromFolder, Items: items };

    $.blockUI({ message: '<h3><img src="../../../../Content/images/busy.gif" /> Saving your sort order...</h3>' });

    $.ajax({
        type: "POST",
        url: "/xxx/yyy/zzz/",
        data: JSON.stringify(payload),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $("#favoriteStatusMessages").html(data)
            $.unblockUI();
        },
        failure: function (errMsg) {
            $("#favoriteStatusMessages").html(errMsg).addClass("ui-state-error");
            $.unblockUI();
        }
    });


});