Methods
This section describes methods that control the DataSource.
cancel(operationId)
Cancels the load operation with a specific identifier.
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.
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); var loadPromise = ds.load(); loadPromise.done(function (result) { // ... }); ds.cancel(loadPromise.operationId);
dispose()
Disposes of all the resources allocated to the DataSource instance.
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.dispose();
Angular
import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // DataSource is configured here }); this.ds.dispose(); } }
filter()
Gets the filter option's value.
A filter expression.
jQuery
var ds = new DevExpress.data.DataSource({ // ... filter: ["age", ">", 18] }); var filterExpr = ds.filter(); // returns ["age", ">", 18]
Angular
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] } }
See Also
filter(filterExpr)
Sets the filter option's value.
A filter expression.
Pass null to clear filtering settings.
Call the load() method to update the widget bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.filter(["age", ">", 18]); // or // ds.filter("age", ">", 18); ds.load();
Angular
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(); } }
See Also
group()
Gets the group option's value.
A group expression.
jQuery
var ds = new DevExpress.data.DataSource({ // ... group: { selector: "employeeID", desc: true } }); var groupExpr = ds.group(); // returns { selector: "employeeID", desc: true }
Angular
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 } } }
See Also
group(groupExpr)
Sets the group option's value.
A group expression.
Call the load() method to update the widget bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.group({ selector: "employeeID", desc: true }); ds.load();
Angular
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(); } }
See Also
isLastPage()
Checks whether the count of items on the current page is less than the pageSize. Takes effect only with enabled paging.
true if the item count is less than the pageSize; otherwise false.
isLoaded()
Checks whether data is loaded in the DataSource.
true if data is loaded; otherwise false.
isLoading()
Checks whether data is being loaded in the DataSource.
true if data is being loaded; otherwise false.
items()
Gets data items the DataSource performs operations on.
Array<any>
The data items.
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); var dataItems = ds.items();
Angular
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(); } }
key()
Gets the value of the underlying store's key option.
jQuery
var ds = new DevExpress.data.DataSource({ store: { // ... key: "ProductID" } }); var keyProps = ds.key(); // returns "ProductID"
Angular
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" } }
See Also
- key in ArrayStore | CustomStore | LocalStore | ODataStore
load()
Starts loading data.
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
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
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 */ } ) } }
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.
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); var loadOptions = ds.loadOptions();
Angular
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(); } }
off(eventName)
Detaches all event handlers from a single event.
The event's name.
The object for which this method is called.
off(eventName, eventHandler)
Detaches a particular event handler from a single event.
The object for which this method is called.
on(eventName, eventHandler)
Subscribes to an event.
The object for which this method is called.
on(events)
Subscribes to events.
Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}
The object for which this method is called.
pageIndex(newIndex)
Sets the index of the page that should be loaded on the next load() method call.
A zero-based page index.
Call the load() method to update the widget bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // ... paginate: true, pageSize: 10 }); ds.pageIndex(2); ds.load();
Angular
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(); } }
pageSize(value)
Sets the page size.
A new page size value.
Call the load() method to update the widget bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // ... paginate: true, pageSize: 10 }); ds.pageSize(15); ds.load();
Angular
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(); } }
paginate(value)
Sets the paginate option's value.
A new value.
Call the load() method to update the widget bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // ... paginate: true, pageSize: 10 }); ds.paginate(false); ds.load();
Angular
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(); } }
reload()
Clears currently loaded DataSource items and calls the load() method.
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(value)
Sets the requireTotalCount option's value.
A new value.
Call the load() method to update the widget bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // ... requireTotalCount: true }); ds.requireTotalCount(false); ds.load();
Angular
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(); } }
searchExpr()
Gets the searchExpr option's value.
The option's value; described in the Getters and Setters section.
searchExpr(expr)
Sets the searchExpr option's value.
A new value; described in the Getters and Setters section.
searchOperation(op)
Sets the searchOperation option's value.
A new value. Can be one of the following: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains" and "notcontains".
searchValue(value)
Sets the searchValue option's value.
A new value.
Call the load() method to update the widget bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.searchExpr("firstName"); ds.searchOperation("contains"); ds.searchValue("Jo"); ds.load();
Angular
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(); } }
See Also
select(expr)
Sets the select option's value.
A select expression.
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.select(["firstName", "lastName", "birthDate"]); // or // ds.select("firstName", "lastName", "birthDate");
Angular
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"); } }
See Also
sort(sortExpr)
Sets the sort option's value.
A sort expression.
Call the load() method to update the widget bound to the DataSource:
jQuery
var ds = new DevExpress.data.DataSource({ // DataSource is configured here }); ds.sort({ selector: "Discount", desc: true }); ds.load();
Angular
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(); } }
See Also
store()
Gets the instance of the store underlying the DataSource.
A store instance.
jQuery
var ds = new DevExpress.data.DataSource({ store: { // Store is configured here } }); var store = ds.store();
Angular
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(); } }
totalCount()
Gets the number of data items in the store after the last load() operation without paging. Takes effect only if requireTotalCount is true
The number of data items.
jQuery
var ds = new DevExpress.data.DataSource({ // ... requireTotalCount: true }); var itemCount = ds.totalCount();
Angular
import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ // ... requireTotalCount: true }); let itemCount = this.ds.totalCount(); } }
If you have technical questions, please create a support ticket in the DevExpress Support Center.
We appreciate your feedback.