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
Configuration
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
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
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. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.