Why does the KendoUI Grid not rollback a delete when the options.error function is called? - kendo-ui

Question

I have put a fiddle here that demonstrates the issue.
http://jsfiddle.net/codeowl/fmzay/1/
Just delete a record, and it should rollback the delete as I am calling options.error from inside the destroy function.
Why is it that the grid doesn't roll back?
Regards,
Scott
Markup:
<div id="KendoGrid"></div>
JS:
var _data = [
{ Users_ID: 1, Users_FullName: 'Bob Smith', Users_Role: 'Administrator' },
{ Users_ID: 2, Users_FullName: 'Barry Baker', Users_Role: 'Viewer' },
{ Users_ID: 3, Users_FullName: 'Bill Cow', Users_Role: 'Editor' },
{ Users_ID: 4, Users_FullName: 'Boris Brick', Users_Role: 'Administrator' }
],
_dataSource = new kendo.data.DataSource({
data: _data,
destroy: function (options) {
options.error(new Error('Error Deleting User'));
}
});
$('#KendoGrid').kendoGrid({
dataSource: _dataSource,
columns: [
{ field: "Users_FullName", title: "Full Name" },
{ field: "Users_Role", title: "Role", width: "130px" },
{ command: ["edit", "destroy"], title: " ", width: "180px" }
],
toolbar: ['create'],
editable: 'popup'
});

Answer 1

Signaling the error is not enough. Lets say that having an error on removing a record is not enough since KendoUI doesn't know if the record has actually been removed in the server and the reply is the one producing the error. So KendoUI approach is a conservative approach: You have to decide what to do and explicitly say it:
So what you should do is add an error hander function that invokes a cancelChanges in the grid.
The code would be:
_dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
options.success(_data);
console.log('Read Event Has Been Raised');
},
destroy: function (options) {
options.error(new Error('Error Deleting User'));
console.log('Destroy Event Has Been Raised');
}
},
schema: {
model: {
id: "Users_ID",
fields: {
Users_ID: { editable: false, nullable: true },
Users_FullName: { type: "string", validation: { required: true } },
Users_Role: { type: "string", validation: { required: true } }
}
}
},
error: function(a) {
$('#KendoGrid').data("kendoGrid").cancelChanges();
}
});
And the updated JSFiddle in here: http://jsfiddle.net/OnaBai/fmzay/3

Answer 2

The ASP.NET-MVC equivalent solution to the OnaBai answer would be:
<script type="text/javascript">
function cancelChanges(e) {
e.sender.cancelChanges();
}
</script>
#Html.Kendo().Grid<MyClass>()
.DataSource(dataSource =>
dataSource
.Ajax()
.Read(read => read.Action("Read", "MyController"))
.Destroy(destroy => destroy.Action("Destroy", "MyController"))
.Events(evt => evt.Error("cancelChanges"))
)
[...]
Please be aware that the cancelChanges event will be called upon an error on every CRUD request.