DevExtreme Vue - 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.

Props

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.

DevExtreme Vue - ODataStore API

jQuery

Angular

Vue

React

AngularJS

Knockout

ASP.NET MVC Controls

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

See Also

Props

Methods

Events