DevExtreme Vue - DataSource API

The DataSource is an object that provides an API for processing data from an underlying store.

import DataSource from "devextreme/data/data_source"
Type:

Object

jQuery
JavaScript
var dataSource = new DevExpress.data.DataSource({
    // ...
    // DataSource is configured here
    // ...
});
Angular
TypeScript
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    dataSource: DataSource;
    constructor () {
        this.dataSource = new DataSource({
            // ...
            // DataSource is configured here
            // ...
        });
    }
}
AngularJS
JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.dataSource = new DevExpress.data.DataSource({
            // ...
            // DataSource is configured here
            // ...
        });
    });
Knockout
JavaScript
var viewModel = {
    dataSource: new DevExpress.data.DataSource({
        // ...
        // DataSource is configured here
        // ...
    })
};

ko.applyBindings(viewModel);
Vue
App.vue
<script>
import DataSource from 'devextreme/data/data_source';

const dataSource = new DataSource({
    // ...
    // DataSource is configured here
    // ...
});

export default {
    data() {
        return {
            dataSource
        }
    }
}
</script>
React
App.js
// ...
import DataSource from 'devextreme/data/data_source';

const dataSource = new DataSource({
    // ...
    // DataSource is configured here
    // ...
});

class App extends React.Component {
    // ...
}
export default App;
NOTE
If you create a DataSource instance outside a widget (as shown above), make sure to dispose of it when it is no longer required. If the instance is created inside a widget, it is disposed of automatically.

Refer to the Data Layer and DataSource Examples articles for more information on working with data in DevExtreme.

When using a widget as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, declare the DataSource options 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)
)
NOTE
The DataSource is immutable. You cannot change its configuration at runtime. However, you can use its methods to manipulate it.
See Also

Props

This section describes options that configure the DataSource.

Name Description
customQueryParams

Custom parameters that should be passed to an OData service with the load query. Available only for the ODataStore.
expand

Specifies the navigation properties to be loaded with the OData entity. Available only for the ODataStore.
filter

Specifies data filtering conditions.
group

Specifies data grouping options.
map

Specifies an item mapping function.
onChanged

A function that is executed after data is loaded.
onLoadError

A function that is executed when data loading fails.
onLoadingChanged

A function that is executed when the data loading status changes.
pageSize

Specifies the maximum number of data items per page. Applies only if paginate is true.
paginate

Specifies whether the DataSource loads data items by pages or all at once. Defaults to false if group is set; otherwise, true.
postProcess

Specifies a post processing function.
pushAggregationTimeout

Specifies the period (in milliseconds) when changes are aggregated before pushing them to the DataSource.
requireTotalCount

Specifies whether the DataSource requests the total count of data items in the storage.
reshapeOnPush

Specifies whether to reapply sorting, filtering, grouping, and other data processing operations after receiving a push.
searchExpr

Specifies the fields to search.
searchOperation

Specifies the comparison operation used in searching. The following values are accepted: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".
searchValue

Specifies the value to which the search expression is compared.
select

Specifies the fields to select from data objects.
sort

Specifies data sorting options.
store

Configures the store underlying the DataSource.

NOTE

The DataSource allows specifying CustomStore options in its configuration object, as shown in the following code:

jQuery
JavaScript
var infiniteList = new DevExpress.data.DataSource({
    load: function (loadOptions) {
        // Loading data objects
    },
    byKey: function (key) {
        // Retrieving a data object by key
    }
});
Angular
TypeScript
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    infiniteList: DataSource;
    constructor() {
        this.infiniteList = new DataSource({
            load: (loadOptions) => {
                // Loading data objects
            },
            byKey: (key) => {
                // Retrieving a data object by key
            }
        });
    }
}
Vue
App.vue
<script>
import DataSource from 'devextreme/data/data_source';

const infiniteList = new DataSource({
    load: (loadOptions) => {
        // Loading data objects
    },
    byKey: (key) => {
        // Retrieving a data object by key
    }
});

export default {
    // ...
    data() {
        return {
            infiniteList
        }
    }
}
</script>
React
App.js
// ...
import DataSource from 'devextreme/data/data_source';

const infiniteList = new DataSource({
    load: (loadOptions) => {
        // Loading data objects
    },
    byKey: (key) => {
        // Retrieving a data object by key
    }
});

class App extends React.Component {
    // ...
}
export default App;

Methods

This section describes methods that control the DataSource.

Name Description
cancel(operationId)

Cancels the load operation with a specific identifier.
dispose()

Disposes of all the resources allocated to the DataSource instance.
filter()

Gets the filter option's value.
filter(filterExpr)

Sets the filter option's value.
group()

Gets the group option's value.
group(groupExpr)

Sets the group option's value.
isLastPage()

Checks whether the count of items on the current page is less than the pageSize. Takes effect only with enabled paging.
isLoaded()

Checks whether data is loaded in the DataSource.
isLoading()

Checks whether data is being loaded in the DataSource.
items()

Gets data items the DataSource performs operations on.
key()

Gets the value of the underlying store's key option.
load()

Starts loading data.
loadOptions()

Gets an object with current data processing settings.
off(eventName)

Detaches all event handlers from a single event.
off(eventName, eventHandler)

Detaches a particular event handler from a single event.
on(eventName, eventHandler)

Subscribes to an event.
on(events)

Subscribes to events.
pageIndex()

Gets the current page index.
pageIndex(newIndex)

Sets the index of the page that should be loaded on the next load() method call.
pageSize()

Gets the page size.
pageSize(value)

Sets the page size.
paginate()

Gets the paginate option's value.
paginate(value)

Sets the paginate option's value.
reload()

Clears currently loaded DataSource items and calls the load() method.
requireTotalCount()

Gets the requireTotalCount option's value.
requireTotalCount(value)

Sets the requireTotalCount option's value.
searchExpr()

Gets the searchExpr option's value.
searchExpr(expr)

Sets the searchExpr option's value.
searchOperation()

Gets the searchOperation option's value.
searchOperation(op)

Sets the searchOperation option's value.
searchValue()

Gets the searchValue option's value.
searchValue(value)

Sets the searchValue option's value.
select()

Gets the select option's value.
select(expr)

Sets the select option's value.
sort()

Gets the sort option's value.
sort(sortExpr)

Sets the sort option's value.
store()

Gets the instance of the store underlying the DataSource.
totalCount()

Gets the number of data items in the store after the last load() operation without paging. Takes effect only if requireTotalCount is true

Events

This section describes events that the DataSource raises.

Name Description
changed

Raised after data is loaded.
loadError

Raised when data loading fails.
loadingChanged

Raised when the data loading status is changed.