Vue DropDownBox - Overview

The DropDownBox is a UI component that consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.

View Demo

The simplest UI component configuration requires specifying a dataSource, value and contentTemplate. The following code adds the DropDownBox to your page:

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DropDownBox } from 'devextreme-react/drop-down-box';
  • import { List } from 'devextreme-react/list';
  •  
  • const fruits = ['Apples', 'Oranges', 'Lemons', 'Pears', 'Pineapples'];
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.state = {
  • selectedFruit: fruits[0]
  • };
  •  
  • this.dataSource = fruits;
  • this.dropDownBoxRef = React.createRef();
  •  
  • this.changeDropDownBoxValue = this.changeDropDownBoxValue.bind(this);
  • }
  •  
  • changeDropDownBoxValue(e) {
  • this.setState({
  • selectedFruit: e.addedItems[0]
  • });
  • this.dropDownBoxRef.current.instance.close();
  • }
  •  
  • render() {
  • return (
  • <DropDownBox
  • ref={this.dropDownBoxRef}
  • value={this.state.selectedFruit}
  • dataSource={this.dataSource}>
  • <List
  • dataSource={this.dataSource}
  • selectionMode="single"
  • onSelectionChanged={this.changeDropDownBoxValue}
  • />
  • </DropDownBox>
  • );
  • }
  • }
  •  
  • export default App;

If your data is an array of objects, specify:

  • valueExpr
    The data field whose value is written into the value property.
  • displayExpr
    The data field whose value is displayed in the input field of the UI component.
  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DropDownBox } from 'devextreme-react/drop-down-box';
  • import { DataGrid, Selection } from "devextreme-react/data-grid";
  • import ArrayStore from "devextreme/data/array_store";
  •  
  • const customers = [
  • { ID: 1, companyName: "Premier Buy", city: "Dallas", phone: "(233)2123-11" },
  • { ID: 2, companyName: "ElectrixMax", city: "Naperville", phone: "(630)438-7800" },
  • // ...
  • ];
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.state = {
  • selectedCustomers: [customers[0].ID],
  • selectedValue: customers[0].ID
  • };
  •  
  • this.customerDataSource = new ArrayStore({
  • data: customers,
  • key: "ID"
  • });
  • this.dropDownBoxRef = React.createRef();
  •  
  • this.changeDropDownBoxValue = this.changeDropDownBoxValue.bind(this);
  • }
  •  
  • changeDropDownBoxValue(selectedItems) {
  • const keys = selectedItems.selectedRowKeys;
  • this.setState({
  • selectedCustomers: keys,
  • selectedValue: keys[0]
  • });
  •  
  • this.dropDownBoxRef.current.instance.close();
  • }
  •  
  • render() {
  • return (
  • <DropDownBox
  • ref={this.dropDownBoxRef}
  • value={this.state.selectedValue}
  • dataSource={this.customerDataSource}
  • valueExpr="ID"
  • displayExpr="companyName">
  • <DataGrid
  • dataSource={this.customerDataSource}
  • columns={['companyName', 'city', 'phone']}
  • height={265}
  • selectedRowKeys={this.state.selectedCustomers}
  • onSelectionChanged={this.changeDropDownBoxValue}>
  • <Selection mode="single"/>
  • </DataGrid>
  • </DropDownBox>
  • );
  • }
  • }
  •  
  • export default App;
See Also