DevExtreme jQuery - ArrayStore Options
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" }, // ... ] }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ data: [ { id: 1, name: 'John Doe' }, // ... ] }); export default { // ... } </script>
React
// ... 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.
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); } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... errorHandler: (error) => { console.log(error.message); } }); export default { // ... } </script>
React
// ... 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) 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"] }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... key: ['ProductID', 'ProductCode'] }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onInserted: function (values, key) { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onInserting: function (values, key) { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onLoaded: function (result) { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onLoading: function (loadOptions) { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onModified: function () { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onModifying: function () { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onPush: (changes) => { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onRemoved: function (key) { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onRemoving: function (key) { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onUpdated: function (key, values) { // Your code goes here } }); export default { // ... } </script>
React
// ... 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.
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 } }) } }
Vue
<script> import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ // ... onUpdating: function (key, values) { // Your code goes here } }); export default { // ... } </script>
React
// ... 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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.