DevExtreme React - ODataStore Props

Function parameters:

options:

The request parameters.

Object structure:

Name	Type	Description
async	Boolean	Indicates whether the request is asynchronous or synchronous.
headers	Object	The request headers.
method	String	The request method ("GET", "POST", "PATCH", or "MERGE").
params	Object	Additional request parameters.
payload	Object	The request body; for example, when updating an item, this property holds an object with new values. Unavailable if the request method is "GET".
timeout	Number	The request timeout.
url	String	The request URL.

jQuery

JavaScript

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

TypeScript

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

App.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 {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

Specifies whether the store serializes/parses date-time values.

Type:

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.

NOTE

Disabling deserialization may cause filtering issues in UI components bound to the ODataStore. When deserialization is disabled in the store, date-time strings are converted to Date objects at the UI component level. When filtering, the UI component reverts an entered date-time value to a string based on the dateSerializationFormat property'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 property should be set to true or set the UI component's dateSerializationFormat property to null.

errorHandler

Specifies a function that is executed when the ODataStore throws an error.

Type:

Function parameters:

e:

A JavaScript Error object extended with the following fields:

Object structure:

Name	Type	Description
errorDetails	Object	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	Number	The error code.
requestOptions	Object	Request details. Contains the following fields: accepts: Object The data types that the client accepts mapped to their MIME types. async: Boolean Indicates whether the request was asynchronous or synchronous. contentType: String \| Boolean The content type; false if no content type was specified. data: Object Query options. dataType: String The expected data type. headers: Object The request headers. jsonp: Boolean Indicates whether the request was sent using JSONP. method: String The request method ("GET", "POST", "PATCH", or "MERGE"). timeout: Number The request timeout. url: String The request URL. xhrFields: Object Native XMLHttpRequest object properties that were sent in the request.

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:

accepts: Object
The data types that the client accepts mapped to their MIME types.
async: Boolean
Indicates whether the request was asynchronous or synchronous.
contentType: String | Boolean
The content type; false if no content type was specified.
data: Object
Query options.
dataType: String
The expected data type.
headers: Object
The request headers.
jsonp: Boolean
Indicates whether the request was sent using JSONP.
method: String
The request method ("GET", "POST", "PATCH", or "MERGE").
timeout: Number
The request timeout.
url: String
The request URL.
xhrFields: Object
Native XMLHttpRequest object properties that were sent in the request.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ...
    errorHandler: function(error) {
        console.log(error.message);
    }
});

Angular

TypeScript

import ODataStore from "devextreme/data/odata/store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            errorHandler: (error) => {
                console.log(error.message);
            }
        });
    };
}

Vue

App.vue

<script>
import ODataStore from 'devextreme/data/odata/store';

const store = new ODataStore({
    // ...
    errorHandler: (error) => {
        console.log(error.message);
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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".

Type: any

Default Value: {}

Set this property 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 property instead of the keyType to specify the key property's type.

jQuery

JavaScript

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

TypeScript

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

App.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 {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

Razor C#

@(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".

Type:

Defaults to the global oDataFilterToLower setting.

When this property is true, the filter expression sent to the server contains a tolower() function call and a lowercase filter value.

jQuery

JavaScript

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

app.component.ts

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

App.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 {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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;

jsonp

Specifies whether data should be sent using JSONP.

Type:

Default Value: false

key

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

Type:

|

Array<String>

In the following example, the ProductID and ProductCode properties are specified as key properties:

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ...
    key: ["ProductID", "ProductCode"]
});

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ...
            key: ["ProductID", "ProductCode"]
        })
    }
}

Vue

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    key: ['ProductID', 'ProductCode']
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    key: ['ProductID', 'ProductCode']
});

class App extends React.Component {
    // ...
}
export default App;

keyType

Specifies the type of the key property or properties.

Type:

|

Set this property if you do not need to filter data. Otherwise, use the fieldTypes property. In the following code, the Product_ID and Product_Code key properties are Guid and Int32, respectively:

jQuery

JavaScript

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

TypeScript

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

App.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 {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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;

onInserted

A function that is executed after a data item is added to the store.

Type:

Function parameters:

values:

The added data item.

key:

|

|

The item's key.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onInserted: function (values, key) {
        // Your code goes here
    }
});

Angular

TypeScript

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

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onInserted: function (values, key) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

A function that is executed before a data item is added to the store.

Type:

Function parameters:

values:

The data item to be added.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onInserting: function (values) {
        // Your code goes here
    }
});

Angular

TypeScript

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

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onInserting: function (values, key) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

A function that is executed after data is loaded to the store.

Type:

Function parameters:

result:

Array<any>

The loaded data.

loadOptions:

LoadOptions

Data processing settings.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onLoaded: function (result) {
        // Your code goes here
    }
});

Angular

TypeScript

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

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onLoaded: function (result) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

A function that is executed before data is loaded to the store.

Type:

Function parameters:

loadOptions:

LoadOptions

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onLoading: function (loadOptions) {
        // Your code goes here
    }
});

Angular

TypeScript

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

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onLoading: function (loadOptions) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

A function that is executed after a data item is added, updated, or removed from the store.

Type:

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onModified: function () {
        // Your code goes here
    }
});

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            onModified: function () {
                // Your code goes here
            }
        })
    }
}

Vue

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onModified: function () {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

A function that is executed before a data item is added, updated, or removed from the store.

Type:

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onModifying: function () {
        // Your code goes here
    }
});

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            onModifying: function () {
                // Your code goes here
            }
        })
    }
}

Vue

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onModifying: function () {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

The function executed before changes are pushed to the store.

Type:

Function parameters:

changes:

Array<any>

Changes passed in the push(changes) method.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onPush: function(changes) {
        // Your code goes here
    }
});

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            onPush: (changes) => {
                // Your code goes here
            }
        })
    }
}

Vue

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onPush: (changes) => {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

A function that is executed after a data item is removed from the store.

Type:

Function parameters:

key:

|

|

The removed data item's key.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onRemoved: function (key) {
        // Your code goes here
    }
});

Angular

TypeScript

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

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onRemoved: function (key) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

A function that is executed before a data item is removed from the store.

Type:

Function parameters:

key:

|

|

The key of the data item to be removed.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onRemoving: function (key) {
        // Your code goes here
    }
});

Angular

TypeScript

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

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onRemoving: function (key) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

A function that is executed after a data item is updated in the store.

Type:

Function parameters:

key:

|

|

The updated data item's key.

values:

Updated values.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onUpdated: function (key, values) {
        // Your code goes here
    }
});

Angular

TypeScript

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

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onUpdated: function (key, values) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

A function that is executed before a data item is updated in the store.

Type:

Function parameters:

key:

|

|

The key of the data item to be updated.

values:

New values for the data item fields.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    onUpdating: function (key, values) {
        // Your code goes here
    }
});

Angular

TypeScript

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

App.vue

<script>
import ODataStore from 'devextreme/data/odata_store';

const store = new ODataStore({
    // ...
    onUpdating: function (key, values) {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

Specifies the URL of an OData entity collection.

Type:

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ...
    url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
});

Angular

TypeScript

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

App.vue

<script>
import ODataStore from 'devextreme/data/odata/store';

const store = new ODataStore({
    // ...
    url: 'https://js.devexpress.com/Demos/DevAV/odata/Products'
});

export default {
    // ...
    data() {
        return {
            store
        }
    }
}
</script>

React

App.js

// ...
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

Specifies the OData version.

Type:

Default Value: 2

Accepted Values: 2 | 3 | 4

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.

Type: