DevExtreme jQuery/JS - Customize the Appearance
You can configure the drop-down field using the dropDownOptions object that contains fields described in the Popup Configuration section. You can also specify a custom template for the drop-down button in the dropDownButtonTemplate option.
JavaScript
- $(function () {
- var fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
- $("#dropDownBoxContainer").dxDropDownBox({
- value: fruits[0],
- dataSource: fruits,
- dropDownOptions: {
- title: "Fruits",
- showTitle: true,
- fullScreen: true,
- showCloseButton: true
- },
- dropDownButtonTemplate: function() {
- return $("<img>", { src: "images/icons/custom-dropbutton-icon.svg", class: "custom-icon" });
- },
- contentTemplate: function(e) {
- var $list = $("<div>").dxList({
- dataSource: e.component.option("dataSource"),
- selectionMode: "single",
- onSelectionChanged: function(arg) {
- e.component.option("value", arg.addedItems[0]);
- e.component.close();
- }
- });
- return $list;
- }
- });
- });
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.