Vue Select Box - Customize Drop-Down Button

Use the dropDownButtonTemplate to customize the drop-down button.

This demo illustrates three customization cases:

Custom image
Declare an img element in the template.
Load indicator
Declare the load indicator and a regular icon in the template. Display the load indicator while hiding the icon, and vice versa.
Icon that depends on the selected value
Declare the default and the selected item's icon in the template. If there is a selected item, display its icon; otherwise, show the default icon.

Backend API

<template> <div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Image as the icon</div> <div class="dx-field-value"> <DxSelectBox :data-source="simpleProducts" :input-attr="{ 'aria-label': 'Product' }" drop-down-button-template="imageIcon" > <template #imageIcon="{}"> <img alt="Custom icon" :src="'../../../../images/icons/custom-dropbutton-icon.svg'" class="custom-icon" > </template> </DxSelectBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Load indicator as the icon</div> <div class="dx-field-value"> <DxSelectBox :data-source="deferredProducts" :input-attr="{ 'aria-label': 'Deferred Product' }" drop-down-button-template="loadIcon" > <template #loadIcon="{}"> <div> <DxLoadIndicator :visible="!isLoaded"/> <span :hidden="!isLoaded"> <img alt="Custom icon" :src="'../../../../images/icons/custom-dropbutton-icon.svg'" class="custom-icon" > </span> </div> </template> </DxSelectBox> </div> </div> <div class="dx-field"> <div class="dx-field-label">Value-dependent icon</div> <div class="dx-field-value"> <DxSelectBox :data-source="products" v-model:selected-item="selectedItem" :input-attr="{ 'aria-label': 'Product' }" :value="1" :show-clear-button="true" display-expr="Name" value-expr="ID" drop-down-button-template="valueIcon" item-template="customItem" > <template #valueIcon="{}"> <div> <img v-if="selectedItem" alt="Custom icon" :src="'../../../../images/icons/' + selectedItem.IconSrc" class="custom-icon" > <div v-if="!selectedItem" class="dx-dropdowneditor-icon" /> </div> </template> <template #customItem="{ data: itemData }"> <div class="custom-item"> <img :alt="itemData.Name" :src="'../../../../images/icons/' + itemData.IconSrc" > <div class="product-name"> {{ itemData.Name }} </div> </div> </template> </DxSelectBox> </div> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxSelectBox } from 'devextreme-vue/select-box'; import { DxLoadIndicator } from 'devextreme-vue/load-indicator'; import { products, simpleProducts } from './data.ts'; const isLoaded = ref(true); const selectedItem = ref(products[0]); const deferredProducts = { loadMode: 'raw', load: () => { isLoaded.value = false; const promise = new Promise((resolve) => { setTimeout(() => { resolve(simpleProducts); isLoaded.value = true; }, 3000); }); return promise; }, }; </script> <style> .dx-dropdowneditor-button .dx-button-content { text-align: center; } .dx-dropdowneditor-button .dx-button-content .dx-loadindicator { width: 1.5em; height: 1.5em; } .custom-icon { max-height: 100%; max-width: 100%; font-size: 28px; display: inline-block; vertical-align: middle; } .custom-item img { float: right; } .custom-item .product-name { line-height: 32px; padding-left: 5px; } </style>

export const simpleProducts = [ 'HD Video Player', 'SuperHD Video Player', 'SuperPlasma 50', 'SuperLED 50', 'SuperLED 42', ]; export const products = [{ ID: 1, Name: 'HD Video Player', Price: 330, Current_Inventory: 225, Backorder: 0, Manufacturing: 10, Category: 'Video Players', IconSrc: 'video-player.svg', }, { ID: 2, Name: 'SuperHD Player', Price: 400, Current_Inventory: 150, Backorder: 0, Manufacturing: 25, Category: 'Video Players', IconSrc: 'video-player.svg', }, { ID: 3, Name: 'SuperPlasma 50', Price: 2400, Current_Inventory: 0, Backorder: 0, Manufacturing: 0, Category: 'Televisions', IconSrc: 'tv.svg', }, { ID: 4, Name: 'SuperLED 50', Price: 1600, Current_Inventory: 77, Backorder: 0, Manufacturing: 55, Category: 'Televisions', IconSrc: 'tv.svg', }, { ID: 5, Name: 'SuperLED 42', Price: 1450, Current_Inventory: 445, Backorder: 0, Manufacturing: 0, Category: 'Televisions', IconSrc: 'tv.svg', }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>