DevExtreme React - ODataStore Methods

This section describes the methods that control the ODataStore.

byKey(key)

Gets a data item with a specific key.

Parameters:
key:

Object

|

String

|

Number

A data item's key value.

Return Value:

Promise<any> (jQuery or native)

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

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

// Getting the data item with key 1
store.byKey(1)
    .done(function (dataItem) {
        // Process the "dataItem" here
    })
    .fail(function (error) {
        // Handle the "error" here
    });
Angular
TypeScript
import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        // Getting the data item with key 1
        this.store.byKey(1).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    };
}

byKey(key, extraOptions)

Gets an entity with a specific key.

Parameters:
key:

Object

|

String

|

Number

An entity's key value.

extraOptions:

Object

Additional options.

Object structure:
Name Type Description
expand

String

|

Array<String>

The names of the navigation properties to be loaded simultaneously with the entity (see OData - Associations).

Return Value:

Promise<any> (jQuery or native)

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

In the following code, the byKey method loads the product with ID 1 along with the "Category" navigation property:

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    // ...
    key: "Product_ID"
});
store.byKey(1, { expand: "Category" })
    .done(function (dataItem) {
        // Process the "dataItem" here
    })
    .fail(function (error) {
        // Handle the "error" here
    });
Angular
TypeScript
import ODataStore from "devextreme/data/odata/store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ...
            key: "Product_ID"
        });
        this.store.byKey(1, { expand: "Category" }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    };
}

createQuery(loadOptions)

Creates a Query for the OData endpoint.

Parameters:
loadOptions:

Object

An object containing the expand, requireTotalCount, and customQueryParams properties.

Return Value:

Object

The Query object.

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});
var query = store.createQuery({ expand: "propertyName" });
Angular
TypeScript
import ODataStore from "devextreme/data/odata/store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        this.store.createQuery({ expand: "propertyName" });
    };
}
See Also

insert(values)

Adds a data item to the store.

Parameters:
values:

Object

A data item.

Return Value:

Promise<any> (jQuery or native)

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

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

store.insert({ id: 1, name: "John Doe" })
     .done(function (dataItem, key) {
         // Process the "key" and "dataItem" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });
Angular
TypeScript
import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        this.store.insert({ id: 1, name: "John Doe" })
            .then(
                (dataItem) => { /* Process the "dataItem" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}
NOTE
The data item's key value should be unique or the insertion fails.

key()

Gets the key property (or properties) as specified in the key option.

Return Value: any

The key option's value.

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    // ...
    key: "ProductID"
});

var keyProps = store.key(); // returns "ProductID"
Angular
TypeScript
import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ...
            key: "ProductID"
        });
        let keyProps = this.store.key(); // returns "ProductID"
    };
}

keyOf(obj)

Gets a data item's key value.

Parameters:
obj:

Object

A data item.

Return Value: any

The data item's key value.

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    // ...
    key: "id"
});

var key = store.keyOf({ id: 1, name: "John Doe" }); // returns 1
Angular
TypeScript
import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ...
            key: "id"
        });
        let key = this.store.keyOf({ id: 1, name: "John Doe" }); // returns 1
    };
}

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.

load(options)

Starts loading data.

Parameters:
options:

LoadOptions

An object containing data processing settings.

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 store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

store.load(options)
     .done(function (data) {
         // Process "data" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });
Angular
TypeScript
import ODataStore from "devextreme/data/odata_store";
import DevExpress from "devextreme/bundles/dx.all";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        let options: DevExpress.data.LoadOptions = {
            // Data processing settings are specified here
        };
        this.store.load(options)
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

off(eventName)

Detaches all event handlers from a single event.

Parameters:
eventName:

String

The event's name.

Return Value:

Object

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:

Object

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:

Object

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:

Object

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

remove(key)

Removes a data item with a specific key from the store.

Parameters:
key:

Object

|

String

|

Number

A data item's key value.

Return Value:

Promise<void> (jQuery or native)

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

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

// Removing the data item with key 1
store.remove(1)
     .done(function (key) {
         // Process the "key" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });
Angular
TypeScript
import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        // Removing the data item with key 1
        this.store.remove(1)
            .then(
                (key) => { /* Process the "key" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

totalCount(options)

Gets the total count of items the load() function returns.

Parameters:
obj:

Object

Filtering and grouping options.

Object structure:
Name Type Description
filter

Object

A filtering expression; described in the Filtering section.

group

Object

A grouping expression; described in the Grouping section.

Return Value:

Promise<Number> (jQuery or native)

A Promise that is resolved after the total item count is obtained. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

store.totalCount()
     .done(function (count) {
         // Process the "count" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });
Angular
TypeScript
import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        this.store.totalCount()
            .then(
                (count) => { /* Process the "count" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

update(key, values)

Updates a data item with a specific key.

Parameters:
key:

Object

|

String

|

Number

A data item's key value.

values:

Object

An object with new values for the data item.

Return Value:

Promise<any> (jQuery or native)

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

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

store.update(1, { name: "John Smith" })
     .done(function (key, dataItem) {
         // Process the "key" and "dataItem" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });
Angular
TypeScript
import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        this.store.update(1, { name: "John Smith" })
            .then(
                (key) => { /* Process the "key" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}