JavaScript/jQuery 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.
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.