Customize Drop-Down Button
Documentation
The SelectBox widget allows an end user to specify a custom template for the drop-down button. This demo illustrates how to use an image and the LoadIndicator widget in custom templates.
window.onload = function() {
var viewModel = {
customIconOptions: {
items: simpleProducts
},
isLoaded: ko.observable(true),
loadIndicatorOptions: {
items: simpleProducts,
dataSource: {
load: function() {
var d = $.Deferred();
viewModel.isLoaded(false);
setTimeout(function() {
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.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery-3.1.0.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/18.1.3/css/dx.spa.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.light.css" />
<link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.android5.light.css" />
<link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.ios7.default.css" />
<link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.win10.black.css" />
<link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/18.1.3/css/dx.win10.white.css" />
<script src="https://cdn3.devexpress.com/jslib/18.1.3/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;
}
.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"
}];