DevExtreme React - DataSource Methods (2024)

This section describes methods that control the DataSource.

cancel(operationId)

Cancels the load operation with a specific identifier.

Parameters:

operationId:

Number

An operation identifier.

Return Value:

Boolean

true if the operation was canceled; false if it was not found.

You can use the operationId field that extends the Promise object returned from the load() and reload() methods to access the operation identifier.

jQuery

index.js

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});var loadPromise = ds.load();loadPromise.done(function (result) { // ...});ds.cancel(loadPromise.operationId);

NOTE

Calling this method does not interrupt the HTTP request.

dispose()

Disposes of all the resources allocated to the DataSource instance.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});ds.dispose();
Angular

TypeScript

import { ..., OnDestroy } from '@angular/core';import DataSource from "devextreme/data/data_source";// ...export class AppComponent implements OnDestroy { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); } ngOnDestroy() { this.ds.dispose(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});export default { data() { return { ds } }, beforeDestroy() { ds.dispose(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});class App extends React.Component { componentWillUnmount() { ds.dispose(); } // ...}export default App;

NOTE

Do not call this method if the DataSource instance was created by a UI component.

filter()

Gets the filter property's value.

Return Value:

Object

A filter expression.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // ... filter: ["age", ">", 18]});var filterExpr = ds.filter(); // returns ["age", ">", 18]
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // ... filter: ["age", ">", 18] }); let filterExpr = this.ds.filter(); // returns ["age", ">", 18] }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... filter: ['age', '>', 18]});export default { data() { return { ds } }, mounted() { this.filterExpr = ds.filter(); // returns ["age", ">", 18] }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... filter: ['age', '>', 18]});class App extends React.Component { constructor(props) { super(props); this.filterExpr = ds.filter(); // returns ["age", ">", 18] }}export default App;
See Also
  • Filtering

filter(filterExpr)

Sets the filter property's value.

Parameters:

filterExpr:

Object

A filter expression.
Pass null to clear filtering settings.

Call the load() method to update the UI component bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});ds.filter(["age", ">", 18]);// or// ds.filter("age", ">", 18);ds.load();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); this.ds.filter(["age", ">", 18]); // or // this.ds.filter("age", ">", 18); this.ds.load(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});export default { data() { return { ds } }, mounted() { ds.filter(['age', '>', 18]); // or // ds.filter('age', '>', 18); ds.load(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});class App extends React.Component { constructor(props) { super(props); ds.filter(['age', '>', 18]); // or // ds.filter('age', '>', 18); ds.load(); }}export default App;
See Also
  • Filtering

group()

Gets the group property's value.

Return Value:

Object

A group expression.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // ... group: { selector: "employeeID", desc: true }});var groupExpr = ds.group(); // returns { selector: "employeeID", desc: true }
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // ... group: { selector: "employeeID", desc: true } }); let groupExpr = this.ds.group(); // returns { selector: "employeeID", desc: true } }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... group: { selector: 'employeeID', desc: true }});export default { data() { return { ds } }, mounted() { this.groupExpr = ds.group(); // returns { selector: "employeeID", desc: true } }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... group: { selector: 'employeeID', desc: true }});class App extends React.Component { constructor(props) { super(props); this.groupExpr = ds.group(); // returns { selector: "employeeID", desc: true } }}export default App;
See Also
  • Grouping

group(groupExpr)

Sets the group property's value.

Parameters:

groupExpr:

Object

A group expression.

Call the load() method to update the UI component bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});ds.group({ selector: "employeeID", desc: true });ds.load();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); this.ds.group({ selector: "employeeID", desc: true }); this.ds.load(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});export default { data() { return { ds } }, mounted() { ds.group({ selector: 'employeeID', desc: true }); ds.load(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});class App extends React.Component { constructor(props) { super(props); ds.group({ selector: 'employeeID', desc: true }); ds.load(); }}export default App;
See Also
  • Grouping

isLastPage()

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

Return Value:

Boolean

true if the item count is less than the pageSize; otherwise false.

isLoaded()

Checks whether data is loaded in the DataSource.

Return Value:

Boolean

true if data is loaded; otherwise false.

isLoading()

Checks whether data is being loaded in the DataSource.

Return Value:

Boolean

true if data is being loaded; otherwise false.

items()

Return Value:

Array<any>

Data items.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});var dataItems = ds.items();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); let dataItems = this.ds.items(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});export default { data() { return { ds } }, mounted() { this.dataItems = ds.items(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});class App extends React.Component { constructor(props) { super(props); this.dataItems = ds.items(); }}export default App;

key()

Gets the value of the underlying store's key property.

Return Value:

String

|

Array<String>

A key expression.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ store: { // ... key: "ProductID" }});var keyProps = ds.key(); // returns "ProductID"
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ store: { // ... key: "ProductID" } }); let keyProps = this.ds.key(); // returns "ProductID" }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ store: { // ... key: 'ProductID' }});export default { data() { return { ds } }, mounted() { this.keyProps = ds.key(); // returns "ProductID" }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ store: { // ... key: 'ProductID' }});class App extends React.Component { constructor(props) { super(props); this.keyProps = ds.key(); // returns "ProductID" }}export default App;
See Also
  • key in ArrayStore | CustomStore | LocalStore | ODataStore

load()

Starts loading data.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after data is loaded.It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});ds.load() .done(function (data) { // Process "data" here }) .fail(function (error) { // Handle the "error" here });
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); this.ds.load() .then( (data) => { /* Process "data" here */ }, (error) => { /* Handle the "error" here */ } ) }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});export default { data() { return { ds } }, mounted() { ds.load() .then( (data) => { /* Process "data" here */ }, (error) => { /* Handle the "error" here */ } ) }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});class App extends React.Component { constructor(props) { super(props); ds.load() .then( (data) => { /* Process "data" here */ }, (error) => { /* Handle the "error" here */ } ) }}export default App;

The Promise returned from this method is extended with the operationId field which you can use to cancel the invoked operation. See cancel(operationId) for details.

See Also
  • reload()

loadOptions()

Gets an object with current data processing settings.

Return Value:

Object

Data processing settings.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});var loadOptions = ds.loadOptions();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); let loadOptions = this.ds.loadOptions(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});export default { data() { return { ds } }, mounted() { this.loadOptions = ds.loadOptions(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});class App extends React.Component { constructor(props) { super(props); this.loadOptions = ds.loadOptions(); }}export default App;

View on GitHub

off(eventName)

Detaches all event handlers from a single event.

Parameters:

eventName:

String

The event's name.

Return Value:

DataSource

The object for which this method is called.

See Also
jQuery
  • Handle Events
Angular
  • Event Handling
Vue
  • Event Handling
React
  • Event Handling

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

Parameters:

eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

DataSource

The object for which this method is called.

See Also
jQuery
  • Handle Events
Angular
  • Event Handling
Vue
  • Event Handling
React
  • Event Handling

on(eventName, eventHandler)

Subscribes to an event.

Parameters:

eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

DataSource

The object for which this method is called.

Use this method to subscribe to one of the events listed in the Events section.

See Also
jQuery
  • Handle Events
Angular
  • Event Handling
Vue
  • Event Handling
React
  • Event Handling

on(events)

Subscribes to events.

Parameters:

events:

Object

Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}

Return Value:

DataSource

The object for which this method is called.

Use this method to subscribe to several events with one method call. Available events are listed in the Events section.

See Also
jQuery
  • Handle Events
Angular
  • Event Handling
Vue
  • Event Handling
React
  • Event Handling

pageIndex()

Gets the current page index.

Return Value:

Number

A zero-based page index.

pageIndex(newIndex)

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

Parameters:

newIndex:

Number

A zero-based page index.

Call the load() method to update the UI component bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // ... paginate: true, pageSize: 10});ds.pageIndex(2);ds.load();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // ... paginate: true, pageSize: 10 }); this.ds.pageIndex(2); this.ds.load(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... paginate: true, pageSize: 10});export default { data() { return { ds } }, mounted() { ds.pageIndex(2); ds.load(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... paginate: true, pageSize: 10});class App extends React.Component { constructor(props) { super(props); ds.pageIndex(2); ds.load(); }}export default App;

pageSize()

Gets the page size.

Return Value:

Number

The page size.

pageSize(value)

Sets the page size.

Parameters:

value:

Number

A new page size value.

Call the load() method to update the UI component bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // ... paginate: true, pageSize: 10});ds.pageSize(15);ds.load();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // ... paginate: true, pageSize: 10 }); this.ds.pageSize(15); this.ds.load(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... paginate: true, pageSize: 10});export default { data() { return { ds } }, mounted() { ds.pageSize(15); ds.load(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... paginate: true, pageSize: 10});class App extends React.Component { constructor(props) { super(props); ds.pageSize(15); ds.load(); }}export default App;

paginate()

Gets the paginate property's value.

Return Value:

Boolean

The property's value.

paginate(value)

Sets the paginate property's value.

Parameters:

value:

Boolean

A new value.

Call the load() method to update the UI component bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // ... paginate: true, pageSize: 10});ds.paginate(false);ds.load();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // ... paginate: true, pageSize: 10 }); this.ds.paginate(false); this.ds.load(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... paginate: true, pageSize: 10});export default { data() { return { ds } }, mounted() { ds.paginate(false); ds.load(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... paginate: true, pageSize: 10});class App extends React.Component { constructor(props) { super(props); ds.paginate(false); ds.load(); }}export default App;

reload()

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

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after loading is completed and rejected after loading failed.It is a native Promise or a jQuery.Promise when you use jQuery.

DataSource reloads data starting from the current page index. To reload all data, set pageIndex to 0 before you call reload().

The Promise returned from this method is extended with the operationId field which you can use to cancel the invoked operation. See cancel(operationId) for details.

requireTotalCount()

Gets the requireTotalCount property's value.

Return Value:

Boolean

The property's value.

requireTotalCount(value)

Sets the requireTotalCount property's value.

Parameters:

value:

Boolean

A new value.

Call the load() method to update the UI component bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // ... requireTotalCount: true});ds.requireTotalCount(false);ds.load();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // ... requireTotalCount: true }); this.ds.requireTotalCount(false); this.ds.load(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... requireTotalCount: true});export default { data() { return { ds } }, mounted() { ds.requireTotalCount(false); ds.load(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... requireTotalCount: true});class App extends React.Component { constructor(props) { super(props); ds.requireTotalCount(false); ds.load(); }}export default App;

searchExpr()

Gets the searchExpr property's value.

Return Value:

getter

|

Array<getter>

The property's value; described in the Getters and Setters section.

searchExpr(expr)

Sets the searchExpr property's value.

Parameters:

expr:

getter

|

Array<getter>

A new value; described in the Getters and Setters section.

searchOperation()

Gets the searchOperation property's value.

Return Value:

String

The property's value.

searchOperation(op)

Sets the searchOperation property's value.

Parameters:

A new value. Can be one of the following: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains" and "notcontains".

searchValue()

Gets the searchValue property's value.

Return Value: any

The property's value.

searchValue(value)

Sets the searchValue property's value.

Parameters:

value: any

A new value.

Call the load() method to update the UI component bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});ds.searchExpr("firstName");ds.searchOperation("contains");ds.searchValue("Jo");ds.load();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); this.ds.searchExpr("firstName"); this.ds.searchOperation("contains"); this.ds.searchValue("Jo"); this.ds.load(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});export default { data() { return { ds } }, mounted() { ds.searchExpr('firstName'); ds.searchOperation('contains'); ds.searchValue('Jo'); ds.load(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});class App extends React.Component { constructor(props) { super(props); ds.searchExpr('firstName'); ds.searchOperation('contains'); ds.searchValue('Jo'); ds.load(); }}export default App;
See Also
  • Data Layer - Search API

select()

Gets the select property's value.

Return Value: any

A select expression.

See Also
  • Select Expressions

select(expr)

Sets the select property's value.

Parameters:

expr: any

A select expression.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});ds.select(["firstName", "lastName", "birthDate"]);// or// ds.select("firstName", "lastName", "birthDate");
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); this.ds.select(["firstName", "lastName", "birthDate"]); // or // this.ds.select("firstName", "lastName", "birthDate"); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});export default { data() { return { ds } }, mounted() { ds.select(['firstName', 'lastName', 'birthDate']); // or // ds.select('firstName', 'lastName', 'birthDate'); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});class App extends React.Component { constructor(props) { super(props); ds.select(['firstName', 'lastName', 'birthDate']); // or // ds.select('firstName', 'lastName', 'birthDate'); }}export default App;
See Also
  • Select Expressions

sort()

Gets the sort property's value.

Return Value: any

A sort expression.

See Also
  • Sorting

sort(sortExpr)

Sets the sort property's value.

Parameters:

sortExpr: any

A sort expression.

Call the load() method to update the UI component bound to the DataSource:

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // DataSource is configured here});ds.sort({ selector: "Discount", desc: true });ds.load();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); this.ds.sort({ selector: "Discount", desc: true }); this.ds.load(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});export default { data() { return { ds } }, mounted() { ds.sort({ selector: 'Discount', desc: true }); ds.load(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // DataSource is configured here});class App extends React.Component { constructor(props) { super(props); ds.sort({ selector: 'Discount', desc: true }); ds.load(); }}export default App;
See Also
  • Sorting

store()

Gets the instance of the store underlying the DataSource.

Return Value:

Object

A store instance.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ store: { // Store is configured here }});var store = ds.store();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ store: { // Store is configured here } }); let store = this.ds.store(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ store: { // Store is configured here }});export default { data() { return { ds } }, mounted() { this.store = ds.store(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ store: { // Store is configured here }});class App extends React.Component { constructor(props) { super(props); this.store = ds.store(); }}export default App;

totalCount()

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

Return Value:

Number

The number of data items.

jQuery

JavaScript

var ds = new DevExpress.data.DataSource({ // ... requireTotalCount: true});var itemCount = ds.totalCount();
Angular

TypeScript

import DataSource from "devextreme/data/data_source";// ...export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // ... requireTotalCount: true }); let itemCount = this.ds.totalCount(); }}
Vue

App.vue

<script>import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... requireTotalCount: true});export default { data() { return { ds } }, mounted() { this.itemCount = ds.totalCount(); }, // ...}</script>
React

App.js

// ...import DataSource from 'devextreme/data/data_source';const ds = new DataSource({ // ... requireTotalCount: true});class App extends React.Component { constructor(props) { super(props); this.itemCount = ds.totalCount(); }}export default App;

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!

DevExtreme React - DataSource Methods (2024)
Top Articles
Latest Posts
Article information

Author: Ray Christiansen

Last Updated:

Views: 6633

Rating: 4.9 / 5 (69 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Ray Christiansen

Birthday: 1998-05-04

Address: Apt. 814 34339 Sauer Islands, Hirtheville, GA 02446-8771

Phone: +337636892828

Job: Lead Hospitality Designer

Hobby: Urban exploration, Tai chi, Lockpicking, Fashion, Gunsmithing, Pottery, Geocaching

Introduction: My name is Ray Christiansen, I am a fair, good, cute, gentle, vast, glamorous, excited person who loves writing and wants to share my knowledge and understanding with you.