DevExtreme React - ArrayStore Props

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:

|

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

values:

The added data item.

key:

|

|

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

values:

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

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:

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

key:

|

|

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

key:

|

|

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

key:

|

|

The updated data item's key.

values:

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

key:

|

|

The key of the data item to be updated.

values: