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 options go here
});

// ===== or a simplified version =====
var store = new DevExpress.data.ArrayStore(states);

// ===== or inside the DataSource =====
var dataSource = new DevExpress.data.DataSource({
    store: {
        type: "array",
        key: "id",
        data: states,
        // Other ArrayStore options go here
    },
    // Other DataSource options go here
});

Angular

TypeScript

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 options go here
        });

        // ===== or a simplified version =====
        this.store = new ArrayStore(this.states);

        // ===== or inside the DataSource =====
        this.dataSource = new DataSource({
            store: new ArrayStore({
                key: "id",
                data: this.states,
                // Other ArrayStore options go here
            }),
            // Other DataSource options go here
        });
    }
}

AngularJS

JavaScript

angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        var states = [
            { id: 1, state: "Alabama", capital: "Montgomery" },
            { id: 2, state: "Alaska", capital: "Juneau" },
            { id: 3, state: "Arizona", capital: "Phoenix" },
            // ...
        ];
        $scope.store = new DevExpress.data.ArrayStore({
            key: "id",
            data: states,
            // Other ArrayStore options go here
        });

        // ===== or a simplified version =====
        $scope.store = new DevExpress.data.ArrayStore(states);

        // ===== or inside the DataSource =====
        $scope.dataSource = new DevExpress.data.DataSource({
            store: {
                type: "array",
                key: "id",
                data: states,
                // Other ArrayStore options go here
            },
            // Other DataSource options go here
        });
    });

Knockout

JavaScript

var states = [
    { id: 1, state: "Alabama", capital: "Montgomery" },
    { id: 2, state: "Alaska", capital: "Juneau" },
    { id: 3, state: "Arizona", capital: "Phoenix" },
    // ...
];

var viewModel = {
    store: new DevExpress.data.ArrayStore({
        key: "id",
        data: states,
        // Other ArrayStore options go here
    })

    // ===== or a simplified version =====
    store: new DevExpress.data.ArrayStore(states)

    // ===== or inside the DataSource =====
    dataSource: new DevExpress.data.DataSource({
        store: {
            type: "array",
            key: "id",
            data: states,
            // Other ArrayStore options go here
        },
        // Other DataSource options go here
    })
};

ko.applyBindings(viewModel);

Vue

App.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 options go here
});

// ===== or a simplified version =====
const store = new ArrayStore(states);

// ===== or inside the DataSource =====
const dataSource = new DataSource({
    store: new ArrayStore({
        key: 'id',
        data: states,
        // Other ArrayStore options go here
    }),
    // Other DataSource options go here
});

export default {
    // ...
}
</script>

React

App.js

// ...
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 options go here
});

// ===== or a simplified version =====
const store = new ArrayStore(states);

// ===== or inside the DataSource =====
const dataSource = new DataSource({
    store: new ArrayStore({
        key: 'id',
        data: states,
        // Other ArrayStore options go here
    }),
    // Other DataSource options go here
});

class App extends React.Component {
    // ...
}
export default App;

ASP.NET MVC Controls

Razor C#

Razor VB

@(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")
)

NOTE

The ArrayStore is immutable. You cannot change its configuration at runtime. However, you can use its methods to manipulate it.

Configuration

This section describes options 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) used to access data items.
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 option.
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.

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - ArrayStore API

jQuery

Angular

AngularJS

Knockout

Vue

React

ASP.NET MVC Controls

See Also

Configuration

Methods

Events