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 ba

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.