New to Kendo UI for jQuery? Start a free 30-day trial

CancelChanges

methods

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.

cancelChanges

Parameters:modelkendo.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 via remove method.

<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>

<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>