Your search did not match any results.

Select Box - Customize Drop-Down Button

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.

Backend API
@model IEnumerable<DevExtreme.NETCore.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() .InputAttr("aria-label", "Product") .DataSource(d => d.Mvc().LoadAction("GetProductNames")) .DropDownButtonTemplate(@<text> <img alt="Custom icon" src="~/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", "Custom Product") .DataSourceOptions(dso => dso.OnLoadingChanged("selectBox_loadingChanged")) .DropDownButtonTemplate(@<text> @(Html.DevExtreme().LoadIndicator() .ID("dropDownButtonLoadIndicator") .Visible(false) ) <img alt="Custom icon" src="~/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) .InputAttr("aria-label", "Templated Product") .ShowClearButton(true) .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.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using DevExtreme.NETCore.Demos.ViewModels; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class SelectBoxController : Controller { public ActionResult CustomizeDropDownButton() { return View(SampleData.Electronics.Take(5)); } [HttpGet] public object GetProductNames(DataSourceLoadOptions loadOptions) { var source = SampleData.Electronics.Take(5).Select(i => i.Name); return DataSourceLoader.Load(source, loadOptions); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.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 = "../../images/products/1-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 2, Name = "SuperHD Player", Price = 400, CurrentInventory = 150, Backorder = 0, Manufacturing = 25, Category = "Video Players", ImageSrc = "../../images/products/2-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 3, Name = "SuperPlasma 50", Price = 2400, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/products/3-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 4, Name = "SuperLED 50", Price = 1600, CurrentInventory = 77, Backorder = 0, Manufacturing = 55, Category = "Televisions", ImageSrc = "../../images/products/4-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 5, Name = "SuperLED 42", Price = 1450, CurrentInventory = 445, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/products/5-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 6, Name = "SuperLED 55", Price = 1350, CurrentInventory = 345, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/products/6-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 7, Name = "SuperLCD 42", Price = 1200, CurrentInventory = 210, Backorder = 0, Manufacturing = 20, Category = "Televisions", ImageSrc = "../../images/products/7-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 8, Name = "SuperPlasma 65", Price = 3500, CurrentInventory = 0, Backorder = 0, Manufacturing = 0, Category = "Televisions", ImageSrc = "../../images/products/8-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 9, Name = "SuperLCD 70", Price = 4000, CurrentInventory = 95, Backorder = 0, Manufacturing = 5, Category = "Televisions", ImageSrc = "../../images/products/9-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 10, Name = "DesktopLED 21", Price = 175, CurrentInventory = 0, Backorder = 425, Manufacturing = 75, Category = "Monitors", ImageSrc = "../../images/products/10-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 11, Name = "DesktopLED 19", Price = 165, CurrentInventory = 425, Backorder = 0, Manufacturing = 110, Category = "Monitors", ImageSrc = "../../images/products/11-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 12, Name = "DesktopLCD 21", Price = 170, CurrentInventory = 210, Backorder = 0, Manufacturing = 60, Category = "Monitors", ImageSrc = "../../images/products/12-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 13, Name = "DesktopLCD 19", Price = 160, CurrentInventory = 150, Backorder = 0, Manufacturing = 210, Category = "Monitors", ImageSrc = "../../images/products/13-small.png", IconSrc = "../../images/icons/tv.svg" }, new ElectronicsItem { ID = 14, Name = "Projector Plus", Price = 550, CurrentInventory = 0, Backorder = 55, Manufacturing = 10, Category = "Monitors", ImageSrc = "../../images/products/14-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 15, Name = "Projector PlusHD", Price = 750, CurrentInventory = 110, Backorder = 0, Manufacturing = 90, Category = "Projectors", ImageSrc = "../../images/products/15-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 16, Name = "Projector PlusHT", Price = 1050, CurrentInventory = 0, Backorder = 75, Manufacturing = 57, Category = "Projectors", ImageSrc = "../../images/products/16-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 17, Name = "ExcelRemote IR", Price = 150, CurrentInventory = 650, Backorder = 0, Manufacturing = 190, Category = "Automation", ImageSrc = "../../images/products/17-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 18, Name = "ExcelRemote BT", Price = 180, CurrentInventory = 310, Backorder = 0, Manufacturing = 0, Category = "Automation", ImageSrc = "../../images/products/18-small.png", IconSrc = "../../images/icons/video-player.svg" }, new ElectronicsItem { ID = 19, Name = "ExcelRemote IP", Price = 200, CurrentInventory = 0, Backorder = 325, Manufacturing = 225, Category = "Automation", ImageSrc = "../../images/products/19-small.png", IconSrc = "../../images/icons/video-player.svg" } }; } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.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; }