BuyLog In
DevExtreme
All docs
V 19.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
19.1
18.2
18.1
17.2
All docs
V19.2

General Information

.NET Subscription

What's Included
DevExpress Installation
DevExpress Code Examples

Common Tools

Project Converter
Assembly Deployment Tool
Localization Service

Quality Assurance and Productivity

CodeRush for Visual Studio (FREE)
TestCafe Studio

Desktop

Controls

WinForms
WPF
VCL
WinUI

Tools

WinForms Skin Editor
WPF Theme Designer
WPF Theme Editor (Legacy)
Coded UI Test Extension

Frameworks and Libraries

XAF - Cross-Platform .NET App UI
XPO - .NET ORM Library (FREE)
XPO Profiler
Core Libraries
Drawing Graphics Library
.NET App Security & Web API Service (FREE)

Web

Controls and Extensions

ASP.NET Web Forms Controls
ASP.NET MVC Extensions
ASP.NET Core Controls
ASP.NET Bootstrap Controls
DevExtreme
DevExtreme ASP.NET MVC Controls
Blazor Components

Tools

ASP.NET Theme Builder
ASP.NET Theme Deployer

Maintenance Mode

ASP.NET Core Bootstrap Controls

Mobile

Xamarin UI Controls (FREE)
.NET MAUI (FREE)

Enterprise and Analytic Tools

Reporting
Report and Dashboard Server
BI Dashboard
Office File API

End-User Documentation

Interface Elements for Desktop
Interface Elements for Web
Dashboard for Desktop
Dashboard for Web
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
19.1
18.2
18.1
17.2
Full-text search
API Reference
UI Widgets
Data Layer
ArrayStore
CustomStore
DataSource
Configuration
Methods
cancel(operationId)
dispose()
filter()
filter(filterExpr)
group()
group(groupExpr)
isLastPage()
isLoaded()
isLoading()
items()
key()
load()
loadOptions()
off(eventName)
off(eventName, eventHandler)
on(eventName, eventHandler)
on(events)
pageIndex()
pageIndex(newIndex)
pageSize()
pageSize(value)
paginate()
paginate(value)
reload()
requireTotalCount()
requireTotalCount(value)
searchExpr()
searchExpr(expr)
searchOperation()
searchOperation(op)
searchValue()
searchValue(value)
select()
select(expr)
sort()
sort(sortExpr)
store()
totalCount()
Events
EdmLiteral
EndpointSelector
Guid
LocalStore
ODataContext
ODataStore
PivotGridDataSource
Query
Utils
XmlaStore
Types
Utilities
Getting Started
Angular
React
Vue
ASP.NET MVC 5
ASP.NET Core
Widgets
Data Binding
Common Features

General Information

.NET Subscription

What's Included
DevExpress Installation
DevExpress Code Examples

Common Tools

Project Converter
Assembly Deployment Tool
Localization Service

Quality Assurance and Productivity

CodeRush for Visual Studio (FREE)
TestCafe Studio

Desktop

Controls

WinForms
WPF
VCL
WinUI

Tools

WinForms Skin Editor
WPF Theme Designer
WPF Theme Editor (Legacy)
Coded UI Test Extension

Frameworks and Libraries

XAF - Cross-Platform .NET App UI
XPO - .NET ORM Library (FREE)
XPO Profiler
Core Libraries
Drawing Graphics Library
.NET App Security & Web API Service (FREE)

Web

Controls and Extensions

ASP.NET Web Forms Controls
ASP.NET MVC Extensions
ASP.NET Core Controls
ASP.NET Bootstrap Controls
DevExtreme
DevExtreme ASP.NET MVC Controls
Blazor Components

Tools

ASP.NET Theme Builder
ASP.NET Theme Deployer

Maintenance Mode

ASP.NET Core Bootstrap Controls

Mobile

Xamarin UI Controls (FREE)
.NET MAUI (FREE)

Enterprise and Analytic Tools

Reporting
Report and Dashboard Server
BI Dashboard
Office File API

End-User Documentation

Interface Elements for Desktop
Interface Elements for Web
Dashboard for Desktop
Dashboard for Web
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - DataSource Methods

This section describes methods that control the DataSource.

cancel(operationId)

Cancels the load operation with a specific identifier.

Return Value:

Boolean

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

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

JavaScript
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 widget.

filter()

Gets the filter option'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

filter(filterExpr)

Sets the filter option's value.

Parameters:
filterExpr:

Object

A filter expression.
Pass null to clear filtering settings.

Call the load() method to update the widget 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

group()

Gets the group option'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

group(groupExpr)

Sets the group option's value.

Parameters:
groupExpr:

Object

A group expression.

Call the load() method to update the widget 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

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()

Gets data items the DataSource performs operations on.

Return Value:

Array<any>

The 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 option.

Return Value:

Object

|

String

|

Number

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

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

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;

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

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

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

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

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 widget 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 widget 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 option's value.

Return Value:

Boolean

The option's value.

paginate(value)

Sets the paginate option's value.

Parameters:
value:

Boolean

A new value.

Call the load() method to update the widget 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.

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 option's value.

Return Value:

Boolean

The option's value.

requireTotalCount(value)

Sets the requireTotalCount option's value.

Parameters:
value:

Boolean

A new value.

Call the load() method to update the widget 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 option's value.

Return Value:

getter

|

Array<getter>

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

searchExpr(expr)

Sets the searchExpr option's value.

Parameters:
expr:

getter

|

Array<getter>

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

searchOperation()

Gets the searchOperation option's value.

Return Value:

String

The option's value.

searchOperation(op)

Sets the searchOperation option's value.

Parameters:
op:

String

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

searchValue()

Gets the searchValue option's value.

Return Value: any

The option's value.

searchValue(value)

Sets the searchValue option's value.

Parameters:
value: any

A new value.

Call the load() method to update the widget 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

select()

Gets the select option's value.

Return Value: any

A select expression.

See Also

select(expr)

Sets the select option'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

sort()

Gets the sort option's value.

Return Value: any

A sort expression.

See Also

sort(sortExpr)

Sets the sort option's value.

Parameters:
sortExpr: any

A sort expression.

Call the load() method to update the widget 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

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;