Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Free Trial Buy

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.