DevExtreme React - 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"

jQuery
JavaScript
var store = new DevExpress.data.ODataStore({
    url: "http://www.example.com/Northwind.svc/Products",
    key: "ProductID",
    keyType: "Int32",
    // Other ODataStore properties 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 properties go here
    },
    // Other DataSource properties 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 properties 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 properties go here
            }),
            // Other DataSource properties go here
        });
    }
}
Vue
App.vue
<script>
import ODataStore from 'devextreme/data/odata/store';
import DataSource from 'devextreme/data/data_source';

const store = new ODataStore({
    url: 'http://www.example.com/Northwind.svc/Products',
    key: 'ProductID',
    keyType: 'Int32',
    // Other ODataStore properties go here
});

// ===== or inside the DataSource =====
const dataSource = new DataSource({
    store: new ODataStore({
        url: 'http://www.example.com/Northwind.svc/Products',
        key: 'ProductID',
        keyType: 'Int32',
        // Other ODataStore properties go here
    }),
    // Other DataSource properties go here
});

export default {
    // ...
    data() {
        return {
            store,
            // ===== or =====
            dataSource
        }
    }
}
</script>
React
App.js
// ...
import ODataStore from 'devextreme/data/odata/store';
import DataSource from 'devextreme/data/data_source';

const store = new ODataStore({
    url: 'http://www.example.com/Northwind.svc/Products',
    key: 'ProductID',
    keyType: 'Int32',
    // Other ODataStore properties go here
});

// ===== or inside the DataSource =====
const dataSource = new DataSource({
    store: new ODataStore({
        url: 'http://www.example.com/Northwind.svc/Products',
        key: 'ProductID',
        keyType: 'Int32',
        // Other ODataStore properties go here
    }),
    // Other DataSource properties go here
});

class App extends React.Component {
    // ...
}
export default App;
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 properties 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 properties go here
            },
            // Other DataSource properties 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 properties 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 properties go here
        },
        // Other DataSource properties 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 properties 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 properties go here *@
                 @* ... *@
    End Function)
)

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

NOTE
The ODataStore is immutable. You cannot change its configuration at runtime. However, you can use its methods to manipulate it.

A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core & XPO

If you target .NET for your backend API, be sure to check out Web API Service and register your free copy today. The Solution Wizard scaffolds an OData v4 Web API Service (.NET 6+) with integrated authorization & CRUD operations powered by EF Core and our XPO ORM library. You can use OAuth2, JWT or custom authentication strategies alongside tools like Postman or Swagger (OpenAPI) for API testing.

The built-in Web API Service also filters out secured server data based on permissions granted to users. Advanced/enterprise functions include audit trail, endpoints to download reports, file attachments, check validation, obtain localized captions, etc.

To use the free Solution Wizard (which creates the Web API Service) run the Universal Component Installer from the DevExpress Download Manager.

See Also

Configuration

This section describes the ODataStore's configuration properties.

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 a function that is executed when the ODataStore throws an error.

fieldTypes

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

filterToLower

Specifies whether to convert string values to lowercase in filter and search requests. Applies to the following operations: "startswith", "endswith", "contains", and "notcontains".

jsonp

Specifies whether data should be sent using JSONP.

key

Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique.

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.

onPush

The function executed before changes are pushed to 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)

key()

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

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.

push(changes)

Pushes data changes to the store and notifies the DataSource.

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.

push

Raised before changes are pushed to 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.