Customize Drop-Down Button
Use the dropDownButtonTemplate to customize the drop-down button. This demo illustrates three customization cases:
-
Custom image
Declare animgelement 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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function() {
$("#custom-icon").dxSelectBox({
items: simpleProducts,
dropDownButtonTemplate: function() {
return $("<img>", {
src: "../../../../images/icons/custom-dropbutton-icon.svg",
class: "custom-icon"
});
}
});
var $loadIndicator = $("<div>").dxLoadIndicator({ visible: false }),
$dropDownButtonImage = $("<img>", {
src: "../../../../images/icons/custom-dropbutton-icon.svg",
class: "custom-icon"
});
$("#load-indicator").dxSelectBox({
dropDownButtonTemplate: function(data, element) {
$(element).append($loadIndicator, $dropDownButtonImage);
},
dataSource: {
loadMode: 'raw',
load: function() {
var loadIndicator = $loadIndicator.dxLoadIndicator("instance"),
d = $.Deferred();
$dropDownButtonImage.hide();
loadIndicator.option("visible", true);
setTimeout(function() {
d.resolve(simpleProducts);
$dropDownButtonImage.show();
loadIndicator.option("visible", false);
}, 3000);
return d.promise();
}
}
});
var dropDownButtonTemplate = function(selectedItem){
if(selectedItem){
return function(){
return $("<img>", {
src: "../../../../images/icons/" + selectedItem.IconSrc,
class: "custom-icon"
});
};
} else {
return "dropDownButton";
}
};
$("#dynamic-template").dxSelectBox({
items: products,
displayExpr: "Name",
showClearButton: true,
valueExpr: "ID",
value: 1,
itemTemplate: function(data) {
return "<div class='custom-item'><img src='../../../../images/icons/" +
data.IconSrc + "' /><div class='product-name'>" +
data.Name + "</div></div>";
},
onSelectionChanged: function(e) {
e.component.option("dropDownButtonTemplate", dropDownButtonTemplate(e.selectedItem));
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/21.1.4/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Image as the icon</div>
<div class="dx-field-value">
<div id="custom-icon"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Load indicator as the icon</div>
<div class="dx-field-value">
<div id="load-indicator"></div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Value-dependent icon</div>
<div class="dx-field-value">
<div id="dynamic-template"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.dx-dropdowneditor-button .dx-button-content {
text-align: center;
}
.dx-theme-material .dx-dropdowneditor-button .dx-button-content .dx-loadindicator {
width: 24px;
height: 24px;
}
.custom-icon {
max-height: 100%;
max-width: 100%;
font-size: 28px;
display: inline-block;
vertical-align: middle;
}
.dx-theme-android5 .custom-item img {
padding: 4px 22px 0 0;
}
.custom-item img {
float: right;
}
.custom-item .product-name {
line-height: 32px;
padding-left: 5px;
}
var simpleProducts = [
"HD Video Player",
"SuperHD Video Player",
"SuperPlasma 50",
"SuperLED 50",
"SuperLED 42"
];
var 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"
}];