Array Store

If you want to extend the functionality of a JavaScript array, place it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.

JavaScript
$(function() {
    $("#gridContainer").dxDataGrid({
        dataSource: new DevExpress.data.ArrayStore({
            data: books,
            onLoaded: function () {
                // Event handling commands go here
            }
        })
    });
});

Data kept in an ArrayStore can be processed in the DataSource. Its purpose is similar to that of the Query, but DataSource provides wider capabilities. For example, the DataSource can map objects from the array that underlies the ArrayStore, as shown in the following code.

JavaScript
var customers = [{
    ID: 1,
    companyName: "Super Mart of the West",
    address: "702 SW 8th Street",
    city: "Bentonville"
},
    // ...
];

$(function() {
    $("#gridContainer").dxDataGrid({
        dataSource: new DevExpress.data.DataSource({
            store: customers,
            map: function (item) {
                return {
                    company: item.companyName,
                    fullAddress: item.city + ", " + item.address
                }   
            }
        })
    });
});

NOTE: Even if you have passed a JavaScript array to the dataSource option, the DataGrid automatically places it into an ArrayStore wrapped into the DataSource that you can get with the getDataSource() method.

See Also