DevExtreme Vue - ArrayStore Props
This section describes options that configure the ArrayStore.
data
Specifies the store's associated array.
Array<any>
jQuery
var store = new DevExpress.data.ArrayStore({
data: [
{ id: 1, name: "John Doe" },
// ...
]
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
data: [
{ id: 1, name: "John Doe" },
// ...
]
})
}
}errorHandler
Specifies the function that is executed when the store throws an error.
This function accepts a JavaScript Error object as the parameter.
jQuery
var store = new DevExpress.data.ArrayStore({
// ...
errorHandler: function (error) {
console.log(error.message);
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
// ...
errorHandler: function (error) {
console.log(error.message);
}
})
}
}key
Specifies the key property (or properties) used to access data items.
In the following example, the ProductID and ProductCode properties are specified as key properties:
jQuery
var store = new DevExpress.data.ArrayStore({
// ...
key: ["ProductID", "ProductCode"]
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
// ...
key: ["ProductID", "ProductCode"]
})
}
}onInserted
A function that is executed after a data item is added to the store.
jQuery
var store = new DevExpress.data.ArrayStore({
onInserted: function (values, key) {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onInserted: function (values, key) {
// Your code goes here
}
})
}
}onInserting
A function that is executed before a data item is added to the store.
jQuery
var store = new DevExpress.data.ArrayStore({
onInserting: function (values) {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onInserting: function (values) {
// Your code goes here
}
})
}
}onLoaded
A function that is executed after data is loaded to the store.
jQuery
var store = new DevExpress.data.ArrayStore({
onLoaded: function (result) {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onLoaded: function (result) {
// Your code goes here
}
})
}
}onLoading
A function that is executed before data is loaded to the store.
Data processing settings.
jQuery
var store = new DevExpress.data.ArrayStore({
onLoading: function (loadOptions) {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onLoading: function (loadOptions) {
// Your code goes here
}
})
}
}onModified
A function that is executed after a data item is added, updated, or removed from the store.
jQuery
var store = new DevExpress.data.ArrayStore({
onModified: function () {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onModified: function () {
// Your code goes here
}
})
}
}onModifying
A function that is executed before a data item is added, updated, or removed from the store.
jQuery
var store = new DevExpress.data.ArrayStore({
onModifying: function () {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onModifying: function () {
// Your code goes here
}
})
}
}onPush
The function executed before changes are pushed to the store.
Array<any>
Changes passed in the push(changes) method.
jQuery
var store = new DevExpress.data.ArrayStore({
onPush: function(changes) {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onPush: (changes) => {
// Your code goes here
}
})
}
}onRemoved
A function that is executed after a data item is removed from the store.
jQuery
var store = new DevExpress.data.ArrayStore({
onRemoved: function (key) {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onRemoved: function (key) {
// Your code goes here
}
})
}
}onRemoving
A function that is executed before a data item is removed from the store.
jQuery
var store = new DevExpress.data.ArrayStore({
onRemoving: function (key) {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onRemoving: function (key) {
// Your code goes here
}
})
}
}onUpdated
A function that is executed after a data item is updated in the store.
jQuery
var store = new DevExpress.data.ArrayStore({
onUpdated: function (key, values) {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onUpdated: function (key, values) {
// Your code goes here
}
})
}
}onUpdating
A function that is executed before a data item is updated in the store.
jQuery
var store = new DevExpress.data.ArrayStore({
onUpdating: function (key, values) {
// Your code goes here
}
});Angular
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
store: ArrayStore;
constructor() {
this.store = new ArrayStore({
onUpdating: function (key, values) {
// Your code goes here
}
})
}
}If you have technical questions, please create a support ticket in the DevExpress Support Center.