Angular DropDownBox - Customize the Appearance

You can customize the text field and the drop-down button using the fieldTemplate and dropDownButtonTemplate. To adjust the drop-down field, use the dropDownOptions object that contains properties described in the Popup Configuration section.

App.js
styles.css
  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DropDownBox, DropDownOptions } from 'devextreme-react/drop-down-box';
  • import List from "devextreme-react/list";
  • import TextBox from "devextreme-react/text-box";
  • import ArrayStore from "devextreme/data/array_store";
  •  
  • const fruits = [
  • { ID: 1, text: "Apples", image: "images/Apples.svg" },
  • { ID: 2, text: "Oranges", image: "images/Oranges.svg" },
  • { ID: 3, text: "Lemons", image: "images/Lemons.svg" },
  • { ID: 4, text: "Pears", image: "images/Pears.svg" },
  • { ID: 5, text: "Pineapples", image: "images/Pineapples.svg" }
  • ];
  •  
  • const renderDropDownButton = () => {
  • return (
  • <img src="images/icons/custom-dropbutton-icon.svg" />
  • );
  • }
  •  
  • const renderField = (data) => {
  • return (
  • <div className="custom-item">
  • <img src={data.image} />
  • <div className="product-name">
  • <TextBox
  • value={data.text}
  • readOnly={true}
  • />
  • </div>
  • </div>
  • );
  • }
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.state = {
  • selectedValue: fruits[0].ID
  • };
  •  
  • this.dataSource = new ArrayStore({
  • data: fruits,
  • key: "ID"
  • });
  • this.dropDownBoxRef = React.createRef();
  •  
  • this.changeDropDownBoxValue = this.changeDropDownBoxValue.bind(this);
  • }
  •  
  • changeDropDownBoxValue(e) {
  • this.setState({
  • selectedValue: e.addedItems[0]
  • });
  •  
  • this.dropDownBoxRef.current.instance.close();
  • }
  •  
  • render() {
  • return (
  • <div>
  • <DropDownBox
  • ref={this.dropDownBoxRef}
  • value={this.state.selectedValue}
  • dataSource={this.dataSource}
  • keyExpr="ID"
  • dropDownButtonRender={renderDropDownButton}
  • fieldRender={renderField}>
  • <DropDownOptions
  • title="Fruits"
  • showTitle={true}
  • fullScreen={true}
  • showCloseButton={true}
  • />
  • <List
  • dataSource={this.dataSource}
  • selectionMode="single"
  • onSelectionChanged={this.changeDropDownBoxValue}
  • />
  • </DropDownBox>
  • </div>
  • );
  • }
  • }
  •  
  • export default App;
  • .custom-item {
  • position: relative;
  • min-height: 30px;
  • }
  • .custom-item > img {
  • left: 1px;
  • margin-top: 3px;
  • max-height: 30px;
  • width: auto;
  • position: absolute;
  • }
  • .product-name {
  • display: inline-block;
  • padding-left: 45px;
  • text-indent: 0;
  • line-height: 30px;
  • font-size: 15px;
  • width: 100%;
  • }