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 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 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"
                };
            }
        });
    }
}

Vue

App.vue

<script>
import ODataContext from 'devextreme/data/odata/context';

const 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'
        };
    }
});

export default {
    // ...
}
</script>

React

App.js

// ...
import ODataContext from 'devextreme/data/odata/context';

const 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'
        };
    }
});

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

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 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. Because OData does not support strings, filtering fails.

To prevent these issues, the store's deserializeDates property should be set to true or set the UI component's dateSerializationFormat property to null.

entities

Specifies entity collections to be accessed.

Type: any

The ODataContext creates an ODataStore per entity collection, so you need to use ODataStore properties 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();
    }
}

Vue

App.vue

<script>
import ODataContext from 'devextreme/data/odata/context';

const 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' 
        }
    }
});

export default {
    mounted: {
        context.Clients.load();
    },
    // ...
}
</script>

React

App.js

// ...
import ODataContext from 'devextreme/data/odata/context';

const 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' 
        }
    }
});

class App extends React.Component {
    constructor(props) {
        super(props);
        context.Clients.load();
    }
}
export default App;

errorHandler

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

Type:

Function

Function parameters:

JavaScript Error Object

Object

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

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.

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: (error) => {
                console.log(error.message);
            }
        })
    }
}

Vue

App.vue

<script>
import ODataContext from 'devextreme/data/odata/context';

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

export default {
    // ...
}
</script>

React

App.js

// ...
import ODataContext from 'devextreme/data/odata/context';

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

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

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:

Boolean

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 context = new DevExpress.data.ODataContext({
    url: "https://js.devexpress.com/Demos/DevAV/odata/",
    entities: { 
        Employees: { 
            key: "Employee_ID", 
            keyType: "Int32" 
        }, // ...
    },
    filterToLower: true
});
var ds = new DevExpress.data.DataSource({
    store: context.Employees,
    filter: ["Employee_Name", "startswith", "Jo"]
});

// The filter expression in the request looks like the following:
// https://...?filter=startswith(tolower(Employee_Name), 'jo')

Angular

app.component.ts

import ODataContext from 'devextreme/data/odata/context';
import DataSource from 'devextreme/data/data_source';
// ...
export class AppComponent {
    context: ODataContext;
    ds: DataSource;
    constructor() {
        this.context = new ODataContext({
            url: "https://js.devexpress.com/Demos/DevAV/odata/",
            entities: { 
                Employees: { 
                    key: "Employee_ID", 
                    keyType: "Int32" 
                }, // ...
            },
            filterToLower: true
        });
        this.ds = new DataSource({
            store: this.context.Employees,
            filter: ["Employee_Name", "startswith", "Jo"]
        });

        // The filter expression in the request looks like the following:
        // https://...?filter=startswith(tolower(Employee_Name), 'jo')
    }
}

Vue

App.vue

<script>
import ODataContext from 'devextreme/data/odata/context';
import DataSource from 'devextreme/data/data_source';

const context = new ODataContext({
    url: 'https://js.devexpress.com/Demos/DevAV/odata/',
    entities: { 
        Employees: { 
            key: 'Employee_ID', 
            keyType: 'Int32' 
        },
        // ...
    },
    filterToLower: true
});

const ds = new DataSource({
    store: context.Employees,
    filter: ['Employee_Name', 'startswith', 'Jo']
});

// The filter expression in the request looks like the following:
// https://...?filter=startswith(tolower(Employee_Name), 'jo')

export default {
    // ...
}
</script>

React

App.js

// ...
import ODataContext from 'devextreme/data/odata/context';
import DataSource from 'devextreme/data/data_source';

const context = new ODataContext({
    url: 'https://js.devexpress.com/Demos/DevAV/odata/',
    entities: { 
        Employees: { 
            key: 'Employee_ID', 
            keyType: 'Int32' 
        },
        // ...
    },
    filterToLower: true
});

const ds = new DataSource({
    store: context.Employees,
    filter: ['Employee_Name', 'startswith', 'Jo']
});

// The filter expression in the request looks like the following:
// https://...?filter=startswith(tolower(Employee_Name), 'jo')

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

jsonp

Specifies whether data should be sent using JSONP.

Type:

Boolean

Default Value: false

url

Specifies the URL of 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/"
        });
    }
}

Vue

App.vue

<script>
import ODataContext from 'devextreme/data/odata/context';

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

export default {
    // ...
}
</script>

React

App.js

// ...
import ODataContext from 'devextreme/data/odata/context';

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

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

version

Specifies the OData version.

Type:

Number

Default Value: 4

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 property's value is passed to the underlying jqXHR object.

Use the beforeSend function to specify custom authorization headers.

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - ODataContext Options

beforeSend

jQuery

Angular

Vue

React

deserializeDates

entities

jQuery

Angular

Vue

React

errorHandler

jQuery

Angular

Vue

React

filterToLower

jQuery

Angular

Vue

React

jsonp

url

jQuery

Angular

Vue

React

See Also

version

withCredentials