An object that provides access to a data web service or local data storage for collection container widgets.

Included in: dx.phonejs.js, dx.webappjs.js, dx.chartjs.js, dx.all.js


A DataSource object is the connection between a collection container widget and the data provided by a web service or data stored locally. To create a DataSource instance, call its constructor and pass the configuration object to it.

var myDataSource = new;

To associate a DataSource instance with a widget, pass this instance to the dataSource option of the widget.

<div data-bind="dxList: { dataSource: myDataSource }"></div>

You can also pass the DataSource configuration object to the dataSource option. In this case, the DataSource instance will be automatically created within the widget.

<div data-bind="dxList: { dataSource: dataSourceConfig }"></div>
If you create a DataSource instance outside the widget, be sure to dispose of it when it is no longer used. If the DataSource is created within the widget, it will be disposed of automatically.

Refer to the Data Layer and Data Source Examples topics for more information about working with data in DevExtreme.


This section describes configuration options used to configure the data source.

To create a DataSource instance that uses custom data access logic, pass the CustomStore configuration object to the DataSource constructor. As an example, consider the following synthetic implementation, which generates a read-only infinite list.
var infiniteListSource = new{
    load: function(loadOptions) {
        var result = [ ];
        for(var i = 0; i < loadOptions.take; i++)
            result.push({ id: 1 + loadOptions.skip + i });
        return result;
    byKey: function(key) {
        return { id: key };


This section describes the methods used to manipulate the DataSource.


This section describes events raised by the DataSource object.

To handle events, use one of the following methods.