Question

jqGrid inline edit starts on single in click by onSelectRow event below.
Save and cancel action buttons are turned on.

Save or cancel button click does not end inline edit. Row remains in edit mode after clicking to those buttons.
It looks like button click causes onSelectRow event which re-starts inline edit.

How to end single click inline edit in clicked in save or cancel action button ?

$(function () {
    var grid = $("#grid");
    grid.jqGrid({
          colModel: [{"name":"_actions","width":45,"formatter":"actions",
          "formatoptions":{"keys":true,"delbutton":false,"afterSave":function (rowID, response) {
                  cancelEditing($('#grid'));
                  aftersavefunc(rowID, response);
            }
,"onError":errorfunc
,"onEdit":function (rowID) {
       if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
                       cancelEditing($('#grid'));
                       lastSelectedRow = rowID;
       }
}},
...
},

       onSelectRow: function (rowID) {
        lastSelectedRow = rowID;
    $("tr#" + lastSelectedRow + " div.ui-inline-edit, " + "tr#" + lastSelectedRow + " div.ui-inline-del").hide();
    $("tr#" + lastSelectedRow + " div.ui-inline-save, " + "tr#" + lastSelectedRow + " div.ui-inline-cancel").show();
    $("#grid").jqGrid('editRow', lastSelectedRow );
  }
}


function cancelEditing(myGrid) {
    if (typeof lastSelectedRow !== "undefined") {
        myGrid.jqGrid('restoreRow', lastSelectedRow);
  var lrid = lastSelectedRow;
  $("tr#" + lrid + " div.ui-inline-edit").show();
  $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
    }
}
}

update

Grid contains checkbox in toolbar which toggles single click edit mode for rapid data entry (autoedit):

            onSelectRow: function (rowID) {
              if (!autoedit) {
                if (typeof (lastSelectedRow) !== "undefined" && lastSelectedRow !== rowID)
                  cancelEditing ($(this));
                  return;
                  }
                  beginInlineRowEdit(rowID);
             },

Even in this mode text can be selected and copied to clipboard. The issue is that in single click mode click in save and cancel button does not terminate inline edit, maybe this click in interpreted as start edit command. How to check in onSelectRow if clicked in action column and not to start inline edit in this case, making action column not to start inline edit or other idea ?

update2

I tried

           beforeSelectRow: function (rowID,e) {
            alert( $(e.target).html());

}

If clicked in edit button message box is empty. It is empty also if clicked outside check box checkmark column. If clicked outside edit button it contains whole grid html.
How to dedect click in action column ?

Update 3

As Oleg suggested I tried

beforeSelectRow: function (rowID,e) { 
   if (!jqgrid_beforeSelectRow( rowID, e)) return false;
   beginInlineEdit(rowID, aftersavefunc );
   return true;
              }


function beginInlineEdit(rowID, afterSave) {
    var grid2 = $("#grid");
    if (rowID && rowID !== lastSelectedRow) {
        var scrollPosition = $("#grid").closest(".ui-jqgrid-bdiv").scrollLeft();
        cancelEditing($("#grid"));
        lastSelectedRow = rowID;
        setTimeout(function () {
            grid2.closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition);
        }, 100);
    }
    $("tr#" + lastSelectedRow + " div.ui-inline-edit, " + "tr#" + lastSelectedRow + " div.ui-inline-del").hide();
    $("tr#" + lastSelectedRow + " div.ui-inline-save, " + "tr#" + lastSelectedRow + " div.ui-inline-cancel").show();

    $("#grid").jqGrid('editRow', lastSelectedRow, true, null, null, null,
                 { _dokdata: FormData },
                 afterSave,
                 errorfunc,
                 function () {  // afterrestorefunc
                     cancelEditing($("#grid"));
                     setFocusToGrid();
                 }
             );
}

jqgrid_beforeSelectRow = function (rowID, e) {
    if ($(e.target).hasClass('ui-icon-cancel')) { return false; }
    if ($(e.target).hasClass('ui-icon-disk')) { return false; }
    if (typeof (lastSelectedRow) !== "undefined" && lastSelectedRow !== rowID)
      cancelEditing($("#grid"));
    return true;
}

function cancelEditing(myGrid) {
    if (typeof lastSelectedRow !== "undefined") {
        myGrid.jqGrid('restoreRow', lastSelectedRow);
        restoreActionsIcons();
    }
}

Using regular double-click to start edit. In product grid first row edit button starts edi only first time. after save button is pressed, remaining clicks in edit button are ignored, inline editing does not start. This happends only if first rows in product table. In bottom rows edit can started multiple times. how to fix this ?

Answer 1

If I understand your question correct the user have to press Esc after row selection or click the “Cancel” action button if the user not want to edit the line.

I used to use grids which will be used not only for editing, but more for viewing. So I prefer personally to use ondblClickRow instead of onSelectRow to enter in the inline editing mode. In the case the user can select or just click in the row or make copy to the clipboard some data from the grid. If the user need to edit the row the user can use either double-click of the action buttons.