JavaScript/jQuery SelectBox - Customize Item Appearance

jQuery

To customize the appearance of items in the SelectBox drop-down menu, configure itemTemplate (customizes all items) or items[].template (customizes individual items).

index.js
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        itemTemplate: function(data) {
            return $("<div>").append(
                $("<img>").attr("src", data.imgSrc)
            );
        },
    });
});
Angular

To customize the appearance of items in the SelectBox drop-down menu, configure itemTemplate (customizes all items) or items[].template (customizes individual items).

app.component.html
<dx-select-box ...
    itemTemplate="item"
>
    <div *dxTemplate="let data of 'item'">
        <img src="{{ data.imgSrc }}" />
    </div>
</dx-select-box>
Vue

To customize the appearance of items in the SelectBox drop-down menu, configure itemTemplate (customizes all items) or items[].template (customizes individual items).

App.vue
<template> 
    <DxSelectBox ...
        item-template="item"
    >
        <template #item="{ data }">
            <img :src="data.imgSrc">
        </template>
    </DxSelectBox>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DxSelectBox } from 'devextreme-vue/select-box';

</script>
React

To customize the appearance of items in the SelectBox drop-down menu, configure itemRender/itemComponent (customize all items) or items[].render/component (customize individual items).

App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { SelectBox } from 'devextreme-react/select-box';

function itemRender(data) {
    return (
        <img src={data.imgSrc} />
    );
}

function App() {
    return (
        <SelectBox ... 
            itemRender={itemRender}
        />
    );
}
jQuery

You can also customize the SelectBox input field. Configure fieldAddons.beforeTemplate and fieldAddons.afterTemplate to display custom markup to the left/right of the component input:

index.js
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        fieldAddons: {
            beforeTemplate: function(data) {
                return $("<div>").append(
                    $("<img>").attr("src", data.imgSrc)
                );
            },
        }
    });
});
Angular

You can also customize the SelectBox input field. Configure fieldAddons.beforeTemplate and fieldAddons.afterTemplate to display custom markup to the left/right of the component input:

app.component.html
<dx-select-box ... >
    <dxo-select-box-field-addons
        beforeTemplate="before"
    ></dxo-select-box-field-addons>
    <div *dxTemplate="let data of 'before'">
        <img src="{{ data.imgSrc }}" />
    </div>
</dx-select-box>
Vue

You can also customize the SelectBox input field. Configure fieldAddons.beforeTemplate and fieldAddons.afterTemplate to display custom markup to the left/right of the component input:

App.vue
<template> 
    <DxSelectBox ... >
        <DxFieldAddons
            before-template="before"
        />
        <template #before="{ data }"">
            <img :src="data.imgSrc">
        </template>
    </DxSelectBox>
</template>

<script setup lang="ts">
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DxSelectBox, DxFieldAddons } from 'devextreme-vue/select-box';

</script>
React

You can also customize the SelectBox input field. Configure fieldAddons.beforeRender/beforeComponent and fieldAddons.afterRender/afterComponent to display custom markup to the left/right of the component input:

App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { SelectBox, FieldAddons } from 'devextreme-react/select-box';

function beforeRender(data) {
    return (
        <img src={data.imgSrc} />
    );
}

function App() {
    return (
        <SelectBox ... >
            <FieldAddons
                beforeRender={beforeRender}
            />
        </SelectBox>
    );
}
See Also