DevExtreme jQuery/JS - Local Array

NOTE
This article describes how to bind a DevExtreme widget to a local array in jQuery, Angular, Vue, and React. For information on data binding in ASP.NET MVC Controls, refer to docs.devexpress.com.

To bind a widget to a local array, pass this array to the widget's dataSource option. We recommend that you also use the keyExpr option (if the widget has it) to specify the key field.

App.vue
data.js
  • <template>
  • <dx-data-grid
  • :data-source="employees"
  • key-expr="ID"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxDataGrid from 'devextreme-vue/data-grid';
  •  
  • import service from './data.js';
  •  
  • export default {
  • components: {
  • DxDataGrid
  • },
  • data() {
  • const employees = service.getEmployees();
  • return {
  • employees
  • }
  • }
  • }
  • </script>
  • const employees = [
  • { ID: 1, FirstName: 'Sandra', LastName: 'Johnson' },
  • { ID: 2, FirstName: 'James', LastName: 'Scott' },
  • { ID: 3, FirstName: 'Nancy', LastName: 'Smith' }
  • ];
  •  
  • export default {
  • getEmployees() {
  • return employees;
  • }
  • }

If you plan to update the data or need to handle data-related events, wrap the array in an ArrayStore. You can use the store's key option instead of the widget's keyExpr to specify the key field. You can further wrap the ArrayStore in a DataSource if you need to filter, sort, group, and otherwise shape the data.

The following example declares an ArrayStore, wraps it in a DataSource, and binds the DataGrid widget to this DataSource:

App.vue
  • <template>
  • <dx-data-grid
  • :data-source="employeesDataSource"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxDataGrid from 'devextreme-vue/data-grid';
  • import ArrayStore from 'devextreme/data/array_store';
  • import DataSource from 'devextreme/data/data_source';
  •  
  • import service from './data.js';
  •  
  • const employeesStore = new ArrayStore({
  • data: service.getEmployees(),
  • key: 'ID',
  • onLoaded: function() {
  • // ...
  • }
  • });
  •  
  • const employeesDataSource = new DataSource({
  • store: employeesStore,
  • sort: 'LastName'
  • });
  •  
  • export default {
  • components: {
  • DxDataGrid
  • },
  • data() {
  • return {
  • employeesDataSource
  • }
  • }
  • }
  • </script>
NOTE
If you pass a JavaScript array to a widget's dataSource option, the widget automatically places it in an ArrayStore that is wrapped in a DataSource. You can then call the getDataSource() method to get this DataSource.