DevExtreme Angular - A Drop-Down Editor Does Not Show Data
This section describes what you can do if the following drop-down editors display an empty edit box or empty drop-down list:
Follow the steps below to troubleshoot your application. If the solutions listed here do not help, create a ticket in our Support Center and describe your issue in more detail: Create a ticket.
Key and ValueExpr Should Match
If you specify a DataSource for a drop-down editor, the store.key value and the drop-down editor's valueExpr should be the same. In the examples below, the ID
is used as both key
and valueExpr
. This rule applies to standalone editors and DataGrid/TreeList lookup column editors.
jQuery
$('#select-box').dxSelectBox({ dataSource: new DevExpress.data.DataSource({ store: { type: 'array', data: sampleData, key: 'ID', }, }), valueExpr: 'ID' });
Angular
<dx-select-box [dataSource]="dataSource" valueExpr="ID" ></dx-select-box>
import DataSource from 'devextreme/data/data_source'; import ArrayStore from 'devextreme/data/array_store'; // ... export class AppComponent { dataSource: DataSource; constructor(service: Service) { this.dataSource = new DataSource({ store: new ArrayStore({ data: sampleData, key: 'ID', }) }); } }
Vue
<template> <DxSelectBox :data-source="dataSource" value-expr="ID" /> </template> <script> import { DxSelectBox } from 'devextreme-vue/select-box'; import DataSource from 'devextreme/data/data_source'; // ... export default { components: { DxSelectBox }, data() { return { dataSource: new DataSource({ store: { type: 'array', data: sampleData, key: 'ID' } }) } }; </script>
React
import React from 'react'; import { SelectBox } from 'devextreme-react/select-box'; import DataSource from 'devextreme/data/data_source'; const dataSource = new DataSource({ store: { type: 'array', data: sampleData, key: 'ID', }, }); function App() { render ( <SelectBox dataSource={dataSource} valueExpr="ID" /> ); } export default App;
DataField and ValueExpr Should Store The Same Keys
If you use a lookup column editor in the DataGrid or TreeList, you need to specify the columns.dataField property. The value of that field should match the values in lookup.valueExpr. In the code below, the StateID
and ID
fields should store the same keys and have the same type (for example, String
).
jQuery
$('#gridContainer').dxDataGrid({ // ... columns: [ { dataField: 'StateID', lookup: { dataSource: { store: { type: 'array', data: sampleData, key: 'ID', }, }, valueExpr: 'ID' } } ] });
Angular
<dx-data-grid ... > <dxi-column dataField="StateID" > <dxo-lookup [dataSource]="dataSource" valueExpr="ID" > </dxo-lookup> </dxi-column> </dx-data-grid>
import ArrayStore from 'devextreme/data/array_store'; // ... export class AppComponent { dataSource: any; constructor(service: Service) { this.dataSource = { store: new ArrayStore({ data: sampleData, key: 'ID', }) }; } }
Vue
<template> <DxDataGrid ... > <DxColumn data-field="StateID" > <DxLookup :data-source="dataSource" value-expr="ID" /> </DxColumn> </DxDataGrid> </template> <script> import { DxDataGrid, DxColumn, DxLookup } from 'devextreme-vue/data-grid'; // ... export default { components: { DxDataGrid, DxColumn, DxLookup }, data() { return { dataSource: { store: { type: 'array', data: sampleData, key: 'ID' } } } }; </script>
React
import React from 'react'; import DataGrid, { Column, Lookup } from 'devextreme-react/data-grid'; const dataSource = { store: { type: 'array', data: sampleData, key: 'ID', }, }; function App() { render ( <React.Fragment> <DataGrid ... > <Column dataField="StateID" > <Lookup dataSource={dataSource} valueExpr="ID" /> </Column> </DataGrid> </React.Fragment> ); } export default App;
AspNet.Data.createStore() Method Specifics
If you call the DevExtreme.AspNet.Data.createStore() method to bind a standalone editor or DataGrid/TreeList lookup column, the editor expects all data operations (including value selection) to be performed on the server. Use the DevExtreme.AspNet.Data library to obtain correct data in the Controller for .NET-based applications. If you work with another back-end type, adjust your server logic to return data according to the loadOptions parameters. Refer to the following article for more information: Server-Side Data Processing.
Examine your network requests to learn which loadOptions parameters you need to specify. In the example below the parameter is filter
.
If your back-end does not support server operations, set the createStore() loadMode option to raw
to process data on a client.
If you have technical questions, please create a support ticket in the DevExpress Support Center.