Problem with sorting a column while editing inline rows in jqGrid

Question

My use of the grid involves sorting, having multiple lines in the inline editing mode.

Questions:

• Is there a way to do sorting while inline editing one or more lines?

• If not, is there an event that will jump when I click on the column headers during inline editing of one or more rows? (an event where I can remove the edit before sorting the content)

Thanks Catalin

Answer 1

Interest Ask! +1 from me.

The problem with sorting editable rows or cells is to access the contents of the editing cells. The current jqGrid code does not do this, so inside the click event handler in the column headers there is a check to see if there is any edit line in the grid. If any edit line / line exists, the sort will stop without calling the onSortCol .

Thus, only the second way of saving or restoring editable cells before sorting is possible. To implement this, there is one small problem. If one binds an additional click event in the column headings, it will be called after the previous standard jqGrid handler. Therefore, you cannot save or cancel editing before the click event is processed. The problem can be solved in two ways: either you can call the sortData function from a new event handler, or you can change the order of bindings to the click event. The following code demonstrates a 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 defined as var $grid = $("#list") . You can see how it works on the next demo .

Answer 2

If you want to try option 2, you can connect to the onSortCol event. There you can refuse the editing mode of all lines, and then enable sorting. Just don't return "stop" or sorting won't happen at all.

Raised immediately after sorting a column and before sorting data.

You can get all the documentation here .