DevExtreme jQuery - 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.
jQuery
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
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
<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
// ...
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;ASP.NET MVC Controls
@(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.
A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
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 ORM. 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 and use our predefined template in Visual Studio 2022+.
Read Tutorial | View Examples: JavaScript (DevExtreme) & JavaScript (Svelte) | Watch Videos
See Also
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 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
| Name | Description |
|---|---|
| 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
| 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. |