DevExtreme Angular - ArrayStore Properties

This section describes properties that configure the ArrayStore.

data

Specifies the store's associated array.

Type:

Array<any>

jQuery
JavaScript
 var store = new DevExpress.data.ArrayStore({ data: [ { id: 1, name: "John Doe" }, // ... ] });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ data: [ { id: 1, name: "John Doe" }, // ... ] }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ data: [ { id: 1, name: 'John Doe' }, // ... ] }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ data: [ { id: 1, name: 'John Doe' }, // ... ] }); class App extends React.Component { // ... } export default App;

errorHandler

Specifies the function that is executed when the store throws an error.

Type:

Function

This function accepts a JavaScript Error object as the parameter.

jQuery
JavaScript
 var store = new DevExpress.data.ArrayStore({ // ... errorHandler: function (error) { console.log(error.message); } });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ // ... errorHandler: function (error) { console.log(error.message); } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... errorHandler: (error) => { console.log(error.message); } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... errorHandler: (error) => { console.log(error.message); } }); class App extends React.Component { // ... } export default App;

key

Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique.

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.ArrayStore({ // ... key: ["ProductID", "ProductCode"] });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ // ... key: ["ProductID", "ProductCode"] }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... key: ['ProductID', 'ProductCode'] }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... key: ['ProductID', 'ProductCode'] }); class App extends React.Component { // ... } export default App;

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.ArrayStore({ onInserted: function (values, key) { // Your code goes here } });
Angular
TypeScript
 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 } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onInserted: function (values, key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onInserted: function (values, key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.ArrayStore({ onInserting: function (values) { // Your code goes here } });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ onInserting: function (values) { // Your code goes here } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onInserting: function (values, key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onInserting: function (values, key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

onLoaded

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

Type:

Function

Function parameters:
result:

Array<any>

The loaded data.

loadOptions:

LoadOptions

Data processing settings.

jQuery
JavaScript
 var store = new DevExpress.data.ArrayStore({ onLoaded: function (result) { // Your code goes here } });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ onLoaded: function (result) { // Your code goes here } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onLoaded: function (result) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onLoaded: function (result) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

onLoading

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

Type:

Function

Function parameters:
loadOptions:

LoadOptions

Data processing settings.

jQuery
JavaScript
 var store = new DevExpress.data.ArrayStore({ onLoading: function (loadOptions) { // Your code goes here } });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ onLoading: function (loadOptions) { // Your code goes here } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onLoading: function (loadOptions) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onLoading: function (loadOptions) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.ArrayStore({ onModified: function () { // Your code goes here } });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ onModified: function () { // Your code goes here } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onModified: function () { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onModified: function () { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.ArrayStore({ onModifying: function () { // Your code goes here } });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ onModifying: function () { // Your code goes here } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onModifying: function () { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onModifying: function () { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.ArrayStore({ onPush: function(changes) { // Your code goes here } });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ onPush: (changes) => { // Your code goes here } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onPush: (changes) => { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onPush: (changes) => { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.ArrayStore({ onRemoved: function (key) { // Your code goes here } });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ onRemoved: function (key) { // Your code goes here } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onRemoved: function (key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onRemoved: function (key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.ArrayStore({ onRemoving: function (key) { // Your code goes here } });
Angular
TypeScript
 import ArrayStore from "devextreme/data/array_store"; // ... export class AppComponent { store: ArrayStore; constructor() { this.store = new ArrayStore({ onRemoving: function (key) { // Your code goes here } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onRemoving: function (key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onRemoving: function (key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.ArrayStore({ onUpdated: function (key, values) { // Your code goes here } });
Angular
TypeScript
 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 } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onUpdated: function (key, values) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onUpdated: function (key, values) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.ArrayStore({ onUpdating: function (key, values) { // Your code goes here } });
Angular
TypeScript
 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 } }) } }
Vue
App.vue
 <script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onUpdating: function (key, values) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onUpdating: function (key, values) { // Your code goes here } }); class App extends React.Component { // ... } export default App;