DevExtreme jQuery/JS - Customize the Appearance

You can customize the text field and the drop-down button using the fieldTemplate and dropDownButtonTemplate. To adjust the drop-down field, use the dropDownOptions object that contains options described in the Popup Configuration section.

JavaScript
CSS
  • $(function () {
  • const fruits = [
  • { id: 1, text: "Apples", image: "images/Apples.svg" },
  • { id: 2, text: "Oranges", image: "images/Oranges.svg" },
  • { id: 3, text: "Lemons", image: "images/Lemons.svg" },
  • { id: 4, text: "Pears", image: "images/Pears.svg" },
  • { id: 5, text: "Pineapples", image: "images/Pineapples.svg" }
  • ];
  • $("#dropDownBoxContainer").dxDropDownBox({
  • value: fruits[0],
  • dataSource: new DevExpress.data.DataSource({
  • store: new DevExpress.data.ArrayStore({ data: fruits, key: "id" }),
  • }),
  • dropDownOptions: {
  • title: "Fruits",
  • showTitle: true,
  • fullScreen: true,
  • showCloseButton: true
  • },
  • dropDownButtonTemplate: function() {
  • return $("<img />").attr("src", "images/icons/custom-dropbutton-icon.svg");
  • },
  • fieldTemplate: function (value, fieldElement) {
  • return $("<div class='custom-item' />").append(
  • $("<img />").attr("src", value.image),
  • $("<div class='product-name' />").dxTextBox({ value: value.text, readOnly: true })
  • );
  • },
  • contentTemplate: function(e) {
  • const 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;
  • }
  • });
  • });
  • .custom-item {
  • position: relative;
  • min-height: 30px;
  • }
  • .custom-item > img {
  • left: 1px;
  • margin-top: 3px;
  • max-height: 30px;
  • width: auto;
  • position: absolute;
  • }
  • .product-name {
  • display: inline-block;
  • padding-left: 45px;
  • text-indent: 0;
  • line-height: 30px;
  • font-size: 15px;
  • width: 100%;
  • }