DevExtreme jQuery/JS - ArrayStore

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

JavaScript
  • $(function() {
  • $("#schedulerContainer").dxScheduler({
  • dataSource: new DevExpress.data.ArrayStore({
  • data: appointments,
  • onLoaded: function () {
  • // Event handling commands go here
  • }
  • })
  • });
  • });

Data kept in the ArrayStore can be processed in the DataSource. Its purpose is similar to that of the Query, but the 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 appointments = [{
  • desc: 'Meet with a customer',
  • employee: "Mary Watson",
  • from: new Date(2016, 4, 10, 11, 0),
  • to: new Date(2016, 4, 10, 13, 0)
  • }, // ...
  • ];
  •  
  • $(function() {
  • $("#schedulerContainer").dxScheduler({
  • dataSource: new DevExpress.data.DataSource({
  • store: appointments,
  • map: function (item) {
  • return {
  • text: item.employee + " : " + item.desc,
  • startDate: item.from,
  • endDate: item.to
  • }
  • },
  • paginate: false
  • })
  • });
  • });
See Also