Free Trial Buy

Select Box ▸ 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.

Default mode
With a custom placeholder
Read only
Disabled
Data source usage
Custom templates
Event Handling
Product
Selected product is HD Video Player 
@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)
            });
        }

    }
}
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;
}