DevExtreme Vue - ODataStore Methods

|

|

A data item's key value.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the data item is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery

JavaScript

// The key consists of a single data field
var singleKeyStore = new DevExpress.data.ODataStore({
    key: "field1",
    // ...
});

// Gets the data item with "field1" being equal to 1
singleKeyStore.byKey(1)
    .done(function (dataItem) {
        // Process the "dataItem" here
    })
    .fail(function (error) {
        // Handle the "error" here
    });

// The key consists of several data fields
var compositeKeyStore = new DevExpress.data.ODataStore({
    key: [ "field1", "field2" ],
    // ...
});

// Gets the data item with both "field1" and "field2" being equal to 1
compositeKeyStore.byKey({
    field1: 1,
    field2: 1
}).done(function (dataItem) {
    // Process the "dataItem" here
})
.fail(function (error) {
    // Handle the "error" here
});

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    singleKeyStore: ODataStore;
    compositeKeyStore: ODataStore;

    constructor() {
        // The key consists of a single data field
        this.singleKeyStore = new ODataStore({
            key: "field1",
            // ...
        });
        // Gets the data item with "field1" being equal to 1
        this.singleKeyStore.byKey(1).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // The key consists of several data fields
        this.compositeKeyStore = new ODataStore({
            key: [ "field1", "field2" ],
            // ...
        });
        // Gets the data item with both "field1" and "field2" being equal to 1
        this.compositeKeyStore.byKey({
            field1: 1,
            field2: 1
        }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    };
}

Vue

App.vue

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

// The key consists of a single data field
const singleKeyStore = new ODataStore({
    key: "field1",
    // ...
});

// The key consists of several data fields
const compositeKeyStore = new ODataStore({
    key: [ "field1", "field2" ],
    // ...
});

export default {
    data() {
        return {
            singleKeyStore,
            compositeKeyStore
        }
    },
    mounted() {
        // Gets the data item with "field1" being equal to 1
        singleKeyStore.byKey(1).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Gets the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.byKey({
            field1: 1,
            field2: 1
        }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    },
    // ...
}
</script>

React

App.js

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

// The key consists of a single data field
const singleKeyStore = new ODataStore({
    key: "field1",
    // ...
});

// The key consists of several data fields
const compositeKeyStore = new ODataStore({
    key: [ "field1", "field2" ],
    // ...
});

class App extends React.Component {
    constructor(props) {
        super(props);

        // Gets the data item with "field1" being equal to 1
        singleKeyStore.byKey(1).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Gets the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.byKey({
            field1: 1,
            field2: 1
        }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    }
    // ...
}
export default App;

byKey(key, extraOptions)

Gets an entity with a specific key.

Parameters:

key:

|

|

An entity's key value.

extraOptions:

Additional properties.

Object structure:

Name	Type	Description
expand	String \| Array<String>	The names of the navigation properties to be loaded simultaneously with the entity (see OData - Associations).
select	String \| Array<String>	One or more fields to select from the entity.

Name

Type

Description

expand

|

Array<String>

The names of the navigation properties to be loaded simultaneously with the entity (see OData - Associations).

select

|

Array<String>

One or more fields to select from the entity.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after the entity is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

In the following code, the byKey method loads the product with ID 1 along with the "Category" navigation property:

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ...
    key: "Product_ID"
});
store.byKey(1, { expand: "Category" })
    .done(function (dataItem) {
        // Process the "dataItem" here
    })
    .fail(function (error) {
        // Handle the "error" here
    });

Angular

TypeScript

import ODataStore from "devextreme/data/odata/store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ...
            key: "Product_ID"
        });
        this.store.byKey(1, { expand: "Category" }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    };
}

Vue

App.vue

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

const store = new ODataStore({
    // ...
    key: 'Product_ID'
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        store.byKey(1, { expand: 'Category' }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    },
    // ...
}
</script>

React

App.js

// ...
import ODataStore from 'devextreme/data/odata/store';

const store = new ODataStore({
    // ...
    key: 'Product_ID'
});

class App extends React.Component {
    constructor(props) {
        super(props);
        store.byKey(1, { expand: 'Category' }).then(
            (dataItem) => { /* Process the "dataItem" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    }
}
export default App;

createQuery(loadOptions)

Creates a Query for the OData endpoint.

Parameters:

loadOptions:

An object containing the expand, requireTotalCount, and customQueryParams properties.

Return Value:

The Query object.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});
var query = store.createQuery({ expand: "propertyName" });

Angular

TypeScript

import ODataStore from "devextreme/data/odata/store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        this.query = this.store.createQuery({ expand: "propertyName" });
    };
}

Vue

App.vue

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

const store = new ODataStore({
    // ODataStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        this.query = store.createQuery({ expand: 'propertyName' });
    },
    // ...
}
</script>

React

App.js

// ...
import ODataStore from 'devextreme/data/odata/store';

const store = new ODataStore({
    // ODataStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);
        this.query = store.createQuery({ expand: 'propertyName' });
    }
}
export default App;

insert(values)

Parameters:

values:

Return Value:

Promise<any> (jQuery or native)

In the following code, dataObj is a data object added to the database and returned from the server. If the server returns nothing or the store works with local data, dataObj contains the data object passed to the insert method.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

store.insert({ id: 1, name: "John Doe" })
     .done(function (dataObj, key) {
         // Process the key and data object here
     })
     .fail(function (error) {
         // Handle the "error" here
     });

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        this.store.insert({ id: 1, name: "John Doe" })
            .then(
                (dataObj) => { /* Process the data object here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

Vue

App.vue

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

const store = new ODataStore({
    // ODataStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        store.insert({ id: 1, name: "John Doe" })
            .then(
                (dataObj) => { /* Process the data object here */ },
                (error) => { /* Handle the "error" here */ }
            );
    },
    // ...
}
</script>

React

App.js

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

const store = new ODataStore({
    // ODataStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);

        store.insert({ id: 1, name: "John Doe" })
            .then(
                (dataObj) => { /* Process the data object here */ },
                (error) => { /* Handle the "error" here */ }
            );
    }
    // ...
}
export default App;

NOTE

The data item's key value should be unique, otherwise, the insertion will fail.

key()

Gets the key property (or properties) as specified in the key property.

Return Value: any

The key property's value.

jQuery

JavaScript

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

var keyProps = store.key(); // returns "ProductID"

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ...
            key: "ProductID"
        });
        let keyProps = this.store.key(); // returns "ProductID"
    };
}

Vue

App.vue

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

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

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        this.keyProps = store.key(); // returns "ProductID"
    },
    // ...
}
</script>

React

App.js

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

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

class App extends React.Component {
    constructor(props) {
        super(props);

        this.keyProps = store.key(); // returns "ProductID"
    }
    // ...
}
export default App;

keyOf(obj)

Gets a data item's key value.

Parameters:

obj:

A data item.

Return Value: any

The data item's key value.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ...
    key: "id"
});

var key = store.keyOf({ id: 1, name: "John Doe" }); // returns 1

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ...
            key: "id"
        });
        let key = this.store.keyOf({ id: 1, name: "John Doe" }); // returns 1
    };
}

Vue

App.vue

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

const store = new ODataStore({
    // ...
    key: 'id'
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        this.key = store.keyOf({ id: 1, name: "John Doe" }); // returns 1
    },
    // ...
}
</script>

React

App.js

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

const store = new ODataStore({
    // ...
    key: 'id'
});

class App extends React.Component {
    constructor(props) {
        super(props);

        this.keyProps = store.keyOf({ id: 1, name: "John Doe" }); // returns 1
    }
    // ...
}
export default App;

load()

Starts loading data.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

load(options)

Starts loading data.

Parameters:

options:

LoadOptions

Data processing settings.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

store.load(options)
     .done(function (data) {
         // Process "data" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
import DevExpress from "devextreme/bundles/dx.all";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        let options: DevExpress.data.LoadOptions = {
            // Data processing settings are specified here
        };
        this.store.load(options)
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

Vue

App.vue

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

const store = new ODataStore({
    // ODataStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        let options = {
            // Data processing settings are specified here
        };
        store.load(options)
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    },
    // ...
}
</script>

React

App.js

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

const store = new ODataStore({
    // ODataStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);

        let options = {
            // Data processing settings are specified here
        };
        store.load(options)
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    }
    // ...
}
export default App;

off(eventName)

Detaches all event handlers from a single event.

Parameters:

eventName:

The event's name.

Return Value:

The object for which this method is called.

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

Parameters:

eventName:

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

The object for which this method is called.

on(eventName, eventHandler)

Subscribes to an event.

Parameters:

eventName:

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

The object for which this method is called.

Use this method to subscribe to one of the events listed in the Events section.

on(events)

Subscribes to events.

Parameters:

events:

Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}

Return Value:

DataGrid Real-Time Updates Demo DataGrid SignalR Demo Chart SignalR Demo DataGrid Collaborative Editing Demo

The object for which this method is called.

Use this method to subscribe to several events with one method call. Available events are listed in the Events section.

push(changes)

Pushes data changes to the store and notifies the DataSource.

Parameters:

changes:

Array<any>

Data changes to be pushed.

Each data change is an object that can have the following fields:

type: String
Data change type: "insert", "update", or "remove".
data: Object
Changes that should be applied to the store's data.
key: any
The key of the data item being updated or removed.
index: Number
The position at which to display a new data item in a UI component bound to the store. To display the new data item first, set the index to 0. To add it to the end of the current page, set the index to -1.

The index field is optional. If you do not specify it, the new data item is added to the end of the dataset. However, if data is grouped or split into pages, this item does not appear in the UI component until data is reshaped. In this case, specify the index to show the pushed item immediately.

The index field is ignored if reshapeOnPush is enabled (see the note below).

NOTE

The DataSource does not automatically sort, group, filter, or otherwise shape pushed data. For this reason, the DataSource and the UI component bound to it can be out of sync. To prevent this, enable the reshapeOnPush property. We also recommend specifying the pushAggregationTimeout to reduce the number of updates and recalculations.

The following code shows how to use the push(changes) method for each change type:

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

store.push([{ type: "insert", data: dataObj, index: index }]);
store.push([{ type: "update", data: dataObj, key: key }]);
store.push([{ type: "remove", key: key }]);

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        this.store.push([{ type: "insert", data: dataObj, index: index }]);
        this.store.push([{ type: "update", data: dataObj, key: key }]);
        this.store.push([{ type: "remove", key: key }]);
    };
}

Vue

App.vue

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

const store = new ODataStore({
    // ODataStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        store.push([{ type: "insert", data: dataObj, index: index }]);
        store.push([{ type: "update", data: dataObj, key: key }]);
        store.push([{ type: "remove", key: key }]);
    }
}
</script>

React

App.js

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

const store = new ODataStore({
    // ODataStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);

        store.push([{ type: "insert", data: dataObj, index: index }]);
        store.push([{ type: "update", data: dataObj, key: key }]);
        store.push([{ type: "remove", key: key }]);
    }
    // ...
}
export default App;

IMPORTANT

This method does not modify the remote data source. It is used to push changes from the remote data source to the local store without reloading all data.

remove(key)

Removes a data item with a specific key from the store.

Parameters:

key:

|

|

A data item's key value.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after the data item is removed. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery

JavaScript

// The key consists of a single data field
var singleKeyStore = new DevExpress.data.ODataStore({
    key: "field1",
    // ...
});

// Removes the data item with "field1" being equal to 1
singleKeyStore.remove(1)
    .done(function (key) {
        // Process the "key" here
    })
    .fail(function (error) {
        // Handle the "error" here
    });

// The key consists of several data fields
var compositeKeyStore = new DevExpress.data.ODataStore({
    key: [ "field1", "field2" ],
    // ...
});

// Removes the data item with both "field1" and "field2" being equal to 1
compositeKeyStore.remove({
    field1: 1,
    field2: 1
}).done(function (key) {
    // Process the "key" here
})
.fail(function (error) {
    // Handle the "error" here
});

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    singleKeyStore: ODataStore;
    compositeKeyStore: ODataStore;

    constructor() {
        // The key consists of a single data field
        this.singleKeyStore = new ODataStore({
            key: "field1",
            // ...
        });
        // Removes the data item with "field1" being equal to 1
        this.singleKeyStore.remove(1)
            .then(
                (key) => { /* Process the "key" here */ },
                (error) => { /* Handle the "error" here */ }
            );

        // The key consists of several data fields
        this.compositeKeyStore = new ODataStore({
            key: [ "field1", "field2" ],
            // ...
        });
        // Removes the data item with both "field1" and "field2" being equal to 1
        this.compositeKeyStore.remove({
            field1: 1,
            field2: 1
        }).then(
            (key) => { /* Process the "key" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    };
}

Vue

App.vue

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

// The key consists of a single data field
const singleKeyStore = new ODataStore({
    key: "field1",
    // ...
});

// The key consists of several data fields
const compositeKeyStore = new ODataStore({
    key: [ "field1", "field2" ],
    // ...
});

export default {
    data() {
        return {
            singleKeyStore,
            compositeKeyStore
        }
    },
    mounted() {
        // Removes the data item with "field1" being equal to 1
        singleKeyStore.remove(1).then(
            (key) => { /* Process the "key" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Removes the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.remove({
            field1: 1,
            field2: 1
        }).then(
            (key) => { /* Process the "key" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    },
    // ...
}
</script>

React

App.js

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

// The key consists of a single data field
const singleKeyStore = new ODataStore({
    key: "field1",
    // ...
});

// The key consists of several data fields
const compositeKeyStore = new ODataStore({
    key: [ "field1", "field2" ],
    // ...
});

class App extends React.Component {
    constructor(props) {
        super(props);

        // Removes the data item with "field1" being equal to 1
        singleKeyStore.remove(1).then(
            (key) => { /* Process the "key" here */ },
            (error) => { /* Handle the "error" here */ }
        );

        // Removes the data item with both "field1" and "field2" being equal to 1
        compositeKeyStore.remove({
            field1: 1,
            field2: 1
        }).then(
            (key) => { /* Process the "key" here */ },
            (error) => { /* Handle the "error" here */ }
        );
    }
    // ...
}
export default App;

totalCount(options)

Gets the total count of items the load() function returns.

Parameters:

obj:

Filtering and grouping properties.

Object structure:

Name	Type	Description
filter	Object	A filtering expression; described in the Filtering section.
group	Object	A grouping expression; described in the Grouping section.

Name

Type

Description

filter

A filtering expression; described in the Filtering section.

group

A grouping expression; described in the Grouping section.

Return Value:

Promise<Number> (jQuery or native)

A Promise that is resolved after the total item count is obtained. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery

JavaScript

var store = new DevExpress.data.ODataStore({
    // ODataStore is configured here
});

store.totalCount()
     .done(function (count) {
         // Process the "count" here
     })
     .fail(function (error) {
         // Handle the "error" here
     });

Angular

TypeScript

import ODataStore from "devextreme/data/odata_store";
// ...
export class AppComponent {
    store: ODataStore;
    constructor() {
        this.store = new ODataStore({
            // ODataStore is configured here
        });
        this.store.totalCount()
            .then(
                (count) => { /* Process the "count" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    };
}

Vue

App.vue

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

const store = new ODataStore({
    // ODataStore is configured here
});

export default {
    data() {
        return {
            store
        }
    },
    mounted() {
        store.totalCount()
            .then(
                (count) => { /* Process the "count" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    },
    // ...
}
</script>

React

App.js

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

const store = new ODataStore({
    // ODataStore is configured here
});

class App extends React.Component {
    constructor(props) {
        super(props);

        store.totalCount()
            .then(
                (count) => { /* Process the "count" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    }
    // ...
}
export default App;

update(key, values)

Updates a data item with a specific key.

Parameters:

key:

|

|

A data item's key value.

values: