change

Fired when the data source is populated from a JavaScript array or a remote service, a data item is inserted, updated or removed, the data items are paged, sorted, filtered, or grouped.

The event handler function context (available via the this keyword) will be set to the data source instance.

Event Data

e.sender kendo.data.DataSource

The data source instance which fired the event.

e.action String (optional)

String describing the action type (available for all actions other than "read").

The possible values are:

• "itemchange"
• "add"
• "remove"
• "sync"

e.field String (optional)

A string describing the field that is changed (available only for the "itemchange" action).

e.items Array

The array of data items that were affected (or read).

Example - subscribe to the change event during initialization

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  change: function(e) {
    var data = this.data();
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(data.length); // displays "77"
  }
});
dataSource.fetch();
</script>

Example - subscribe to the change event after initialization

<script>
function dataSource_change(e) {
  var data = this.data();
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log(data.length); // displays "77"
}
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  }
});
dataSource.bind("change", dataSource_change);
dataSource.fetch();
</script>