Default ComboBox

The Combo Box control is a drop-down list editor allowing the end-user to select from a list of values. This example demonstrates the Combo Box control with default settings.

You can declare Combo Box items using the Items method. An item provides the following methods:

Combo Box control's client API:

@(Html.DevExpress()
    .BootstrapComboBox("ComboBoxDefault")
    .Value("Item2")
    .Items(items => {
        items.Add()
            .Text("Item1")
            .Value("Item1");
        items.Add()
            .Text("Item2")
            .Value("Item2");
        items.Add()
            .Text("Item3")
            .Value("Item3");
        items.Add()
            .Text("Item4")
            .Value("Item4");
        items.Add()
            .Text("Item5")
            .Value("Item5");
    })
)

The DropDownStyle method specifies the manner in which and end-user can change an editor value. In this demo, the DropDownStyle method is called with the DropDown parameter, so you can change the editor's value by either selecting an item from the drop-down list or entering new values into the edit box without invoking the drop-down list.

When the DropDownList mode is used, it is only possible to change the editor's value by selecting an item from the drop-down list.

@(Html.DevExpress()
    .BootstrapComboBox("DropDownStyleComboBox")
    .Value("Item2")
    .DropDownStyle(DropDownStyle.DropDown)
    .Items(items => {
    ...
    })
)

Data Binding

The Combo Box control’s content can be dynamically generated by binding the editor to a data model. Item characteristics such as text and value are obtained from specific data fields. These data fields either can be defined manually using the TextField and ValueField methods or the Combo Box control can obtain them automatically if provided data items contains fields named “Text” and “Value”.

@inject WorldCitiesContext WorldCities
@model Country
@(Html.DevExpress()
    .BootstrapComboBox("DataBindingComboBox")
    .TextField("CountryName")
    .ValueField("CountryId")
    .ValueType(typeof(int))
    .Value(Model.CountryId)
    .Bind(WorldCities.Countries)
)

Incremental Filtering

The Combo Box control allows you to dynamically filter list items based on the text typed into the editor’s input box on the client side (“find-as-you-type” filtering). To specify the incremental filtering mode, call the IncrementalFilteringMode method. The following modes are available:

To try this feature in action, set the focus to the Combo Box control and start typing.

@inject WorldCitiesContext WorldCities
@(Html.DevExpress()
    .BootstrapComboBox("IncrementalFilteringComboBox")
    .TextField("CountryName")
    .ValueField("CountryId")
    .IncrementalFilteringMode(IncrementalFilteringMode.StartsWith)
    .Bind(WorldCities.Countries)
)

Null Text

This example illustrates how the NullText method can be used to display prompt text (watermark) in the editor's edit box. Specified text is displayed when the value of the editor is null and the editor is not focused. The prompt text disappears when the editor receives focus. To show the null text even in the focused editor, call the NullTextDisplayMode method with the UnfocusedAndFocused parameter.

@inject WorldCitiesContext WorldCities
@(Html.DevExpress()
    .BootstrapComboBox("NullTextComboBox")
    .TextField("CountryName")
    .ValueField("CountryId")
    .NullText("Select Your Country")
    .ClearButton(button=>button.DisplayMode(ClearButtonDisplayMode.Always))
    .Bind(WorldCities.Countries)
)

Display Format

The DisplayFormatString method specifies the pattern used to format the value of an editor for display purposes, when the editor is not focused. Display values can be formatted using the standard formatting mechanism described in MSDN. For more information about composing format patterns, see the following MSDN topics: Numeric Format Strings and Date and Time Format Strings.

@(Html.DevExpress()
    .BootstrapComboBox("DisplayFormatComboBox")
    .Value("2017.1")
    .DisplayFormatString("DXperience Enterprise v{0}")
    .Items(items => {
        items.Add()
            .Text("2017.1")
            .Value("2017.1");
        items.Add()
            .Text("2016.2")
            .Value("2016.2");
        items.Add()
            .Text("2016.1")
            .Value("2016.1");
    })
)

Caption and HelpText

In this example, the Combo Box control displays a caption on the top and auxiliary help text at the bottom of the editor.

@inject WorldCitiesContext WorldCities
@(Html.DevExpress()
    .BootstrapComboBox("CaptionAndHelpTextComboBox")
    .TextField("CountryName")
    .ValueField("CountryName")
    .HelpText("Select Your Country")
    .Caption("Country")
    .Bind(WorldCities.Countries)
)
Screen Size
Color Themes
Demo QR Code