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.
jQuery
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
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 }); } }
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 options 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 options go here }), // Other DataSource options go here }); export default { // ... } </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 options 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 options go here }), // Other DataSource options go here }); class App extends React.Component { // ... } export default App;
AngularJS
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
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
@(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 ODataStore instead.
See Also
Props
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) 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. |
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) |
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. |
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. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.