how to end inline edit started with formatter edit action button if other row is clicked in jqgrid

Question

Inline editing is started using edit formatter action button. If clicked in other row, old row remains in inline edit mode.

How to end old row indline edit if clickedin other row.

According to http://www.trirand.com/blog/?page_id=393/bugs/wrong-hovering-effect-in-actions-formatter-of-jqgrid-4-1-0

it looks line this is solved in 4.1.2 but actually the problem persists.

Update

Using Oleg workaround exception occurs if custom element is used. Line where exception occurs is marked in comment in code below

// this is jqgrid custom_element property value:
function combobox_element(value, options, width, colName, entity, andmetp) {
    var elemStr;
    if (options.id === options.name)
    // form 
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content ui-corner-all" style="vertical-align:top" size="' +
                options.size + '"';
    else
        elemStr = '<div>' +
           '<input class="FormElement ui-widget-content " style="height:17px;vertical-align:top;width:' +
                width + 'px" '; 

    elemStr += ' value="' + value + '"' + ' id="' + options.id + '"/>';
    elemStr += '<button style="height:21px;width:21px;" tabindex="-1" /></div>';

    var newel = $(elemStr)[0];
    setTimeout(function () {
        $(newel).parent().css({ display: "inline-block" }).parent().css({ 'padding-bottom': 0 });
  // click in edit button in action input variable is undefined, newel does not contain input element:
   var input = $("input", newel);
    }, 500);
    return newel;
}

Update2

I try to explain new issue more clearly. Before adding

                onEdit = @"function (id) {
                if (typeof (lastSelectedRow) !== 'undefined' && id !== lastSelectedRow) {
                   cancelEditing($('#grid'));
                   }
                 lastSelectedRow = id;
              }

event handler exception on custom element does not occur. After adding onEdit event handler below custom editing elements are not created anymore. So custom editing elements cannot used in inline editing if this onEdit handler is present. I commented out cancelEditing code but problem persists. It looks like this onEdit event handler prevents custom editing element creation.

Update 3

I tried demo provided in Oleg answer. If inline edit is started by double click in row, action buttons do not change. It is not possible to use save and cancel buttons in this case.

Answer 1

You are right. It seems bug in the formatter:"actions" of the current version of jqGrid. If you examine the source code you will find no variable which saves the information about the last editing row. So depend on the implementation of your code which use formatter:"actions" you can has either multiple editing rows:

or at least wrong icons in the old editing row

and you will not be able to edit the previous editing icon ever more (because you have no "edit" action icon).

In the demo I suggest as the workaround to cancel the previous editing unsaved row in both onSelectRow jqGrid event and in the onEdit event of the formatter:'actions'. The corresponding code fragment look as following

var grid=$("#list"),
    lastSel,
    cancelEditing = function(myGrid) {
        var lrid;
        if (typeof lastSel !== "undefined") {
            // cancel editing of the previous selected row if it was in editing state.
            // jqGrid hold intern savedRow array inside of jqGrid object,
            // so it is safe to call restoreRow method with any id parameter
            // if jqGrid not in editing state
            myGrid.jqGrid('restoreRow',lastSel);

            // now we need to restore the icons in the formatter:"actions"
            lrid = $.jgrid.jqID(lastSel);
            $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").show();
            $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
        }
    };

grid.jqGrid({
    // ...
    colModel:[
        {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
            formatoptions:{
                keys: true,
                delOptions: myDelOptions,
                onEdit: function (id) {
                    if (typeof (lastSel) !== "undefined" && id !== lastSel) {
                        cancelEditing(grid);
                    }
                    lastSel = id;
                }
            }},
        ...
    ],
    onSelectRow: function(id) {
        if (typeof (lastSel) !== "undefined" && id !== lastSel) {
            cancelEditing($(this));
        }
        lastSel = id;
    }
});

In the demo I use inline editing on double clicking on the grid row in addition to the action formatter. It is not really required, but both can work together without any conflicts.