DevExtreme Vue - ODataStore Props

Function parameters:

options:

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 the function that is executed when the store throws an error.

Type:

This function accepts a JavaScript Error object as the parameter.

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

fieldTypes

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

Type:

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 Control

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

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:

|

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:

|

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

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

onLoaded

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

Type:

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

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:

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

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

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

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

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

url

Specifies a URL to 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"
        });
    };
}

version

Specifies the OData version.

Type: