React SelectBox - Customize Item Appearance

For a minor customization of SelectBox items, you can define specific fields in their data objects. For example, the following code generates three items: the first is not customized, the second is disabled and the third is hidden.

App.vue
  • <template>
  • <DxSelectBox ...
  • :data-source="products"
  • display-expr="text"
  • value-expr="text"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxSelectBox } from 'devextreme-vue/select-box';
  •  
  • export default {
  • components: {
  • DxSelectBox
  • },
  • data() {
  • const products = [
  • { text: "HD Video Player" },
  • { text: "SuperHD Video Player", disabled: true },
  • { text: "SuperPlasma 50", visible: false }
  • ];
  • return {
  • products
  • }
  • }
  • }
  • </script>

If you need a more flexible solution, specify itemTemplate.

App.vue
  • <template>
  • <DxSelectBox ...
  • :data-source="selectBoxData"
  • display-expr="name"
  • value-expr="id"
  • item-template="item"
  • >
  • <template #item="{ data }">
  • <div>
  • <img :src="data.imgSrc">
  • <div style="display:inline-block">
  • {{ data.name }}
  • </div>
  • </div>
  • </template>
  • </DxSelectBox>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxSelectBox } from 'devextreme-vue/select-box';
  •  
  • export default {
  • components: {
  • DxSelectBox
  • },
  • data() {
  • const selectBoxData = [{
  • id: 1,
  • name: "HD Video Player",
  • imgSrc: "images/products/1-small.png"
  • }, {
  • id: 2,
  • name: "UltraHD Player",
  • imgSrc: "images/products/2-small.png"
  • },
  • // ...
  • ];
  • return {
  • selectBoxData
  • }
  • }
  • }
  • </script>

You can also customize individual SelectBox items. Declare them using the dxItem component.

App.vue
  • <template>
  • <DxSelectBox>
  • <DxItem>
  • <template #default>
  • <span>User</span>
  • </template>
  • </DxItem>
  • <DxItem>
  • <template #default>
  • <span>Comment</span>
  • </template>
  • </DxItem>
  • </DxSelectBox>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxSelectBox, { DxItem } from "devextreme-vue/select-box";
  •  
  • export default {
  • components: {
  • DxSelectBox,
  • DxItem
  • }
  • };
  • </script>

Using similar techniques, you can customize the input field of the SelectBox. The template for it should be assigned to the fieldTemplate property. Note that the input field must contain the TextBox UI component.

App.vue
  • <template>
  • <DxSelectBox ...
  • :data-source="selectBoxData"
  • :value="1"
  • display-expr="name"
  • value-expr="id"
  • field-template="field"
  • >
  • <template #field='{ data }'>
  • <div>
  • <img :src="data.imgSrc">
  • <DxTextBox
  • :value="data.name"
  • style="display:inline-block"
  • />
  • </div>
  • </template>
  • </DxSelectBox>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxSelectBox } from 'devextreme-vue/select-box';
  • import { DxTextBox } from 'devextreme-vue/text-box';
  •  
  • export default {
  • components: {
  • DxSelectBox,
  • DxTextBox
  • },
  • data() {
  • const selectBoxData = [{
  • id: 1,
  • name: "HD Video Player",
  • imgSrc: "images/products/1-small.png"
  • }, {
  • id: 2,
  • name: "UltraHD Player",
  • imgSrc: "images/products/2-small.png"
  • },
  • // ...
  • ];
  • return {
  • selectBoxData
  • }
  • }
  • }
  • </script>
See Also