In our application the user is able to edit multiple rows at the same time. When he clicks the save button all the rows are saved to DB, one by one.
The problem I have is that when a user fills in something wrong for example skipping a required field I want to cancel the saving from there and the user should be able to correct the error.
What I am missing in my solution is that I don't know how to disable a row in edit mode to original state after the row is saved with success. If I do restoreRow then the old values before editing are displayed.
My code (I keep my jqGrid in a variable called grid):
function saveGrid() {
var saveCollection = [];
//Collect all rows in editmode, the rows to be saved.
$.each(grid.getDataIDs(), function (index, id) {
var row = grid.getInd(id, true);
if (row !== false) {
if ($(row).attr('editable') === '1') {
saveCollection.push(id);
}
}
});
//Function to save single row.
function saveSingleRow(rowId) {
var success = false;
grid.saveRow(rowId, function () {
//Row successfully saved.
success = true;
//Here I want to restore the row somehow but not with the old values.
});
//If everything worked out, save next row if there are any left.
if (success) {
saveCollection = $.grep(saveCollection, function (obj) {
return obj !== rowId;
});
if (saveCollection.length > 0) {
return saveSingleRow(saveCollection[0]);
}
}
//If error or the last row, return success status.
return success;
}
//Check if there are any rows in editmode, then begin to save each row.
if (saveCollection.length > 0) {
if (!saveSingleRow(saveCollection[0])) {
//If something went wrong during saving cancel and return from this function.
return;
}
}
//Every row was successfully saved. Reload grid.
grid.trigger('reloadGrid');
}
As you can see, once an error occurs, will it be from the server or a validation error the save process stops and return false. But if this happens on lets say row number four then row one to three are already saved successfully but still in edit mode. The user will then have the feeling that these rows are not saved.
This is how I open up my rows for editing (inline editing). It happens when the user clicks the edit button in the toolbar:
var rows = $.grep(grid.getGridParam('selarrrow'), function () { return true; });
if (rows !== null && rows.length > 0) {
$.each(rows, function (i1, gr) {
if (gr !== null) {
grid.editRow(gr, false);
}
});
}
So is there a kind of "de-edit" function? I can't come up with a better main solution right now. Is there a way to check if there are any validation errors before starting the save process? Then I could check that and after that send all my rows to the server and save them within a transaction.
Appreciates any help! Thank you.
UPDATED The solution is that there is no function that lock rows again after saving. This should be done automatically when saves are successful. In this case the problem is that when adding the callback function that runs after the save comes back to the client successfully you have to return true for this to happen. So this is what was missing (the statement at the bottom: return true;):
grid.saveRow(rowId, function () {
//Row successfully saved.
success = true;
//Here I want to restore the row somehow but not with the old values.
return true;
});
