DevExtreme Angular - ODataStore Properties

This section describes the ODataStore'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 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".
headers

Object

The request headers.

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

deserializeDates

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

Type:

Boolean

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

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

Type:

Function

Function parameters:
e:

Object

A JavaScript Error object extended with the following fields:

Object structure:
Name Type Description
httpStatus

Number

The error code.
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.
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 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);
            }
        });
    };
}

fieldTypes

Specifies the data field types. Accepts the following types: "String", "Int32", "Int64", "Boolean", "Single", "Decimal" and "Guid".

Type:

Object

Default Value: {}

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

Boolean

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

jsonp

Specifies whether data should be sent using JSONP.

Type:

Boolean

Default Value: false

key

Specifies the key property (or properties) used to access data items.

Type:

String

|

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

keyType

Specifies the type of the key property or properties.

Type:

String

|

Object

Accepted Values: 'String' | 'Int32' | 'Int64' | 'Guid' | 'Boolean' | 'Single' | 'Decimal'

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

When specifying this option in an ASP.NET MVC Control, use the EdmType enum that has the following values: Int32, Int64, Guid, String, Boolean, Single and Decimal.

onInserted

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

Type:

Function

Function parameters:
values:

Object

The added data item.

key:

Object

|

String

|

Number

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

onInserting

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

Type:

Function

Function parameters:
values:

Object

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

onLoaded

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

Type:

Function

Function parameters:
result:

Array<any>

The loaded data.

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

onLoading

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

Type:

Function

Function parameters:
loadOptions:

LoadOptions

Data processing settings.

onModified

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

Type:

Function

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

onModifying

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

Type:

Function

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

onPush

The function executed before changes are pushed to the store.

Type:

Function

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

onRemoved

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

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

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

onRemoving

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

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

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

onUpdated

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

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The updated data item's key.

values:

Object

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

onUpdating

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

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The key of the data item to be updated.

values:

Object

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

url

Specifies the URL of an OData entity collection.

Type:

String

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

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 set custom authorization headers.