jqgrid - Add new row and disable restoreRow function - jqgrid

Question

If I will add new row and I will enable automatic editing newly added row, then I want to perform validation and save row by ENTER button, BUT I don't want to restore row by ESC button. Because I set required: true by all fields and If newly added row will be to have empty at least one field, then ESC button (restoreRow) causes inconsistency my data, because will not be performed validation and newly added row will be to have empty fields. Although I set required: true.
The problem is that After added new row I always want to validate the edited row before saving, but ESC button causes restoreRow. For normal editing causes by doubliClick I want use ESC for restore row and ENTER for save row.
My code is generated from coffeescript
$("#add-row").click((function(_this) {
return function(e) {
e.preventDefault();
return _this.saveEditingRow(function() {
var dataIds;
_this.table.jqGrid("addRowData", void 0, "last");
dataIds = _this.table.jqGrid("getDataIDs");
if (dataIds.length > 0) {
return _this.table.jqGrid("editRow", dataIds[dataIds.length - 1], {
keys: true,
url: "clientArray",
aftersavefunc: function(rowId) {
return retypeColumnValues.call(table, rowId);
}
});
}
});
};
})(this));
Table.prototype.saveEditingRow = function(successfunc, errorfunc) {
var i, result, savedRows, success, _i, _ref;
savedRows = this.table.jqGrid("getGridParam", "savedRow");
success = true;
for (i = _i = 0, _ref = savedRows.length; _i < _ref; i = _i += 1) {
if (savedRows.length > 0) {
result = this.table.jqGrid("saveRow", savedRows[i].id, {
url: "clientArray"
});
if (!result && success) {
success = false;
}
}
}
if (success) {
return typeof successfunc === "function" ? successfunc() : void 0;
} else {
return typeof errorfunc === "function" ? errorfunc() : void 0;
}
};
If it will be necessary, I will fill all code in coffeescript.

Answer 1

I agree that it's a problem because the option keys: true register keydown event handler which process both Enter and Esc. You can't just inform jqGrid to process Enter, but don't process Esc.
If you don't call restoreRow in your code then you could probably salve your problem by usage of beforeCancelRow callback which you could define in $.jgrid.inlineEdit.
$.extend(true, $.jgrid.inlineEdit, {
beforeCancelRow: function () { // the parameters options and rowid can be used
return false;
}
});
The code above will don't allows restoreRow at all. You can modify the code by including some validations.
One more options which you have: don't use keys: true, but register your own keydown handler on all <input> and <select> fields in the editing row. You can do this inside of oneditfunc callback. See the source code of keydown handler used by jqGrid. You need just call of saveRow in case of e.keyCode === 13. The required rowid you can either get from the outer scope (if you do this inside of oneditfunc) or to get it from e.target: $(e.target).closest("tr.jqgrow").attr("id").
One more option: you can add some class like jqgrid-new-row (it's the class used by addRow method) to the row (<tr>) directly after call of addRowData ($("#" + dataIds[dataIds.length - 1]).addClass("jqgrid-new-row")). You should add afterrestorefunc callback to editRow which you call. Inside of the afterrestorefunc you can test whether the row has jqgrid-new-row class and call delRowData row in the case. By the way if you add the class with jqgrid-new-row name (or to use addRow instead of addRowData) then deleting of canceled row will be done automatically by restoreRow (see the code fragment).
You can even do this unconditionally without any tests for the class jqgrid-new-row if the above code work only in case of editing of new added row. So the call of editRow could be like below
return _this.table.jqGrid("editRow", dataIds[dataIds.length - 1], {
keys: true,
url: "clientArray",
aftersavefunc: function(rowId) {
return retypeColumnValues.call(table, rowId);
},
afterrestorefunc: function(rowId) {
_this.table.jqGrid("delRowData", rowId); // delete after cancel editing
}
});