jqGrid, disabled edited row

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;
            });

It seems to me you should just add "not-editable-row" class to the row (<tr> element) after successful saving of the changes. See the answer for details and the demo.

UPDATED based on the discussion from comments: What you describe shows me that saving the rows works incorrect in your demo. After successful saving the saveRow closes the editing mode of the saved row. I created the demo which do what you describe, but uses the local editing only. In case of saving the data on the server all should work exactly in the same way.

In the comment you wrote "the grid is locked for editing if another user is currently in edit mode on another computer". In case of web application the locking of data in the database is a bad practice in my opinion. In breaking of connection to the client or in case of other errors you can easy have locking data in the database and no client connected. One use typically optimistic concurrency control instead. See here and here for details.