Sorting with jqGrid Inline editing

Question

Is there any direct way to sort the data on jqGrid at client side with inline editing? It does not sort data when the row is editable even if the row header is clicked.

Answer 1

Grid can't be sort if some line is editing. I think that the reason of your question is a misunderstanding about how inline editing works and how sorting works.

At the beginning of editing the original data from the editing row will be saved in internal parameter savedRow array. In any time the user can revert the current modifications back to original state or save the current values in the grid. If keys: true option of inline editing is enabled then the user can use Esc or Enter keys to revert/save the changes of the current row. It is permitted that multiple rows could be in the same time in editing mode and the user could save some rows and some other revert.

The sorting of grid means rebuilding of full grid content applying of the current filter from internal postData parameter. jqGrid supports multiple pages. Sorting of grid means always the sorting of optionally filtered over all data of the grid. After sorting if should be displayed only the current page based on the value of page parameter.

To sort the grid which is in editing mode one would need to decide what should be done with currently editing rows. Neither discarding of current changes nor saving could be good solution in common case. Even if one would try first to save the current editing data (old state and current state) then sort the data and later start editing one more time it could not work in common case. It could be many problems of implementation such scenario

1. the current editing row could be on another page, which is not visible now
2. the data could be changed now. So filling savedRow array with old data could be wrong and the current editing data could be also wrong.
3. the current editing row could be deleted from another user. So it could not exist in new grid content.
4. if we decide to save data before sorting if could be some validation errors or concurrency errors during saving. So one need to ask user first to solve all the conflicts before saving could take place.
   ...

So to sort grid which is in editing mode is not easy. The implementation way could depend on the project requirements. Because of described above problems (and many other which I didn't mention) jqGrid just test whether internal savedRow array (used to save old state of row before editing started) is empty or not. If the savedRow array is not empty then there are some row or cell (in case of sell editing mode) which is editing now. In the case any click on the corresponding column header will be ignored and no sorting is done.

Answer 2

I had this same problem --not being able to sort if any row is in edit mode. In my case it didn't matter what the state of the user edits were. My grid is clientSide and there is a save button on the page the user's clicks to submit the changes.

I did some digging around and found a solution that works for me. I hope it helps others. Basically what I did was reorder the click events on the column headings so that mine was first. Then in my click event I call saveRows.

Here is a piece of code I got from another thread here about reordering events:

        $.fn.bindUp = function(name, fn) {
        // bind as you normally would
        // don't want to miss out on any jQuery magic
        this.on(name, fn);

        // Thanks to a comment by @Martin, adding support for
        // namespaced events too.
        this.each(function() {
            var handlers = $._data(this, 'events')[name.split('.')[0]];
            // take out the handler we just inserted from the end
            var handler = handlers.pop();
            // move it at the beginning
            handlers.splice(0, 0, handler);
        });
    };

Then in my code I add a handler to save the rows:

        $("th.ui-th-column", $("#pacPaymenReviewGridNEW")[0].grid.hDiv).bindUp('click', function(e) {
        var $th = $(e.currentTarget).closest("th");
        if ($th.length > 0) {
            pacTransferFundMaint.saveRowsById('#pacPaymenReviewGridNEW');
        }
    });     

Answer 3

After research, I found the following algorithm:

1. Catch the header click event. e.g. ('th').click(function(){})
2. Save the the row data which is in edit mode using saveRow when this event occurs
3. Identify the header which is clicked.

4. Sort grid data with that header in ascending or descending order. like
   $('#dataGrid').jqGrid('setGridParam', ({ data: list, sortname: columnHeader, sortorder: 'asc',rowNum: list.length })).trigger('reloadGrid');

5. Make the selected row editable again. editRow can be used for this.

Note: Steps 2 to 5 should be executed in event at steps 1 (header click event)