DataSource
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
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. |
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
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. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.
We appreciate your feedback.