The DataSource is an object that provides an API for processing data from an underlying store.
jQueryvar 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 // ... }); } }Vue
<script> import DataSource from 'devextreme/data/data_source'; const dataSource = new DataSource({ // ... // DataSource is configured here // ... }); export default { data() { return { dataSource } } } </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;
If you create a DataSource instance outside a UI component (as shown above), make sure to dispose of it when it is no longer required. If the instance is created inside a UI component, it is disposed of automatically.
DataSource is not designed to be used in multiple components simultaneously. If you want to share data between multiple widgets, create the store object common for all components. Each component should wrap this store in a separate DataSource.
If you use DataSource with Next.js, add a
use client
directive
to ensure the instance is created on the client only. DataSource instances do not support React serialization and therefore cannot be created on the server and sent to the client.
Refer to the Data Layer and DataSource Examples articles for more information on working with data in DevExtreme.
The
DataSourceis immutable. You cannot change its configuration at runtime. However, you can use its
methodsto manipulate it.
This section describes properties that configure the DataSource.
Name Description customQueryParamsCustom parameters that should be passed to an OData service with the load query. Available only for the ODataStore.
expandSpecifies the navigation properties to be loaded with the OData entity. Available only for the ODataStore.
filterSpecifies data filtering conditions.
groupSpecifies data grouping properties.
langParamsSpecifies parameters for language-specific sorting and filtering.
mapSpecifies an item mapping function.
onChangedA function that is executed after data is loaded.
onLoadErrorA function that is executed when data loading fails.
onLoadingChangedA function that is executed when the data loading status changes.
pageSizeSpecifies the maximum number of data items per page. Applies only if paginate is true.
paginateSpecifies whether the DataSource loads data items by pages or all at once. Defaults to false if group is set; otherwise, true.
postProcessSpecifies a post processing function.
pushAggregationTimeoutSpecifies the period (in milliseconds) when changes are aggregated before pushing them to the DataSource.
requireTotalCountSpecifies whether the DataSource requests the total count of data items in the storage.
reshapeOnPushSpecifies whether to reapply sorting, filtering, grouping, and other data processing operations after receiving a push.
searchExprSpecifies the fields to search.
searchOperationSpecifies the comparison operation used in searching.
searchValueSpecifies the value to which the search expression is compared.
selectSpecifies the fields to select from data objects.
sortSpecifies data sorting properties.
storeConfigures the store underlying the DataSource.
The DataSource allows you to specify CustomStore properties in its configuration object. If you define CustomStore properties as shown in the following code, they override the store.
jQueryvar 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) => { return new Promise((resolve, reject) => { const data = // Loading data objects resolve(data); }); }, byKey: (key) => { return new Promise((resolve, reject) => { const obj = // Retrieving a data object by key resolve(obj); }); } }); } }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
// ... 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;
This section describes methods that control the DataSource.
This section describes events that the DataSource raises.
Name Description changedRaised after data is loaded.
loadErrorRaised when data loading fails.
loadingChangedRaised when the data loading status is changed.
Feel free to share topic-related thoughts here.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4