Habilitar el botón Guardar en JQ Grid con InlineEditing y CellEdit

Hola, tengo una grilla que usa edición de celda y edición en línea. Se guarda en ClientArray

$('#list').jqGrid({ datatype: "local", colNames: ["Parameter Id", "Parameter Name", 'Parameter Value'], colModel: [ { name: "Id", index: "Id", align: "left", key: true, editable: false,hidden:true, jmap: 0 }, { name: "ParameterName", index: "ParameterName", align: "left", editable: false, jmap: 1 }, { name: "ParameterValue", index: "ParameterValue", align: "left", editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: {required: true }, jmap: 2 } ], pager: "#pager", rowNum: 100, rowList: [], pgbuttons: false, // disable page control like next, back button pgtext: null, // disable pager text like 'Page 0 of 10' viewrecords: true, // disable current view record text like 'View 1-10 of 100' height: '100%', scrollOffset: 0, sortname: "Name", sortorder: "Asc", gridview: true, caption: 'Parameters', autowidth: true, hidegrid: false, loadonce: true, //beforeEditCell: function () { // $("#list_ilsave").removeClass('ui-state-disabled'); // return; //}, //afterEditCell: function (rowid, cellname, value, iRow, iCol) { // $('#list').jqGrid('getCell', rowid, iCol).focus(); // return; //}, width: totalWidth, cellEdit: true, cellsubmit: "clientArray" }); $('#list').jqGrid('inlineNav', '#pager', { edit: false, add: false, del: false, save: true, savetext: 'Save', cancel: false }); 

Cuando edito una celda, el botón Guardar permanece desactivado. Si habilito manualmente el botón en beforeCellEdit, la celda editable no tiene foco hasta que seleccione otra celda. Este comportamiento solo ocurre en IE.

Intenté solucionar estos dos problemas individualmente en mi código comentado y descubrí que la pérdida de enfoque se debe a la línea

 $("#list_ilsave").removeClass('ui-state-disabled'); 

Intenté colocar esta línea antes de EditCell y en AfterEditCell, y causa que el campo de entrada pierda el foco.

Estaba usando JQ Grid 4.4.4 y he intentado actualizar a 4.6.0 después de leer que había actualizaciones para Inline Editing después de 4.4.4

ACTUALIZAR He cambiado mi grilla para usar en SelectRow

  onSelectRow: function (rowid) { var $grid = $('#list'); var iRow = $("#" + rowid)[0].rowIndex; $grid.jqGrid('editRow', rowid, { keys: true, oneditfunc: function(rowid, response) { var $saveButton = $("#list_ilsave"); if ($saveButton.hasClass('ui-state-disabled')) { $saveButton.removeClass('ui-state-disabled'); } markCellAsDirty(rowid, $grid); return true; }, successfunc: function() { alert('success'); return true; }, aftersavefunc: function() { alert('after save'); return true; }, errorfunc: function() { alert('error'); return true; } }); }, cellsubmit: "clientArray" 

Pero no puedo activar ninguno de los eventos editRow que no sean oneditfunc . También tengo problemas para obtener las células modificadas.

Este método marca las celdas como sucias / editadas

 function markCellAsDirty(rowid, grid) { $(grid.jqGrid("setCell", rowid, "ParameterValue", "", "dirty-cell")); $(grid[0].rows.namedItem(rowid)).addClass("edited"); } 

Intento obtener las celdas editadas de la siguiente manera

 var editedRows = $grid.getChangedCells('dirty'); 

Antes de publicar editedRows en un método AJAX en mi servidor.

No estoy seguro de qué quiere implementar exactamente, pero modifiqué su demostración en https://jsfiddle.net/OlegKi/byygepy3/11/ . Incluyo el código JavaScript completo de la demostración a continuación

 $(function () { var myData = [ { id: 10, ParameterName: "Test", ParameterValue: "" }, { id: 20, ParameterName: "Test 1", ParameterValue: "" }, { id: 30, ParameterName: "Test 2", ParameterValue: "" } ], $grid = $("#list"); // change the text displayed on editrules: {required: true } $.extend(true, $.jgrid.locales["en-US"].edit.msg, { required: "No value was entered for this parameter!!!" }); $grid.jqGrid({ datatype: "local", data: myData, colNames: ["", "Parameter Name", "Parameter Value"], colModel: [ { name: "act", template: "actions" }, // optional feature { name: "ParameterName" }, { name: "ParameterValue", editable: true, editoptions: { maxlength: 100 }, editrules: {required: true } } ], cmTemplate: { autoResizable: true }, autoResizing: { compact: true }, pager: true, pgbuttons: false, // disable page control like next, back button pgtext: null, // disable pager text like 'Page 0 of 10' viewrecords: true, // disable current view record text like 'View 1-10 of 100' sortname: "Name", iconSet: "fontAwesome", caption: 'Parameters', autowidth: true, hidegrid: false, inlineEditing: { keys: true }, singleSelectClickMode: "selectonly", // prevent unselect once selected rows beforeSelectRow: function (rowid) { var $self = $(this), i, // savedRows array is not empty if some row is in inline editing mode savedRows = $self.jqGrid("getGridParam", "savedRow"); for (i = 0; i < savedRows.length; i++) { if (savedRows[i].id !== rowid) { // save currently editing row // one can replace saveRow to restoreRow in the next line $self.jqGrid("saveRow", savedRows[i].id); } } return savedRows.length === 0; // allow selection if saving successful }, onSelectRow: function (rowid) { $(this).jqGrid("editRow", rowid); }, afterSetRow: function (options) { var item = $(this).jqGrid("getLocalRow", options.rowid); if (item != null) { item.dirty = true; } }, navOptions: { edit: false, add: false, search: false, deltext: "Delete", refreshtext: "Refresh" }, inlineNavOptions: { save: true, savetext: "Save", cancel: false, restoreAfterSelect: false }, formDeleting: { // delete options url: window.g_baseUrl + 'MfgTransactions_MVC/COA/Delete?', beforeSubmit: function () { // get value var selRowId = $(this).jqGrid('getGridParam', 'selrow'); var parametricValue = $(this).jqGrid('getCell', selRowId, 'ParameterValue'); // check if empty if (parametricValue === "") { return [false, "Cannot delete: No value exists for this parameter"]; } return [true, "Successfully deleted"]; }, delData: { batchId: function () { return $("#BatchId").val(); } }, closeOnEscape: true, closeAfterDelete: true, width: 400, msg: "Are you sure you want to delete the Parameter?", afterComplete: function (response) { if (response.responseText) { alert("response.responseText"); } //loadBatchListIntoGrid(); } } }).jqGrid('navGrid') .jqGrid('inlineNav') .jqGrid('navButtonAdd', { caption: "Save Changed", buttonicon: "fa-floppy-o", onClickButton: function () { var localData = $(this).jqGrid("getGridParam", "data"), dirtyData = $.grep(localData, function (item) { return item.dirty; }); alert(dirtyData.length > 0 ? JSON.stringify(dirtyData) : "no dirty data"); } }); // make more place for navigator buttons be rwducing the width of the right part var pagerIdSelector = $grid.jqGrid("getGridParam", "pager"); $(pagerIdSelector + "_right").width(100); // make the grid responsive $(window).bind("resize", function () { $grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width()); }).triggerHandler("resize"); }); 

donde el código HTML es

 

y código CSS

 .ui-th-column>div, .ui-jqgrid-btable .jqgrow>td { word-wrap: break-word; /* IE 5.5+ and CSS3 */ white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ overflow: hidden; vertical-align: middle; } 

Demuestra cómo se puede implementar el inicio de la edición en línea en la fila de selección. Además, agregué una columna opcional con template: "actions" que pueden ser una implementación alternativa. Configuré propiedades dirty en cada elemento de datos dentro de la callback afterSetRow y agregué el botón “Guardar modificado”, que usa localData = $(this).jqGrid("getGridParam", "data") y dirtyData = $.grep(localData, function (item) { return item.dirty; }); para obtener los datos sucios (modificados).