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, while inline editing one or more rows?

2. If not, is there an event that will jump when I click the column headers while inline editing one or more rows?(an event where I can maybe remove the editing, before sorting the contents)

Thanks, Catalin

Answer 1

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.