Issue with sorting column while editing rows inline in jqGrid

Question

My use of the grid involves sorting while having a few rows in inline edit mode.

The questions would be:

1. Is there any way to execute sorting, whil

Answer 1

If you want to try option 2, you can hook into the onSortCol event. In there you could cancel out of the editing mode of all the rows, and then allow the sort to execute. Just be sure not to return "stop" or the sorting won't happen at all.

Raised immediately after sortable column was clicked and before sorting the data.

You can get all the documentation here.

Answer 2

An interesting question! +1 from me.

The problem with sorting of editing rows or cells consists in the access to the contain of the editing cells. The current code of jqGrid don't do this and so inside of the click event handler on the column headers there are test whether there are any editing line in the grid. If some editing line/lines exist then the sorting will be stopped without to call of onSortCol callback.

So only the second way where one save or restore the editing cells before sorting is possible. To implement this there are one small problem. If one bind additional click event on the column headers it will be called after the previous bound standard handler of jqGrid. So one can't save or discard the editing changed before the click event will be processed. One can fix the problem in two ways: either one can call sortData function of from the new event handler or one should change the order of bindings to the click event. The following code demonstrate the second approach:

$.each($grid[0].grid.headers, function () {
    var $th = $(this.el), i, l, clickHandler, clickHandlers = [],
        currentHandlers = $th.data('events'),
        clickBinding = currentHandlers.click;

    if ($.isArray(clickBinding)) {
        for (i = 0, l = clickBinding.length; i < l; i++) {
            clickHandler = clickBinding[i].handler;
            clickHandlers.push(clickHandler);
            $th.unbind('click', clickHandler);
        }
    }
    $th.click(function () {
        var p = $grid[0].p, savedRow = p.savedRow, j, len = savedRow.length;
        if (len > 0) {
            // there are rows in cell editing or inline editing
            if (p.cellEdit) {
                // savedRow has the form {id:iRow, ic:iCol, name:nm, v:value}
                // we can call restoreCell or saveCell
                //$grid.jqGrid("restoreCell", savedRow[0].id, savedRow[0].ic);
                $grid.jqGrid("saveCell", savedRow[0].id, savedRow[0].ic);
            } else {
                // inline editing
                for (j = len - 1; j >= 0; j--) {
                    // call restoreRow or saveRow
                    //$grid.jqGrid("restoreRow", savedRow[j].id);
                    $grid.jqGrid("saveRow", savedRow[j].id);
                }
            }
        }
    });
    l = clickHandlers.length;
    if (l > 0) {
        for (i = 0; i < l; i++) {
            $th.bind('click', clickHandlers[i]);
        }
    }
});

where $grid are defined as var $grid = $("#list"). You can see live how it works on the following demo.