Use the dropDownButtonTemplate to customize the drop-down button.
This demo illustrates three customization cases:
Custom image
Declare an img element 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.
@model IEnumerable<DevExtreme.MVC.Demos.Models.ElectronicsItem>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Image as the icon</div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.DataSource(d => d.Mvc().LoadAction("GetProductNames"))
.InputAttr("aria-label", "Simple Product")
.DropDownButtonTemplate(@<text>
<img alt="Custom icon" src="~/Content/images/icons/custom-dropbutton-icon.svg" class="custom-icon" />
</text>)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Load indicator as the icon</div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.DataSource(d => d.Mvc().LoadAction("GetProductNames"))
.InputAttr("aria-label", "Product")
.DataSourceOptions(dso => dso.OnLoadingChanged("selectBox_loadingChanged"))
.DropDownButtonTemplate(@<text>
@(Html.DevExtreme().LoadIndicator()
.ID("dropDownButtonLoadIndicator")
.Visible(false)
)
<img alt="Custom icon" src="~/Content/images/icons/custom-dropbutton-icon.svg" class="custom-icon" id="dropDownButtonImage" />
</text>)
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Value-dependent icon</div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.DataSource(Model)
.ShowClearButton(true)
.InputAttr("aria-label", "Templated Product")
.DisplayExpr("Name")
.ValueExpr("ID")
.Value(1)
.ItemTemplate(@<text>
<div class="custom-item">
<img alt="<%- Name %>" src="<%- IconSrc %>" />
<div class="product-name"><%- Name %></div>
</div>
</text>)
.OnSelectionChanged("selectBox_selectionChanged")
)
</div>
</div>
</div>
<script>
function selectBox_loadingChanged(isLoading) {
$("#dropDownButtonLoadIndicator").dxLoadIndicator("option", "visible", isLoading);
$("#dropDownButtonImage").toggle(!isLoading);
}
function getDropDownButtonTemplate(selectedItem) {
if(selectedItem) {
return function () {
return $("<img>", {
alt: "Custom icon",
src: selectedItem.IconSrc,
class: "custom-icon"
});
}
}
return "dropDownButton";
}
function selectBox_selectionChanged(e) {
e.component.option("dropDownButtonTemplate", getDropDownButtonTemplate(e.selectedItem));
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System.Linq;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class SelectBoxController : Controller {
public ActionResult CustomizeDropDownButton() {
return View(SampleData.Electronics.Take(5));
}
}
}using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<ElectronicsItem> Electronics = new[] {
new ElectronicsItem {
ID = 1,
Name = "HD Video Player",
Price = 330,
CurrentInventory = 225,
Backorder = 0,
Manufacturing = 10,
Category = "Video Players",
ImageSrc = "../../Content/images/products/1-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 2,
Name = "SuperHD Player",
Price = 400,
CurrentInventory = 150,
Backorder = 0,
Manufacturing = 25,
Category = "Video Players",
ImageSrc = "../../Content/images/products/2-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 3,
Name = "SuperPlasma 50",
Price = 2400,
CurrentInventory = 0,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/images/products/3-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 4,
Name = "SuperLED 50",
Price = 1600,
CurrentInventory = 77,
Backorder = 0,
Manufacturing = 55,
Category = "Televisions",
ImageSrc = "../../Content/images/products/4-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 5,
Name = "SuperLED 42",
Price = 1450,
CurrentInventory = 445,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/images/products/5-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 6,
Name = "SuperLED 55",
Price = 1350,
CurrentInventory = 345,
Backorder = 0,
Manufacturing = 5,
Category = "Televisions",
ImageSrc = "../../Content/images/products/6-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 7,
Name = "SuperLCD 42",
Price = 1200,
CurrentInventory = 210,
Backorder = 0,
Manufacturing = 20,
Category = "Televisions",
ImageSrc = "../../Content/images/products/7-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 8,
Name = "SuperPlasma 65",
Price = 3500,
CurrentInventory = 0,
Backorder = 0,
Manufacturing = 0,
Category = "Televisions",
ImageSrc = "../../Content/images/products/8-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 9,
Name = "SuperLCD 70",
Price = 4000,
CurrentInventory = 95,
Backorder = 0,
Manufacturing = 5,
Category = "Televisions",
ImageSrc = "../../Content/images/products/9-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 10,
Name = "DesktopLED 21",
Price = 175,
CurrentInventory = 0,
Backorder = 425,
Manufacturing = 75,
Category = "Monitors",
ImageSrc = "../../Content/images/products/10-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 11,
Name = "DesktopLED 19",
Price = 165,
CurrentInventory = 425,
Backorder = 0,
Manufacturing = 110,
Category = "Monitors",
ImageSrc = "../../Content/images/products/11-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 12,
Name = "DesktopLCD 21",
Price = 170,
CurrentInventory = 210,
Backorder = 0,
Manufacturing = 60,
Category = "Monitors",
ImageSrc = "../../Content/images/products/12-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 13,
Name = "DesktopLCD 19",
Price = 160,
CurrentInventory = 150,
Backorder = 0,
Manufacturing = 210,
Category = "Monitors",
ImageSrc = "../../Content/images/products/13-small.png",
IconSrc = "../../Content/images/icons/tv.svg"
},
new ElectronicsItem {
ID = 14,
Name = "Projector Plus",
Price = 550,
CurrentInventory = 0,
Backorder = 55,
Manufacturing = 10,
Category = "Monitors",
ImageSrc = "../../Content/images/products/14-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 15,
Name = "Projector PlusHD",
Price = 750,
CurrentInventory = 110,
Backorder = 0,
Manufacturing = 90,
Category = "Projectors",
ImageSrc = "../../Content/images/products/15-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 16,
Name = "Projector PlusHT",
Price = 1050,
CurrentInventory = 0,
Backorder = 75,
Manufacturing = 57,
Category = "Projectors",
ImageSrc = "../../Content/images/products/16-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 17,
Name = "ExcelRemote IR",
Price = 150,
CurrentInventory = 650,
Backorder = 0,
Manufacturing = 190,
Category = "Automation",
ImageSrc = "../../Content/images/products/17-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 18,
Name = "ExcelRemote BT",
Price = 180,
CurrentInventory = 310,
Backorder = 0,
Manufacturing = 0,
Category = "Automation",
ImageSrc = "../../Content/images/products/18-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
},
new ElectronicsItem {
ID = 19,
Name = "ExcelRemote IP",
Price = 200,
CurrentInventory = 0,
Backorder = 325,
Manufacturing = 225,
Category = "Automation",
ImageSrc = "../../Content/images/products/19-small.png",
IconSrc = "../../Content/images/icons/video-player.svg"
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class ElectronicsItem {
public int ID { get; set; }
public string Category { get; set; }
public string Name { get; set; }
public int CurrentInventory { get; set; }
public int Backorder { get; set; }
public int Manufacturing { get; set; }
public int Price { get; set; }
public string ImageSrc { get; set; }
public string IconSrc { get; set; }
}
}
.dx-dropdowneditor-button .dx-button-content {
text-align: center;
}
.dx-dropdowneditor-button .dx-button-content .dx-loadindicator {
width: 1.5em;
height: 1.5em;
}
.custom-icon {
max-height: 100%;
max-width: 100%;
font-size: 28px;
display: inline-block;
vertical-align: middle;
}
.custom-item img {
float: right;
}
.custom-item .product-name {
line-height: 32px;
padding-left: 5px;
}