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;
  • }
  • });
  • });