DevExtreme jQuery - DataSource API
The DataSource is an object that provides an API for processing data from an underlying store.
jQuery
var dataSource = new DevExpress.data.DataSource({ // ... // DataSource is configured here // ... });
Angular
import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { dataSource: DataSource; constructor () { this.dataSource = new DataSource({ // ... // DataSource is configured here // ... }); } }
AngularJS
angular.module('DemoApp', ['dx']) .controller('DemoController', function DemoController($scope) { $scope.dataSource = new DevExpress.data.DataSource({ // ... // DataSource is configured here // ... }); });
Knockout
var viewModel = { dataSource: new DevExpress.data.DataSource({ // ... // DataSource is configured here // ... }) }; ko.applyBindings(viewModel);
Vue
<script> import DataSource from 'devextreme/data/data_source'; const dataSource = new DataSource({ // ... // DataSource is configured here // ... }); export default { // ... } </script>
React
// ... import DataSource from 'devextreme/data/data_source'; const dataSource = new DataSource({ // ... // DataSource is configured here // ... }); class App extends React.Component { // ... } export default App;
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.
@(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) )
See Also
Configuration
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. |
The DataSource allows specifying CustomStore options in its configuration object, as shown in the following code:
jQuery
var infiniteList = new DevExpress.data.DataSource({ load: function (loadOptions) { // Loading data objects }, byKey: function (key) { // Retrieving a data object by key } });
Angular
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
<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 { // ... } </script>
React
// ... 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
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
Name | Description |
---|---|
changed |
Raised after data is loaded. |
loadError |
Raised when data loading fails. |
loadingChanged |
Raised when the data loading status is changed. |