2

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.

1 Answer 1

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
    }
});
1
  • Thank you so much. Solution was very easy :) I added only afterrestorefunc with delete newly added row without testing of class jqgrid-new-row, because you have right that mentioned code works only in case editing of newly added row. I tried to use addRow instead of addRowData, but it was problem. The row was added on first place in grid.
    – positive
    Jan 7, 2015 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.