DevExtreme Vue - ODataContext Props

This section describes the ODataContext's configuration options.

beforeSend

Specifies a function that customizes the request before it is sent to the server.

Type:

Function

Function parameters:
options:

Object

The request parameters.

Object structure:
Name Type Description
url

String

The request URL.
async

Boolean

Indicates whether the request is asynchronous or synchronous.
method

String

The request method ("GET", "POST", "PATCH", or "MERGE").
timeout

Number

The request timeout.
params

Object

Additional 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".
headers

Object

The request headers.

jQuery
JavaScript
var context = new DevExpress.data.ODataContext({
    url: "https://js.devexpress.com/Demos/DevAV/odata/",
    entities: { 
        Employees: { 
            key: "Employee_ID", 
            keyType: "Int32" 
        },
        Customers: { 
            key: "Customer_ID", 
            keyType: "Int32" 
        }
    },
    beforeSend: function (e) {  
        e.params = {
            "param1": "value1",
            "param2": "value2"
        };
        e.headers = {
            "Custom Header": "value"
        };
    }
});
Angular
TypeScript
import ODataContext from "devextreme/data/odata/context";
// ...
export class AppComponent {
    context: ODataContext;
    constructor() {
        this.context = new ODataContext({
            url: "https://js.devexpress.com/Demos/DevAV/odata/",
            entities: { 
                Employees: { 
                    key: "Employee_ID", 
                    keyType: "Int32" 
                },
                Customers: { 
                    key: "Customer_ID", 
                    keyType: "Int32" 
                }
            },
            beforeSend: (e) => {  
                e.params = {
                    "param1": "value1",
                    "param2": "value2"
                };
                e.headers = {
                    "Custom Header": "value"
                };
            }
        });
    }
}

deserializeDates

Specifies whether stores in the ODataContext serialize/parse date-time values.

Type:

Boolean

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

entities

Specifies entity collections to be accessed.

Type:

Object

The ODataContext creates an ODataStore per entity collection, so you need to use ODataStore options for configuring access to entity collections. In the following code, access to the Employees and Customers entity collections is configured, but only Customers is loaded using the load() method:

jQuery
JavaScript
var context = new DevExpress.data.ODataContext({
    url: "https://js.devexpress.com/Demos/DevAV/odata/",
    entities: { 
        // Configures access to "https://js.devexpress.com/Demos/DevAV/odata/Employees"
        Employees: { 
            key: "Employee_ID", 
            keyType: "Int32" 
        },
        // Configures access to "https://js.devexpress.com/Demos/DevAV/odata/Customers"
        Clients: {              // The collection alias
            name: "Customers",  // The collection name
            key: "Customer_ID", 
            keyType: "Int32" 
        }
    }
});
context.Clients.load();
Angular
TypeScript
import ODataContext from "devextreme/data/odata/context";
// ...
export class AppComponent {
    context: ODataContext;
    constructor() {
        this.context = new ODataContext({
            url: "https://js.devexpress.com/Demos/DevAV/odata/",
            entities: { 
                // Configures access to "https://js.devexpress.com/Demos/DevAV/odata/Employees"
                Employees: { 
                    key: "Employee_ID", 
                    keyType: "Int32" 
                },
                // Configures access to "https://js.devexpress.com/Demos/DevAV/odata/Customers"
                Clients: {              // The collection alias
                    name: "Customers",  // The collection name
                    key: "Customer_ID", 
                    keyType: "Int32" 
                }
            }
        });
        this.context.Clients.load();
    }
}

errorHandler

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

Type:

Function

This function accepts a JavaScript Error object as the parameter.

jQuery
JavaScript
var context = new DevExpress.data.ODataContext({
    // ...
    errorHandler: function (error) {
        console.log(error.message);
    }
});
Angular
TypeScript
import ODataContext from "devextreme/data/odata/context";
// ...
export class AppComponent {
    context: ODataContext;
    constructor() {
        this.context = new ODataContext({
            // ...
            errorHandler: function (error) {
                console.log(error.message);
            }
        })
    }
}

jsonp

Specifies whether data should be sent using JSONP.

Type:

Boolean

Default Value: false

url

Specifies a URL to an OData service.

Type:

String

jQuery
JavaScript
var context = new DevExpress.data.ODataContext({
    // ...
    url: "https://js.devexpress.com/Demos/DevAV/odata/",
});
Angular
TypeScript
import ODataContext from "devextreme/data/odata/context";
// ...
export class AppComponent {
    context: ODataContext;
    constructor() {
        this.context = new ODataContext({
            // ...
            url: "https://js.devexpress.com/Demos/DevAV/odata/",
        });
    }
}
See Also

version

Specifies the OData version.

Type:

Number

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:

Boolean

Default Value: false

This option's value is passed to the underlying jqXHR object.

Use the beforeSend function to specify custom authorization headers.