Your search did not match any results.

Overview

The SelectBox component allows users to select an item from a drop-down list. This demo illustrates the following SelectBox properties:

  • items
    Specifies an array of items displayed in the SelectBox.
  • placeholder
    Specifies the text that is displayed when no items are selected.
  • readOnly
    Prevents users from changing the editor's value via the UI.
  • disabled
    Specifies whether the SelectBox responds to user interaction.
  • dataSource
    Binds the SelectBox to data. Unlike the items property, dataSource accepts the DataSource object that allows users to sort, filter, group, and shape data.
  • fieldTemplate and itemTemplate
    Allow you to customize the text field and drop-down list items.
  • onValueChanged event handler
    Use this function to perform an action when a user chooses a new value. In this demo, this function is used to display the selected value.

To get started with the DevExtreme SelectBox component, refer to the following tutorial for step-by-step instructions: Getting Started with SelectBox.

Backend API
@model DevExtreme.MVC.Demos.ViewModels.SelectBoxViewModel <div id="form"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Default mode</div> <div class="dx-field-value"> <div id="products-simple"></div> @(Html.DevExtreme().SelectBox() .DataSource(Model.Items) .InputAttr("aria-label", "Simple Product") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">With a custom placeholder</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .DataSource(Model.Items) .InputAttr("aria-label", "Product With Placeholder") .Placeholder("Choose Product") .ShowClearButton(true) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Read only</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .DataSource(Model.Items) .InputAttr("aria-label", "ReadOnly Product") .ReadOnly(true) .Value("HD Video Player") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .DataSource(Model.Items) .InputAttr("aria-label", "Disabled Product") .Disabled(true) .Value("HD Video Player") ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Data source usage</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .DataSource(d => d.Mvc().LoadAction("GetProducts").Key("ID")) .DisplayExpr("Name") .InputAttr("aria-label", "Product ID") .ValueExpr("ID") .Value(1) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom templates</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .ID("custom-templates") .InputAttr("aria-label", "Templated Product") .DataSource(d => d.Mvc().LoadAction("GetProducts").Key("ID")) .DisplayExpr("Name") .ValueExpr("ID") .Value(4) .FieldTemplate(@<text> <div class="custom-item"> <% if(typeof ImageSrc !== 'undefined') { %> <img alt='Product name' src="<%- ImageSrc %>" /> <% } %> @(Html.DevExtreme().TextBox() .Value(new JS("typeof Name !== 'undefined' && Name")) .ElementAttr("class", "product-name") .InputAttr("aria-label", "Name") .ReadOnly(true) ) </div> </text>) .ItemTemplate(@<text> <div class="custom-item"> <img alt='Product name' src="<%- ImageSrc %>" /> <div class="product-name"><%- Name %></div> </div> </text>) ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Event Handling</div> <div class="dx-field"> <div class="dx-field-label">Product</div> <div class="dx-field-value"> @(Html.DevExtreme().SelectBox() .DataSource(Model.Items) .InputAttr("aria-label", "Product") .OnValueChanged("selectBox_valueChanged") .Value("HD Video Player") ) </div> </div> <div class="current-value"> Selected product is <span>HD Video Player</span> </div> </div> </div> <script> function selectBox_valueChanged(data) { $(".current-value > span").text(data.value); DevExpress.ui.notify(`The value is changed to: "${data.value}"`); } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; using DevExtreme.MVC.Demos.ViewModels; using Newtonsoft.Json; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class SelectBoxController : Controller { public ActionResult Overview() { return View(new SelectBoxViewModel { Items = SampleData.Electronics.Select(i => i.Name) }); } [HttpGet] public ActionResult GetProducts(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(DataSourceLoader.Load(SampleData.Electronics, loadOptions)), "application/json"); } } }
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; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.ViewModels { public class SelectBoxViewModel { public IEnumerable<string> Items { get; set; } } }
.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content { padding-left: 7px; padding-right: 7px; } .custom-item { position: relative; min-height: 30px; } .dx-dropdowneditor-input-wrapper .custom-item > img { padding-left: 8px; } .custom-item .product-name { display: inline-block; padding-left: 50px; text-indent: 0; line-height: 30px; font-size: 15px; width: 100%; } .custom-item > img { left: 1px; position: absolute; top: 50%; margin-top: -15px; } .dx-theme-material #custom-templates .dx-texteditor-buttons-container { display: none; } .current-value { padding: 10px 0; } .current-value > span { font-weight: bold; } .dx-theme-material .dx-selectbox-container .product-name { padding-left: 58px; }