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.
window.onload = function () {
const viewModel = {
customIconOptions: {
items: simpleProducts,
},
isLoaded: ko.observable(true),
loadIndicatorOptions: {
items: simpleProducts,
dataSource: {
loadMode: 'raw',
load() {
const d = $.Deferred();
viewModel.isLoaded(false);
setTimeout(() => {
d.resolve(simpleProducts);
viewModel.isLoaded(true);
}, 3000);
return d.promise();
},
},
},
dynamicDropDownButtonOptions: {
items: products,
showClearButton: true,
value: 1,
displayExpr: 'Name',
valueExpr: 'ID',
selectedItem: ko.observable(null),
},
};
ko.applyBindings(viewModel, document.getElementById('select-box-demo'));
};
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.7/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/21.2.7/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 id="select-box-demo">
<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" data-bind="dxSelectBox: customIconOptions">
<div data-options="dxTemplate: { name: 'dropDownButton' }">
<img src="images/icons/custom-dropbutton-icon.svg" class="custom-icon"/>
</div>
</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" data-bind="dxSelectBox: loadIndicatorOptions">
<div data-options="dxTemplate: { name: 'dropDownButton' }">
<div data-bind="dxLoadIndicator: { visible: !$parent.isLoaded() }"></div>
<img src="images/icons/custom-dropbutton-icon.svg"
data-bind="visible: $parent.isLoaded()" class="custom-icon"/>
</div>
</div>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Value-dependent icon</div>
<div class="dx-field-value">
<div id="custom-css" data-bind="dxSelectBox: dynamicDropDownButtonOptions">
<div data-options="dxTemplate: { name: 'item' }" class='custom-item'>
<img data-bind="attr: {src: '../../../../images/icons/' + IconSrc}"/>
<div class='product-name' data-bind="text: Name"></div>
</div>
<div data-options="dxTemplate: { name: 'dropDownButton' }">
<!-- ko if: $parent.dynamicDropDownButtonOptions.selectedItem() -->
<img data-bind="{attr: {src: '../../../../images/icons/' + $parent.dynamicDropDownButtonOptions.selectedItem().IconSrc}}"
class="custom-icon"/>
<!-- /ko -->
<!-- ko ifnot: $parent.dynamicDropDownButtonOptions.selectedItem() -->
<div class="dx-dropdowneditor-icon"></div>
<!-- /ko -->
</div>
</div>
</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;
}
const simpleProducts = [
'HD Video Player',
'SuperHD Video Player',
'SuperPlasma 50',
'SuperLED 50',
'SuperLED 42',
];
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',
}];