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).
$(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).
<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).
<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).
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:
$(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:
<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:
<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:
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>
);
}