DataSource

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

Included in: dx.mobile.js, dx.web.js, dx.viz.js, dx.viz-web.js, dx.all.js
Module: data/data_source
Export: default
Type: Object

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.

JavaScript
var myDataSource = new DevExpress.data.DataSource(dataSourceConfig);

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

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

HTML
<div data-bind="dxList: { dataSource: dataSourceConfig }"></div>
NOTE
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, Data Source Examples, and Data-Bound Application 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
@(Html.DevExtreme().DataGrid()
    .ID("dataGrid")
    .DataSource(d => d
        // ...
        // Data access is configured here
    )
    .DataSourceOptions(o => o
        .Filter("['ProductID', '>', 10]")
        .Sort("LastName", false)
    )
)
@(Html.DevExtreme().DataGrid() _
    .ID("dataGrid") _
    .DataSource(Function(d)
        Return d.
            @* Data access is configured here *@
    End Function) _
    .DataSourceOptions(Sub(o)
        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.

Configuration

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

NOTE
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.
JavaScript
var infiniteListSource = new DevExpress.data.DataSource({
    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 };
    }
});

Methods

This section describes the methods used to manipulate the DataSource.

Events

This section describes events raised by the DataSource object.

To handle events, use one of the following methods.