DevExtreme Vue - Local Array
To bind a UI component to a local array, pass this array to the UI component's dataSource property. We recommend that you also set the keyExpr property OR the valueExpr and displayExpr properties, depending on your UI component:
jQuery
$(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
<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
<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.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
import React from 'react'; 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 property instead of the UI component'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 UI components to this DataSource:
jQuery
$(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
<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
<template> <div> <DxDataGrid :data-source="employeesDataSource" /> <DxSelectBox :data-source="employeesDataSource" :display-expr="getDisplayExpr" /> </div> </template> <script> 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
import React from 'react'; 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;
If you have technical questions, please create a support ticket in the DevExpress Support Center.