Data Source

DataSource is a JavaScript object that gives data a common interface for the various Kendo UI widgets.

var dataSource = new kendo.data.DataSource({
  ...<properties>...
});

Defining data for a DataSource instance does not immediately fetch/read the data, unless you are passing the DataSource to a widget. In that case, the widget will fetch/read the data without have to call the read() or fetch() method.

If using a DataSource outside of a widget context you will have to call read() or fetch() to fill the instance with data.

Note that fetch() will make a request to a remote service once, the first time it is called, while read() always makes a request to the remote service, unless the data source is offline.

// Life cycle of a dataSource

//create grid with dataSource config value
var grid = $('#grid').kendoGrid({
      columns: [
        { field: 'name' },
        { field: 'age' }
      ],
//create data source instance, pass to dataSource config
      dataSource: new kendo.data.DataSource({
        data: [
          { name: 'Jane Doe', age: 30 },
          { name: 'John Doe', age: 33 }
         ]
        })
    }).getKendoGrid();

//update dataSource instance with new data, using .dataSource.add()
    grid.dataSource.add({name: 'Bill Doe', age: 3});

//use setDataSource to remove old DataSource and add new one
grid.setDataSource(new kendo.data.DataSource({
        data: [
          { name: 'Doug Doe', age: 30 },
          { name: 'Jill Doe', age: 33 }
         ]
}));