How to finish inline editing started with a formatting edit action button if another line is clicked in jqgrid

Question

Initial editing is started using the formatting edit button. If you click on another line, the old line will remain in the built-in editing mode.

How to finish editing a line of a line by clicking on another line.

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

it looks like shown in 4.1.2, but in fact the problem persists.

Update

The use of a workaround for Oleg occurs if a user element is used. The line where the exception occurs is marked in the comment in the 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 am trying to explain the new problem more clearly. Before adding

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

an event handler exception does not occur in the user element. After adding the onEdit event handler below, custom edit controls are no longer created. Therefore, custom edit controls cannot be used in inline editing if this onEdit handler is present. I commented on the cancelEditing code, but the problem persists. This onEdit event handler seems to prevent the creation of a custom edit control.

Update 3

I tried the demo provided in Oleg. If inline editing is started by double-clicking on a line, the action buttons do not change. In this case, you cannot use the save and cancel buttons.

Answer 1

You're right. There seems to be a bug in formatter:"actions" current version of jqGrid. If you look at the source code , you will not find any variable that stores information about the last line of editing. Therefore, depending on the implementation of your code that uses formatter:"actions" , you may have either a few lines of editing:

or at least the wrong icons in the old edit line

and you will no longer be able to edit the previous edit icon (because you don’t have the “edit” action icon).

In the demo, I propose, as a workaround, to cancel the previous edited unsaved row in both the onSelectRow jqGrid event and the onEdit formatter:'actions' event. The corresponding code snippet is as follows

 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 by double-clicking on the grid line in addition to formatting the actions. This is not required, but both can work together without any conflict.