All docs
V20.1
20.2
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

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 set the keyExpr option OR the valueExpr and displayExpr options, depending on your widget:

jQuery
index.js
$(function() {
    const employees = [
        { ID: 1, FirstName: "Sandra", LastName: "Johnson" },
        { ID: 2, FirstName: "James", LastName: "Scott" },
        { ID: 3, FirstName: "Nancy", LastName: "Smith" }
    ];

    $("#dataGridContainer").dxDataGrid({
        dataSource: employees,
        keyExpr: "ID"
    });

    $("#selectBoxContainer").dxSelectBox({
        dataSource: employees,
        valueExpr: "ID",
        displayExpr: (item) => item && item.FirstName + ' ' + item.LastName
    });
});
Angular
app.component.html
app.component.ts
app.service.ts
app.module.ts
<dx-data-grid
    [dataSource]="employees"
    keyExpr="ID">
</dx-data-grid>
<dx-select-box
    [dataSource]="employees"
    valueExpr="ID"
    [displayExpr]="getDisplayExpr">
</dx-select-box>
import { Component } from '@angular/core';
import { Employee, Service } from './app.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    employees: Employee[];
    constructor(service: Service) {
        this.employees = service.getEmployees();
    }
    getDisplayExpr(item) {
        return item && item.FirstName + ' ' + item.LastName;
    }
}
import { Injectable } from '@angular/core';

export class Employee {
    ID: Number,
    FirstName: String,
    LastName: String
}

const employees: Employee[] = [
    { ID: 1, FirstName: 'Sandra', LastName: 'Johnson' },
    { ID: 2, FirstName: 'James', LastName: 'Scott' },
    { ID: 3, FirstName: 'Nancy', LastName: 'Smith' }
];

@Injectable()
export class Service {
    getEmployees(): Employee[] {
        return employees;
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule, DxSelectBoxModule } from 'devextreme-angular';
import { Service } from './app.service';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule,
        DxSelectBoxModule
    ],
    providers: [
        Service
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
data.js
<template>
    <div>
        <DxDataGrid
            :data-source="employees"
            key-expr="ID"
        />
        <DxSelectBox
            :data-source="employees"
            value-expr="ID"
            :display-expr="getDisplayExpr"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';
import DxSelectBox from 'devextreme-vue/select-box';

import service from './data.js';

export default {
    components: {
        DxDataGrid,
        DxSelectBox
    },
    data() {
        const employees = service.getEmployees();
        return {
            employees
        }
    },
    methods: {
        getDisplayExpr(item) {
            return item && item.FirstName + ' ' + item.LastName;
        }
    }
}
</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;
    }
}
React
App.js
data.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';
import SelectBox from 'devextreme-react/select-box';

import service from './data.js';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.employees = service.getEmployees();
    }

    getDisplayExpr(item) {
        return item && item.FirstName + ' ' + item.LastName;
    }

    render() {
        return (
            <React.Fragment>
                <DataGrid
                    dataSource={this.employees}
                    keyExpr="ID"
                />
                <SelectBox
                    dataSource={this.employees}
                    valueExpr="ID"
                    displayExpr={this.getDisplayExpr}
                />
            </React.Fragment>
        );
    }
}
export default App;
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 or valueExpr. 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 and SelectBox widgets to this DataSource:

jQuery
index.js
$(function() {
    // ...
    const employeesStore = new DevExpress.data.ArrayStore({
        data: employees,
        key: "ID",
        onLoaded: function() {
            // ...
        }
    });

    const employeesDataSource = new DevExpress.data.DataSource({
        store: employeesStore,
        sort: "LastName"
    });

    $("#dataGridContainer").dxDataGrid({
        dataSource: employeesDataSource
    });

    $("#selectBoxContainer").dxSelectBox({
        dataSource: employeesDataSource,
        displayExpr: (item) => item && item.FirstName + ' ' + item.LastName
    });
});
Angular
app.component.html
app.component.ts
<dx-data-grid
    [dataSource]="employeesDataSource">
</dx-data-grid>
<dx-select-box
    [dataSource]="employeesDataSource"
    [displayExpr]="getDisplayExpr">
</dx-select-box>
import { Component } from '@angular/core';
import { Service } from './app.service';

import ArrayStore from 'devextreme/data/array_store';
import DataSource from 'devextreme/data/data_source';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    employeesDataSource: DataSource;
    constructor(service: Service) {
        const employeesStore = new ArrayStore({
            data: service.getEmployees(),
            key: 'ID',
            onLoaded: function() {
                // ...
            }
        });

        this.employeesDataSource = new DataSource({
            store: employeesStore,
            sort: 'LastName'
        });
    }
    getDisplayExpr(item) {
        return item && item.FirstName + ' ' + item.LastName;
    }
}
Vue
App.vue
<template>
    <div>
        <DxDataGrid
            :data-source="employeesDataSource"
        />
        <DxSelectBox
            :data-source="employeesDataSource"
            :display-expr="getDisplayExpr"
        />
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';
import DxSelectBox from 'devextreme-vue/select-box';
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
        }
    },
    methods: {
        getDisplayExpr(item) {
            return item && item.FirstName + ' ' + item.LastName;
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';
import SelectBox from 'devextreme-react/select-box';
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'
});

class App extends React.Component {
    getDisplayExpr(item) {
        return item && item.FirstName + ' ' + item.LastName;
    }

    render() {
        return (
            <React.Fragment>
                <DataGrid
                    dataSource={employeesDataSource}
                />
                <SelectBox
                    dataSource={this.employees}
                    displayExpr={this.getDisplayExpr}
                />
            </React.Fragment>
        );
    }
}
export default App;
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.