All docs
V20.2
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery 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.

jQuery
JavaScript
CSS
$(function () {
    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" }
    ];
    $("#dropDownBoxContainer").dxDropDownBox({
        value: fruits[0],
        dataSource: new DevExpress.data.DataSource({
            store: new DevExpress.data.ArrayStore({ data: fruits, key: "id" }),
        }),
        dropDownOptions: {
            title: "Fruits",
            showTitle: true,
            fullScreen: true,
            showCloseButton: true
        },
        dropDownButtonTemplate: function() {
            return $("<img />").attr("src", "images/icons/custom-dropbutton-icon.svg");
        },
        fieldTemplate: function (value, fieldElement) {
            return $("<div class='custom-item' />").append(
                $("<img />").attr("src", value.image),
                $("<div class='product-name' />").dxTextBox({ value: value.text, readOnly: true })
            );
        },
        contentTemplate: function(e) {
            const list = $("<div>").dxList({
                dataSource: e.component.option("dataSource"),
                selectionMode: "single",
                onSelectionChanged: function(arg) {
                    e.component.option("value", arg.addedItems[0]);
                    e.component.close();
                } 
            });
            return list;
        }
    });
});
.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%;
}
Angular
HTML
TypeScript
CSS
<dx-drop-down-box
    [(value)]="selectedFruit"
    [(opened)]="isDropDownBoxOpened"
    fieldTemplate="fieldTemplate"
    dropDownButtonTemplate="dropDownButtonTemplate"
    [dataSource]="dataSource">
    <dxo-drop-down-options
        title="Fruits"
        [showTitle]="true"
        [fullScreen]="true"
        [showCloseButton]="true">
    </dxo-drop-down-options>
    <dx-list 
        [dataSource]="fruits"
        selectionMode="single"
        (onSelectionChanged)="changeDropDownBoxValue($event)">
    </dx-list>
    <div *dxTemplate="let data of 'dropDownButtonTemplate'">
        <img src="images/icons/custom-dropbutton-icon.svg">
    </div>
    <div *dxTemplate="let data of 'fieldTemplate'">
        <div class="custom-item">
            <img src="{{data.image}}">
            <div class="product-name">
                <dx-text-box
                    [value]="data.text"
                    [readOnly]="true">
                </dx-text-box>
            </div>
        </div>
    </div>
</dx-drop-down-box>
import { DxDropDownBoxModule, DxListModule, DxTextBoxModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    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" }
    ];
    dataSource: DataSource;
    selectedFruit = this.fruits[0];
    isDropDownBoxOpened: Boolean = false;
    constructor() {
        this.dataSource = new DataSource({
            store: new ArrayStore({ data: this.fruits, key: "id" })
        });
    }
    changeDropDownBoxValue = function (args) {
        this.selectedFruit = args.addedItems[0];
        this.isDropDownBoxOpened = false;
    }
}
@NgModule({
    imports: [
        // ...
        DxDropDownBoxModule,
        DxListModule,
        DxTextBoxModule
    ],
    // ...
})
::ng-deep .custom-item {
    position: relative;
    min-height: 30px;
}
::ng-deep .custom-item > img {
    left: 1px;
    margin-top: 3px;
    max-height: 30px;
    width: auto;
    position: absolute;
}
::ng-deep .product-name  {
    display: inline-block;
    padding-left: 45px;
    text-indent: 0;
    line-height: 30px;
    font-size: 15px;
    width: 100%;
}
Vue
App.vue
<template>
    <div>
        <DxDropDownBox
            v-model:value="selectedFruit"
            v-model:opened="isDropDownBoxOpened"
            :data-source="dataSource"
            drop-down-button-template="dropDownButtonTemplate"
            field-template="fieldTemplate">
            <div slot="dropDownButtonTemplate" slot-scope="{ data }">
                <img src="images/icons/custom-dropbutton-icon.svg">
            </div>
            <div slot="fieldTemplate" slot-scope="{ data }">
                <div class="custom-item">
                    <img :src="data.image">
                    <div class="product-name">
                        <DxTextBox
                            :value="data.text"
                            :read-only="true">
                        </DxTextBox>
                    </div>
                </div>
            </div>
            <DxDropDownOptions
                title="Fruits"
                :show-title="true"
                :full-screen="true"
                :show-close-button="true"
            />
            <DxList
                :data-source="dataSource"
                selection-mode="single"
                @selection-changed="changeDropDownBoxValue">
            </DxList>
        </DxDropDownBox>
    </div>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxDropDownBox, DxDropDownOptions } from "devextreme-vue/drop-down-box";
import DxList from "devextreme-vue/list";
import DxTextBox from "devextreme-vue/text-box";
import ArrayStore from "devextreme/data/array_store";

export default {
    components: {
        DxDropDownBox,
        DxList,
        DxTextBox,
        DxDropDownOptions
    },
    data() {
        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" }
        ];
        return {
            dataSource: new ArrayStore({
                data: fruits,
                key: "ID"
            }),
            isDropDownBoxOpened: false,
            selectedFruit: fruits[0]
        }
    },
    methods: {
        changeDropDownBoxValue(e) {
            this.selectedFruit = e.addedItems[0];
            this.isDropDownBoxOpened = false;
        }
    }
}
</script>

<style>
    .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%;
    }
</style>
React
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%;
}
ASP.NET MVC Controls
Razor C#
CSS
@(Html.DevExtreme().DropDownBox()
    .ID("dropDownBox")
    .DataSource(ds => ds.Array()
        .Key("ID")
        .Data(new JS("fruits"))
    )
    .Value(new JS("value"))
    .ContentTemplate(new TemplateName("list"))
    .DropDownButtonTemplate("<img src= 'images/icons/custom-dropbutton-icon.svg' />")
    .FieldTemplate(new TemplateName("field_template"))
    .DropDownOptions(o => o
        .Title("Fruits")
        .ShowTitle(true)
        .FullScreen(true)
        .ShowCloseButton(true)
    )
)
@using (Html.DevExtreme().NamedTemplate("list")) {
    @(Html.DevExtreme().List()
        .ID("list")
        .DataSource(new JS("component.option('dataSource')"))
        .SelectionMode(ListSelectionMode.Single)
        .OnSelectionChanged("innerList_selectionChanged")
    )
}
@using (Html.DevExtreme().NamedTemplate("field_template")) {
    <div class="custom-item">
        <img src="<% value.image %>">
        <div class="product-name">
            @(Html.DevExtreme().TextBox()
                .Value(new JS("value.text"))
                .ReadOnly(true)
            )
        </div>
    </div>
}

<script>
    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 value = fruits[0];
    function innerList_selectionChanged (e) {
        const dropDownBox = $("#dropDownBox").dxDropDownBox("instance");
        dropDownBox.option("value", e.addedItems[0]);
        dropDownBox.close();
    }
</script>
.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%;
}