DevExtreme React - 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
app.component.html
app.component.ts
<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
App.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
App.js
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
app.component.html
app.component.ts
<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
App.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
App.js
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.

DataGrid Lookup Network Request Parameters

If your back-end does not support server operations, set the createStore() loadMode option to raw to process data on a client.

DropDownBox Demo