The DataSource is an object that provides an API for processing data from an underlying store.
import DataSource from "devextreme/data/data_source"
Type:
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
- ASP.NET MVC Controls - Bind Controls to Data
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. |
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. |
Was this topic helpful?
Feel free toshare topic-related thoughts here.
Ifyou have technical questions, please create asupport ticket inthe DevExpress Support Center.
Thank you for the feedback!