DevExtreme Angular - ODataStore API

The ODataStore is a store that provides an interface for loading and editing data from an individual OData entity collection and handling related events.

import ODataStore from "devextreme/data/odata/store"
Type:

Object

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    url: "http://www.example.com/Northwind.svc/Products",
    key: "ProductID",
    keyType: "Int32",
    // Other ODataStore options go here
});

// ===== or inside the DataSource =====
var dataSource = new DevExpress.data.DataSource({
    store: {
        type: "odata",
        url: "http://www.example.com/Northwind.svc/Products",
        key: "ProductID",
        keyType: "Int32",
        // Other ODataStore options go here
    },
    // Other DataSource options go here
});
Angular
TypeScript
import ODataStore from "devextreme/data/odata/store";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    store: ODataStore;
    dataSource: DataSource;
    constructor () {
        this.store = new ODataStore({
            url: "http://www.example.com/Northwind.svc/Products",
            key: "ProductID",
            keyType: "Int32",
            // Other ODataStore options go here
        });

        // ===== or inside the DataSource =====
        this.dataSource = new DataSource({
            store: new ODataStore({
                url: "http://www.example.com/Northwind.svc/Products",
                key: "ProductID",
                keyType: "Int32",
                // Other ODataStore options go here
            }),
            // Other DataSource options go here
        });
    }
}
AngularJS
JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.store = new DevExpress.data.ODataStore({
            url: "http://www.example.com/Northwind.svc/Products",
            key: "ProductID",
            keyType: "Int32",
            // Other ODataStore options go here
        });

        // ===== or inside the DataSource =====
        $scope.dataSource = new DevExpress.data.DataSource({
            store: {
                type: "odata",
                url: "http://www.example.com/Northwind.svc/Products",
                key: "ProductID",
                keyType: "Int32",
                // Other ODataStore options go here
            },
            // Other DataSource options go here
        });
    });
Knockout
JavaScript
    
var viewModel = {
    store: new DevExpress.data.ODataStore({
        url: "http://www.example.com/Northwind.svc/Products",
        key: "ProductID",
        keyType: "Int32",
        // Other ODataStore options go here
    })

    // ===== or inside the DataSource =====
    dataSource: new DevExpress.data.DataSource({
        store: {
            type: "odata",
            url: "http://www.example.com/Northwind.svc/Products",
            key: "ProductID",
            keyType: "Int32",
            // Other ODataStore options go here
        },
        // Other DataSource options go here
    })
};

ko.applyBindings(viewModel);
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .DataSource(ds => ds.OData()
        .Url("http://www.example.com/Northwind.svc/Products")
        .Key("ProductID")
        .KeyType(EdmType.Int32)
        // Other ODataStore options go here
    )
)
@(Html.DevExtreme().WidgetName() _
    .DataSource(Function(ds)
        Return ds.OData() _
                 .Url("http://www.example.com/Northwind.svc/Products") _
                 .Key("ProductID") _
                 .KeyType(EdmType.Int32) _
                 @* ... *@
                 @* Other ODataStore options go here *@
                 @* ... *@
    End Function)
)

To access an entire OData service, use the ODataContext instead.

See Also

Configuration

This section describes the ODataStore's configuration options.

Name Description
beforeSend

Specifies a function that customizes the request before it is sent to the server.
deserializeDates

Specifies whether the store serializes/parses date-time values.
errorHandler

Specifies the function that is executed when the store throws an error.
fieldTypes

Specifies the data field types. Accepts the following types: "String", "Int32", "Int64", "Boolean", "Single", "Decimal" and "Guid".
jsonp

Specifies whether data should be sent using JSONP.
key

Specifies the key property (or properties) used to access data items.
keyType

Specifies the type of the key property or properties.
onInserted

A function that is executed after a data item is added to the store.
onInserting

A function that is executed before a data item is added to the store.
onLoaded

A function that is executed after data is loaded to the store.
onLoading

A function that is executed before data is loaded to the store.
onModified

A function that is executed after a data item is added, updated, or removed from the store.
onModifying

A function that is executed before a data item is added, updated, or removed from the store.
onRemoved

A function that is executed after a data item is removed from the store.
onRemoving

A function that is executed before a data item is removed from the store.
onUpdated

A function that is executed after a data item is updated in the store.
onUpdating

A function that is executed before a data item is updated in the store.
url

Specifies the URL of an OData entity collection.
version

Specifies the OData version.
withCredentials

Specifies whether to send cookies, authorization headers, and client certificates in a cross-origin request.

Methods

This section describes the methods that control the ODataStore.

Name Description
byKey(key)

Gets a data item with a specific key.
byKey(key, extraOptions)

Gets an entity with a specific key.
createQuery(loadOptions)

Creates a Query for the OData endpoint.
insert(values)

Adds a data item to the store.
key()

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

Gets a data item's key value.
load()

Starts loading data.
load(options)

Starts loading data.
off(eventName)

Detaches all event handlers from a single event.
off(eventName, eventHandler)

Detaches a particular event handler from a single event.
on(eventName, eventHandler)

Subscribes to an event.
on(events)

Subscribes to events.
remove(key)

Removes a data item with a specific key from the store.
totalCount(options)

Gets the total count of items the load() function returns.
update(key, values)

Updates a data item with a specific key.

Events

This section describes events that the ODataStore raises.

Name Description
inserted

Raised after a data item is added to the store.
inserting

Raised before a data item is added to the store.
loaded

Raised after data is loaded to the store.
loading

Raised before data is loaded to the store.
modified

Raised after a data item is added, updated, or removed from the store.
modifying

Raised before a data item is added, updated, or removed from the store.
removed

Raised after a data item is removed from the store.
removing

Raised before a data item is removed from the store.
updated

Raised after a data item is updated in the store.
updating

Raised before a data item is updated in the store.