DevExtreme jQuery - ArrayStore API
The ArrayStore is a store that provides an interface for loading and editing an in-memory array and handling related events.
jQuery
var states = [
{ id: 1, state: "Alabama", capital: "Montgomery" },
{ id: 2, state: "Alaska", capital: "Juneau" },
{ id: 3, state: "Arizona", capital: "Phoenix" },
// ...
];
var store = new DevExpress.data.ArrayStore({
key: "id",
data: states,
// Other ArrayStore properties go here
});
// ===== or inside the DataSource =====
var dataSource = new DevExpress.data.DataSource({
store: {
type: "array",
key: "id",
data: states,
// Other ArrayStore properties go here
},
// Other DataSource properties go here
});Angular
import ArrayStore from "devextreme/data/array_store";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
store: ArrayStore;
dataSource: DataSource;
states = [
{ id: 1, state: "Alabama", capital: "Montgomery" },
{ id: 2, state: "Alaska", capital: "Juneau" },
{ id: 3, state: "Arizona", capital: "Phoenix" },
// ...
];
constructor () {
this.store = new ArrayStore({
key: "id",
data: this.states,
// Other ArrayStore properties go here
});
// ===== or inside the DataSource =====
this.dataSource = new DataSource({
store: new ArrayStore({
key: "id",
data: this.states,
// Other ArrayStore properties go here
}),
// Other DataSource properties go here
});
}
}Vue
<script>
import ArrayStore from 'devextreme/data/array_store';
import DataSource from 'devextreme/data/data_source';
const states = [
{ id: 1, state: 'Alabama', capital: 'Montgomery' },
{ id: 2, state: 'Alaska', capital: 'Juneau' },
{ id: 3, state: 'Arizona', capital: 'Phoenix' },
// ...
];
const store = new ArrayStore({
key: 'id',
data: states,
// Other ArrayStore properties go here
});
// ===== or inside the DataSource =====
const dataSource = new DataSource({
store: new ArrayStore({
key: 'id',
data: states,
// Other ArrayStore properties go here
}),
// Other DataSource properties go here
});
export default {
// ...
data() {
return {
store,
// ===== or =====
dataSource
}
}
}
</script>React
// ...
import ArrayStore from 'devextreme/data/array_store';
import DataSource from 'devextreme/data/data_source';
const states = [
{ id: 1, state: 'Alabama', capital: 'Montgomery' },
{ id: 2, state: 'Alaska', capital: 'Juneau' },
{ id: 3, state: 'Arizona', capital: 'Phoenix' },
// ...
];
const store = new ArrayStore({
key: 'id',
data: states,
// Other ArrayStore properties go here
});
// ===== or inside the DataSource =====
const dataSource = new DataSource({
store: new ArrayStore({
key: 'id',
data: states,
// Other ArrayStore properties go here
}),
// Other DataSource properties go here
});
class App extends React.Component {
// ...
}
export default App;ASP.NET MVC Controls
@(Html.DevExtreme().WidgetName()
.DataSource(ds => ds.Array()
.Key("id")
.Data(new[] {
new { id = 1, state = "Alabama", capital = "Montgomery" },
new { id = 2, state = "Alaska", capital = "Juneau" },
new { id = 3, state = "Arizona", capital = "Phoenix" },
// ...
})
)
)
@* ===== or a simplified version ===== *@
@(Html.DevExtreme().WidgetName()
.DataSource(new[] {
new { id = 1, state = "Alabama", capital = "Montgomery" },
new { id = 2, state = "Alaska", capital = "Juneau" },
new { id = 3, state = "Arizona", capital = "Phoenix" },
// ...
}, "id")
)@(Html.DevExtreme().WidgetName() _
.DataSource(Function(ds)
Return ds.Array() _
.Key("id") _
.Data({
New With { .id = 1, .state = "Alabama", .capital = "Montgomery" },
New With { .id = 2, .state = "Alaska", .capital = "Juneau" },
New With { .id = 3, .state = "Arizona", .capital = "Phoenix" }
})
End Function)
)
@* ===== or a simplified version ===== *@
@(Html.DevExtreme().WidgetName() _
.DataSource({
New With { .id = 1, .state = "Alabama", .capital = "Montgomery" },
New With { .id = 2, .state = "Alaska", .capital = "Juneau" },
New With { .id = 3, .state = "Arizona", .capital = "Phoenix" }
}, "id")
)See Also
Options
This section describes properties that configure the ArrayStore.
| Name | Description |
|---|---|
| data | Specifies the store's associated array. |
| errorHandler | Specifies the function that is executed when the store throws an error. |
| key | Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique. |
| onInserted | A function that is executed after a data item is added to the store. |
| onInserting | A function that is executed before a data item is added to the store. |
| onLoaded | A function that is executed after data is loaded to the store. |
| onLoading | A function that is executed before data is loaded to the store. |
| onModified | A function that is executed after a data item is added, updated, or removed from the store. |
| onModifying | A function that is executed before a data item is added, updated, or removed from the store. |
| onPush | The function executed before changes are pushed to the store. |
| onRemoved | A function that is executed after a data item is removed from the store. |
| onRemoving | A function that is executed before a data item is removed from the store. |
| onUpdated | A function that is executed after a data item is updated in the store. |
| onUpdating | A function that is executed before a data item is updated in the store. |
Methods
This section describes methods that control the ArrayStore.
| Name | Description |
|---|---|
| byKey(key) | Gets a data item with a specific key. |
| clear() | Clears all the ArrayStore's associated data. |
| createQuery() | Creates a Query for the underlying array. |
| insert(values) | Adds a data item to the store. |
| key() | Gets the key property (or properties) as specified in the key property. |
| keyOf(obj) | Gets a data item's key value. |
| load() | Starts loading data. |
| load(options) | Starts loading data. |
| off(eventName) | Detaches all event handlers from a single event. |
| off(eventName, eventHandler) | Detaches a particular event handler from a single event. |
| on(eventName, eventHandler) | Subscribes to an event. |
| on(events) | Subscribes to events. |
| push(changes) | Pushes data changes to the store and notifies the DataSource. |
| remove(key) | Removes a data item with a specific key from the store. |
| totalCount(options) | Gets the total count of items the load() function returns. |
| update(key, values) | Updates a data item with a specific key. |
Events
This section describes events that the ArrayStore raises.
| Name | Description |
|---|---|
| inserted | Raised after a data item is added to the store. |
| inserting | Raised before a data item is added to the store. |
| loaded | Raised after data is loaded to the store. |
| loading | Raised before data is loaded to the store. |
| modified | Raised after a data item is added, updated, or removed from the store. |
| modifying | Raised before a data item is added, updated, or removed from the store. |
| push | Raised before changes are pushed to the store. |
| removed | Raised after a data item is removed from the store. |
| removing | Raised before a data item is removed from the store. |
| updated | Raised after a data item is updated in the store. |
| updating | Raised before a data item is updated in the store. |