DevExtreme jQuery - ODataStore Options
beforeSend
Name | Type | Description |
---|---|---|
async |
Indicates whether the request is asynchronous or synchronous. |
|
headers |
The request headers. |
|
method |
The request method ("GET", "POST", "PATCH", or "MERGE"). |
|
params |
Additional request parameters. |
|
payload |
The request body; for example, when updating an item, this property holds an object with new values. |
|
timeout |
The request timeout. |
|
url |
The request URL. |
jQuery
var store = new DevExpress.data.ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", beforeSend: function (e) { e.params = { "param1": "value1", "param2": "value2" }; e.headers = { "Custom Header": "value" }; } });
Angular
import ODataStore from "devextreme/data/odata/store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", beforeSend: (e) => { e.params = { "param1": "value1", "param2": "value2" }; e.headers = { "Custom Header": "value" }; } }); }; }
Vue
<script> import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ url: 'https://js.devexpress.com/Demos/DevAV/odata/Products', beforeSend: (e) => { e.params = { 'param1': 'value1', 'param2': 'value2' }; e.headers = { 'Custom Header': 'value' }; } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ url: 'https://js.devexpress.com/Demos/DevAV/odata/Products', beforeSend: (e) => { e.params = { 'param1': 'value1', 'param2': 'value2' }; e.headers = { 'Custom Header': 'value' }; } }); class App extends React.Component { // ... } export default App;
deserializeDates
ODataStore can parse date-time values in ISO8601 format (for example, "2016-07-13T16:05:00.000Z"
) or Microsoft format (for instance, "/Date(1198908717056)/"
). In the first case, the store ignores the timezone modifier (usually Z
) when parsing the value. In the second case, the store adds the time-zone offset to the value according to the client's time-zone.
Disabling deserialization may cause filtering issues in widgets bound to the ODataStore. When deserialization is disabled in the store, date-time strings are converted to Date objects at the widget level. When filtering, the widget reverts an entered date-time value to a string based on the dateSerializationFormat option's value and passes the string to the ODataStore for further processing. OData does not support strings which cause filtering to fail.
To prevent these issues, the store's deserializeDates option should be set to true or set the widget's dateSerializationFormat option to null.
errorHandler
A JavaScript Error object extended with the following fields:
Name | Type | Description |
---|---|---|
errorDetails |
Error details. It is an OData error response object for OData-specific errors or a jqXHR object for other errors when you use jQuery. |
|
httpStatus |
The error code. |
|
requestOptions |
Request details. Contains the following fields:
|
jQuery
var store = new DevExpress.data.ODataStore({ // ... errorHandler: function(error) { console.log(error.message); } });
Angular
import ODataStore from "devextreme/data/odata/store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ errorHandler: (error) => { console.log(error.message); } }); }; }
Vue
<script> import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ // ... errorHandler: (error) => { console.log(error.message); } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ // ... errorHandler: (error) => { console.log(error.message); } }); class App extends React.Component { // ... } export default App;
fieldTypes
Specifies the data field types. Accepts the following types: "String", "Int32", "Int64", "Boolean", "Single", "Decimal" and "Guid".
Set this option if you are going to filter data. An object assigned to it should list data fields and their types as field-value pairs. You can also use this option instead of the keyType to specify the key property's type.
jQuery
var store = new DevExpress.data.ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID", fieldTypes: { Product_ID: "Guid", Product_Name: "String", Product_Price: "Int32" } });
Angular
import ODataStore from "devextreme/data/odata/store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID", fieldTypes: { Product_ID: "Guid", Product_Name: "String", Product_Price: "Int32" } }); }; }
Vue
<script> import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ url: 'https://js.devexpress.com/Demos/DevAV/odata/Products', key: 'Product_ID', fieldTypes: { Product_ID: 'Guid', Product_Name: 'String', Product_Price: 'Int32' } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ url: 'https://js.devexpress.com/Demos/DevAV/odata/Products', key: 'Product_ID', fieldTypes: { Product_ID: 'Guid', Product_Name: 'String', Product_Price: 'Int32' } }); class App extends React.Component { // ... } export default App;
ASP.NET MVC Controls
@(Html.DevExtreme().WidgetName() .DataSource(d => d.OData() .Url("https://js.devexpress.com/Demos/DevAV/odata/Products") .Key("Product_ID") .FieldTypes(new Dictionary<string, EdmType> { { "Product_ID", EdmType.Guid }, { "Product_Name", EdmType.String }, { "Product_Price", EdmType.Int32 } }) ) )
filterToLower
Specifies whether to convert string values to lowercase in filter and search requests. Applies to the following operations: "startswith", "endswith", "contains", and "notcontains".
Defaults to the global oDataFilterToLower setting.
When this option is true, the filter expression sent to the server contains a tolower()
function call and a lowercase filter value.
jQuery
var ds = new DevExpress.data.DataSource({ store: new DevExpress.data.ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID", filterToLower: true }), filter: ["Product_Name", "startswith", "Tel"] }); // The filter expression in the request looks like the following: // https://...?filter=startswith(tolower(Product_Name), 'tel')
Angular
import ODataStore from 'devextreme/data/odata/store'; import DataSource from 'devextreme/data/data_source'; // ... export class AppComponent { ds: DataSource; constructor() { this.ds = new DataSource({ store: new ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID", filterToLower: true }), filter: ["Product_Name", "startswith", "Tel"] }); // The filter expression in the request looks like the following: // https://...?filter=startswith(tolower(Product_Name), 'tel') } }
Vue
<script> import ODataStore from 'devextreme/data/odata/store'; import DataSource from 'devextreme/data/data_source'; const ds = new DataSource({ store: new ODataStore({ url: 'https://js.devexpress.com/Demos/DevAV/odata/Products', key: 'Product_ID', filterToLower: true }), filter: ['Product_Name', 'startswith', 'Tel'] }); // The filter expression in the request looks like the following: // https://...?filter=startswith(tolower(Product_Name), 'tel') export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata/store'; import DataSource from 'devextreme/data/data_source'; const ds = new DataSource{ store: new ODataStore({ url: 'https://js.devexpress.com/Demos/DevAV/odata/Products', key: 'Product_ID', filterToLower: true }), filter: ['Product_Name', 'startswith', 'Tel'] }); // The filter expression in the request looks like the following: // https://...?filter=startswith(tolower(Product_Name), 'tel') class App extends React.Component { // ... } export default App;
key
In the following example, the ProductID
and ProductCode
properties are specified as key properties:
jQuery
var store = new DevExpress.data.ODataStore({ // ... key: ["ProductID", "ProductCode"] });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ // ... key: ["ProductID", "ProductCode"] }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... key: ['ProductID', 'ProductCode'] }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... key: ['ProductID', 'ProductCode'] }); class App extends React.Component { // ... } export default App;
keyType
Set this option if you do not need to filter data. Otherwise, use the fieldTypes option. In the following code, the Product_ID
and Product_Code
key properties are Guid
and Int32
, respectively:
jQuery
var store = new DevExpress.data.ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: [ "Product_ID", "Product_Code" ], keyType: { Product_ID: "Guid", Product_Code: "Int32" } });
Angular
import ODataStore from "devextreme/data/odata/store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: [ "Product_ID", "Product_Code" ], keyType: { Product_ID: "Guid", Product_Code: "Int32" } }); }; }
Vue
<script> import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ url: 'https://js.devexpress.com/Demos/DevAV/odata/Products', key: [ 'Product_ID', 'Product_Code' ], keyType: { Product_ID: 'Guid', Product_Code: 'Int32' } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ url: 'https://js.devexpress.com/Demos/DevAV/odata/Products', key: [ 'Product_ID', 'Product_Code' ], keyType: { Product_ID: 'Guid', Product_Code: 'Int32' } }); class App extends React.Component { // ... } export default App;
When specifying this option in an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, use the EdmType
enum that has the following values: Int32
, Int64
, Guid
, String
, Boolean
, Single
and Decimal
.
onInserted
jQuery
var store = new DevExpress.data.ODataStore({ onInserted: function (values, key) { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onInserted: function (values, key) { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onInserted: function (values, key) { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onInserted: function (values, key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onInserting
jQuery
var store = new DevExpress.data.ODataStore({ onInserting: function (values) { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onInserting: function (values) { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onInserting: function (values, key) { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onInserting: function (values, key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onLoaded
jQuery
var store = new DevExpress.data.ODataStore({ onLoaded: function (result) { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onLoaded: function (result) { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onLoaded: function (result) { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onLoaded: function (result) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onLoading
jQuery
var store = new DevExpress.data.ODataStore({ onLoading: function (loadOptions) { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onLoading: function (loadOptions) { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onLoading: function (loadOptions) { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onLoading: function (loadOptions) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onModified
jQuery
var store = new DevExpress.data.ODataStore({ onModified: function () { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onModified: function () { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onModified: function () { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onModified: function () { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onModifying
jQuery
var store = new DevExpress.data.ODataStore({ onModifying: function () { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onModifying: function () { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onModifying: function () { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onModifying: function () { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onPush
Array<any>
Changes passed in the push(changes) method.
jQuery
var store = new DevExpress.data.ODataStore({ onPush: function(changes) { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onPush: (changes) => { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onPush: (changes) => { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onPush: (changes) => { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onRemoved
jQuery
var store = new DevExpress.data.ODataStore({ onRemoved: function (key) { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onRemoved: function (key) { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onRemoved: function (key) { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onRemoved: function (key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onRemoving
jQuery
var store = new DevExpress.data.ODataStore({ onRemoving: function (key) { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onRemoving: function (key) { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onRemoving: function (key) { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onRemoving: function (key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onUpdated
jQuery
var store = new DevExpress.data.ODataStore({ onUpdated: function (key, values) { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onUpdated: function (key, values) { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onUpdated: function (key, values) { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onUpdated: function (key, values) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
onUpdating
jQuery
var store = new DevExpress.data.ODataStore({ onUpdating: function (key, values) { // Your code goes here } });
Angular
import ODataStore from "devextreme/data/odata_store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ onUpdating: function (key, values) { // Your code goes here } }) } }
Vue
<script> import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onUpdating: function (key, values) { // Your code goes here } }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata_store'; const store = new ODataStore({ // ... onUpdating: function (key, values) { // Your code goes here } }); class App extends React.Component { // ... } export default App;
url
jQuery
var store = new DevExpress.data.ODataStore({ // ... url: "https://js.devexpress.com/Demos/DevAV/odata/Products" });
Angular
import ODataStore from "devextreme/data/odata/store"; // ... export class AppComponent { store: ODataStore; constructor() { this.store = new ODataStore({ // ... url: "https://js.devexpress.com/Demos/DevAV/odata/Products" }); }; }
Vue
<script> import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ // ... url: 'https://js.devexpress.com/Demos/DevAV/odata/Products' }); export default { // ... } </script>
React
// ... import ODataStore from 'devextreme/data/odata/store'; const store = new ODataStore({ // ... url: 'https://js.devexpress.com/Demos/DevAV/odata/Products' }); class App extends React.Component { // ... } export default App;
version
If the version is 2, the ODataContext uses the "MERGE" method to send requests; otherwise, it uses "PATCH". Set the method field of the beforeSend function's parameter to override this behavior.
withCredentials
Specifies whether to send cookies, authorization headers, and client certificates in a cross-origin request.
This option's value is passed to the underlying jqXHR object.
Use the beforeSend function to set custom authorization headers.