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

Included in:, dx.web.js, dx.viz.js, dx.viz-web.js, dx.all.js
Export: default


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.

When using a widget as an ASP.NET MVC Control, declare the options of the DataSource in the DataSourceOptions() method.

Razor C#
Razor VB
    .DataSource(d => d
        // ...
        // Data access is configured here
    .DataSourceOptions(o => o
        .Filter("['ProductID', '>', 10]")
        .Sort("LastName", false)
@(Html.DevExtreme().DataGrid() _
    .ID("dataGrid") _
        Return d.
            @* Data access is configured here *@
    End Function) _
        o.Filter("['ProductID', '>', 10]") _
         .Sort("LastName", False)
    End Sub)

For information on how to configure data access in ASP.NET MVC Controls, see the Data Binding topic.


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.