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%;
- }
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.