jqGrid Inline Editing: Prevent User from Clicking Outside of Row Being Edited (prevent cancelling the editing/adding of row)

Question

Good Afternoon,

I've been stuck on the issue the last half of today:

I have a jqGrid with inline adding/editing enabled. Everything works great, but, I am trying to prevent the row being edited/added from being automatically cancelled once the user clicks another row. I've tried returning false in the 'beforeSelectRow', 'resetSelection' within 'beforeSelectRow', .setSelection of the row that is being edited within 'beforeSelectRow', setting all non "editable" rows as disabled; all to no avail. Additionally, it seems as though the 'gridID_licancel' button is not triggered once the user (me at the moment) clicks on another row; the editing/adding "session" is straight up cancelled via some other method.

I would like to be able to hook into this behavior at its source, as the cancellation of the add/edit session is occurring before the 'beforeSelectRow' event fires and is not taking place via a trigger of the 'gridID_licancel' click event.

Granted, a user shouldn't be out clicking like a maniac on all other rows, or what not, while a row is being edited or added, but, I foresee feedback on this functionality. There is not a lot of headroom within these rows and it could be a rather common occurrence for a user to just miss the "save" button, which is generated inline when the row becomes editable, and click another row and have to start over again. Merely making the rows taller is not a legit solution.

Another point to note, this behavior is only happening when clicking onto another row on the grid. I am working with a modal dialog, with a tabbed div inside it, and each tab has its own form. A row in this particular grid can be sitting there waiting for edits, and the user can go to another tab, submit data, come back, and the row is still waiting for edits; it is not auto cancelling itself. Also, on this grid I have hard set the grid's height, so if the user clicks in an empty area of the grid where there are no rows, the edit/add session is not cancelled. So, this is only happening once another row is clicked.

So, while a user is editing a row, how can I capture the selection of another row, before the add/edit session is cancelled??? Thanks for any help.

Answer 1

I was actually able to find the necessary (but missing in the documentation) code to even allow this sort of behavior :

jqGrid not saving inline row edits

The 'restoreAfterSelect' inlineNav property needs to be set to false to allow for any sort of manipulation within the 'onSelectRow', 'beforeSelectRow', 'ondblClickRow', or 'onRightClickRow'.

While I was able to summon a fully functioning confirmation dialog when the user would double click on another row while editing another (eg are you sure you want to end the current session, etc...), I could not achieve the same success when dealing with the context menu. I tried only binding the context menu on the right click, and not in load complete, but then the menu would only come up on every third, or so, click. Other, more failed attempts were tried, but I forgot what they were due to their massive futility.

What I was able to do though, was just completely unbind the context menu event/functionality while the user was editing. If the user tries to double click on another row, or bring up the context menu, a message shows, telling them to either finish their editing or cancel if they want to edit/add/delete other rows. I also set up the cancel button to refresh the grid whenever its clicked, as to rebind the context menu to each row.

Code snippets, if anyone finds it of use (the main issue was not knowing about, stumbling upon 'restoreAfterSelect' ):

        ondblClickRow: function (rowid, iRow, iCol, e) {
            var row = $('#tableTask').jqGrid('getGridParam', 'selrow');
            var isEditing = $("#" + row).attr("editable") === '1';

            if (isEditing) {
                showModal('Error', 'You are currently editing a record, please click the cancel button or complete your edits before continuing.', 'frmInsertTask');
                $('#tableTask').jqGrid('setGridParam', 'savedRow', [{ 'id': row }]);
                $('#tableTask').setSelection(row);
                return false;
            } else {
                $('#tableTask_iledit').trigger('click');
                return true;
            }
        },            
        beforeSelectRow: function (key, event) {
            var lastSel = $(this).jqGrid('getGridParam', 'selrow');
            var isEditing = $("#" + lastSel).attr("editable") === '1';
            if (isEditing) {
                $('#tableTask').jqGrid('setGridParam', 'savedRow', [{ 'id': lastSel }]);
                $('#tableTask').setSelection(lastSel);
                return false;
            } else {
                if (lastSel == null) { } else {
                    $('#tableTask').restoreRow(lastSel);
                }
                $('#tableTask').setSelection(key);
                return true;
            }
        },
        onRightClickRow: function (rowid, iRow, iCol, e) {
            var editingRow = null;
            var isEditing = false;
            var ids = $('#tableTask').getDataIDs();
            var row = $('#tableTask').jqGrid('getGridParam', 'selrow');
            $(ids).each(function (index, element) {
                isEditing = $("#" + element).attr("editable") === '1'
                if (isEditing) {
                    editingRow = element;
                    return false;
                }
            });
            if (isEditing) {
                showModal('Error', 'You are currently editing a record, please click the cancel button or complete your edits before continuing.', 'frmInsertTask');
                $('#tableTask').jqGrid('setGridParam', 'savedRow', [{ 'id': editingRow }]);
                $('#tableTask').setSelection(editingRow);
                return false;
            } else {
                if (editingRow == null) { } else {
                    $('#tableTask').restoreRow(editingRow);
                }
                $('#tableTask').setSelection(rowid);
                return true;
            }

And, within the click event of the #tablename_liadd AND #tablename_liedit buttons:

$('#tableTask_iladd, #tableTask_iledit').bind('click', function () {
        //if the context menu is visible then hide it. (for sitch where user brings up context menu, but then goes and clicks on the add/edit button.
        $('#jqContextMenu').hide();
        //while in edit/add mode, user should not be able to bring up the context menu until they end their current session. this context menu is re-bound once the user clicks the cancel button(refreshes the grid) or they save the data they are inputting (will result in a refresh once the transaction is completed).
        $("#tableTask tr.jqgrow").unbind('contextmenu');