cancelChanges
Cancels any pending changes in the data source. Deleted data items are restored, new data items are removed, and updated data items are restored to their initial state. Every data item uid will be reset.
A
change
event will be triggered only when all changes are reverted and will not be triggered when reverting changes for a single model instance.
Parameters
model kendo.data.Model
The optional data item (model). If specified, only the changes of this data item will be discarded. If omitted, all changes will be discarded.
Specifying a data item (model) for
cancelChanges
will not work if the data item was removed from the collection viaremove
method.
Example - cancel all changes
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: "Jane Doe" }
],
schema: {
model: { id: "id" }
}
});
dataSource.fetch(function(){
// add a new data item
dataSource.add({ name: "John Doe" });
// update existing data item
var dataItem = dataSource.at(0);
dataItem.set("name", "Jane Doe 2");
// cancel all changes
dataSource.cancelChanges();
dataItem = dataSource.at(0);
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(dataItem.name); // displays "Jane Doe"
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(dataSource.data().length); // displays "1"
});
</script>
Example - cancel changes of only one data item
<script>
var dataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: "Jane Doe" }
],
schema: {
model: { id: "id" }
}
});
dataSource.fetch(function(){
// add a new data item
dataSource.add({ name: "John Doe" });
// update existing data item
var dataItem = dataSource.at(0);
dataItem.set("name", "Jane Doe 2");
// cancel the changes of the dataItem
dataSource.cancelChanges(dataItem);
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(dataItem.name); // displays "Jane Doe"
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(dataSource.data().length); // displays "2"
});
</script>