Pop Editing - cancel update when server side error

[Connections Academy Developer]

I have a kendo grid implemented with popup editing. I wired up a function to the save event so that when the user clicks 'Update' an ajax request is made. I'm trying to find a way to cancel the update and not add the new or updated data if the request returns an error.

options.save = function (e) {

    widget.save.call(viewModel, e.model.toJSON(), function () {

        e.preventDefault();

    });

};

The save function being called makes a $.post() request and if the response comes  back with an error it will fire the callback passed to save.

I have noticed that as soon as an ajax call is made the edit popup is closed and the data appears in the grid even though the ajax call hasn't been returned yet.  This led me to return a jquery deferred in my function,  but regardless of the deferred the changes are still saved to the grid before the deferred is returned.

How can I cancel the save event so that all changes that I've made to the data are reversed?

widget.options.save = function (e) {

    $.when(widget.save.call(viewModel, e.model.toJSON())).then().fail(function () {

        kendoGrid.cancelChanges();

    });

};

function save (item) {
var url = constants.handlerUrl + 'action=save';
var data = JSON.stringify(item);
var deferred = $.Deferred();

return $.post(url, data).pipe(function(data, textStatus, jqXHR) {
var deferred = $.Deferred();
data = ko.utils.parseJson(data);

if (data.error) {
return deferred.reject();

var location = ko.utils.arrayFirst(self.locations, function (item) {
return item.id == data.id;
});
location.zipCodes(data.zipCodes);

return deferred.resolve();
});
};

[Vladimir Iliev]

Hi,

 
I would suggest to check the "Handling server-side validation errors during pop-up editing" demo which demonstrates how to handle server-side validation errors and to display the validation message within the edit form.

Kind Regards,
Vladimir Iliev
the Telerik team