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

Exosmosis

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.

Petiole

@Oleg, I'm trying your solution but without success, the currentHandlers is undefined in clickBinding = currentHandlers.click... Maybe you have a hint? – Durstin

@eklam: Which version of jQuery you use for "subclassing" event handle? If you use jQuery version 1.8 or higher you should use $._data($th[0], "events"); instead of $th.data('events'). – Petiole

Thanks for updating that Oleg, I'm surprised this fix isn't in JQGrid since this answer.. – Baroscope

@Oleg: Does this work in free-jqgrid 4.14 ? I tried with no luck. – Hahnert

@SKumar: And where is your demo? Which version of jQuery you use? Do you used $th.data('events') or $._data($th[0], "events") (see previous comments)? – Petiole

I will create a demo shortly. here is the error I am getting and this line: clickHandler = clickBinding[i].handler; . "Unable to get property 'handler' of undefined or null reference" – Hahnert

Posted entire code in another thread: #42633446 – Hahnert

Answer 2

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.

Grimaldo

Answer 3

I also got an error when sort with editing. Then I set Key for grid data. and problem solved.

const common_col_model = [
    {name: 'id', key: true, frozen:false, hidden: true},
    ...
]

Gazpacho