Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
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.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 Overview() {
return View(new SelectBoxViewModel {
Items = SampleData.Electronics.Select(i => i.Name)
});
}
[HttpGet]
public ActionResult GetProducts(DataSourceLoadOptions loadOptions) {
return Content(JsonSerializer.Serialize(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;
}
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.