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.
const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
$scope.customIconOptions = {
items: simpleProducts,
};
$scope.isLoaded = true;
$scope.loadIndicatorOptions = {
items: simpleProducts,
dataSource: {
loadMode: 'raw',
load() {
const d = $.Deferred();
$scope.isLoaded = false;
setTimeout(() => {
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/21.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/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/21.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;
}
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',
}];