Help us shape the 2021 DevExtreme Roadmap.
Take our 5 minute survey.
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.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.customIconOptions = {
items: simpleProducts
};
$scope.isLoaded = true;
$scope.loadIndicatorOptions = {
items: simpleProducts,
dataSource: {
loadMode: 'raw',
load: function() {
var d = $.Deferred();
$scope.isLoaded = false;
setTimeout(function() {
d.resolve(simpleProducts);
$scope.isLoaded = true;
}, 3000);
return d.promise();
}
}
};
$scope.selectedItem = null;
$scope.dynamicDropDownButtonOptions = {
items: products,
value: 1,
showClearButton: true,
displayExpr: "Name",
valueExpr: "ID",
bindingOptions: {
selectedItem: '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/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.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" ng-app="DemoApp" ng-controller="DemoController">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Image as the icon</div>
<div class="dx-field-value">
<div dx-select-box="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" dx-select-box="loadIndicatorOptions">
<div data-options="dxTemplate: { name: 'dropDownButton' }">
<div dx-load-indicator="{ bindingOptions: { visible: '!isLoaded' }}"></div>
<img src="images/icons/custom-dropbutton-icon.svg" ng-show="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="dynamic-template" dx-select-box="dynamicDropDownButtonOptions" dx-item-alias="item">
<div data-options="dxTemplate: { name: 'dropDownButton' }">
<img ng-if="selectedItem" ng-src="images/icons/{{selectedItem.IconSrc}}"
class="custom-icon"/>
<div ng-if="!selectedItem" class="dx-dropdowneditor-icon"></div>
</div>
<div data-options="dxTemplate: { name: 'item' }" class='custom-item'>
<img ng-src='../../../../images/icons/{{item.IconSrc}}'/>
<div class='product-name' ng-bind="item.Name"></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;
}
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"
}];