Default ComboBox

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

<dx:BootstrapComboBox runat="server" SelectedIndex="0">
    <Items>
        <dx:BootstrapListEditItem Text="Item1" Value="Item1" />
        <dx:BootstrapListEditItem Text="Item2" Value="Item2" />
        <dx:BootstrapListEditItem Text="Item3" Value="Item3" />
        <dx:BootstrapListEditItem Text="Item4" Value="Item4" />
        <dx:BootstrapListEditItem Text="Item5" Value="Item5" />
    </Items>
</dx:BootstrapComboBox>

The DropDownStyle property specifies the manner in which and end-user can change an editor value. In this demo, the DropDownStyle property is set to DropDown, 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. Note that this scenario is only supported in the Default data security mode.

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

<dx:BootstrapComboBox runat="server" SelectedIndex="0" DropDownStyle="DropDown" DataSecurityMode="Default">
    ...
</dx:BootstrapComboBox>

Data Binding

The Combo Box control’s content can be dynamically generated by binding the editor to a data source. On retrieving items from the data source, 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 properties or the Combo Box control can obtain them automatically provided that data fields in the data source are named the same as corresponding characteristics (“Text”, “Value”).

<dx:BootstrapComboBox runat="server" DataSourceID="CountriesDataSource3"
    TextField="CountryName" ValueField="CountryName" SelectedIndex="0">
</dx:BootstrapComboBox>
<ef:EntityDataSource ID="CountriesDataSource3" runat="server" ContextTypeName="DevExpress.Web.Demos.WorldCitiesContextSL"
    EntitySetName="Countries" OrderBy="it.CountryName">
</ef:EntityDataSource>

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). The following modes are available.

  • Contains - The editor is filtered for list items that contain the search string. Search string matches are highlighted.
  • StartsWith - The editor is filtered for list items that begin with the search string. The editor value is autocompleted with the first corresponding value.
  • None - Filtering is not applied to list items.

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

<dx:BootstrapComboBox runat="server" DataSourceID="CountriesDataSource4"
    TextField="CountryName" ValueField="CountryName" IncrementalFilteringMode="StartsWith">
</dx:BootstrapComboBox>
<ef:EntityDataSource ID="CountriesDataSource4" runat="server" ContextTypeName="DevExpress.Web.Demos.WorldCitiesContextSL"
    EntitySetName="Countries" OrderBy="it.CountryName">
</ef:EntityDataSource>

Load Items on Callbacks

In this example, the Combo Box operates in callback mode. In this mode, list items that are not currently displayed within the editor's drop-down window are dynamically loaded when you scroll the list. The callback mode makes the first page load much faster, since only a few items need to be loaded initially.

  • EnableCallbackMode - specifies whether or not the Combo Box operates in callback mode
  • CallBackPageSize - defines the number of items to be obtained from the server each time it's required
<dx:BootstrapComboBox runat="server" DataSourceID="CountriesDataSource5"
    TextField="CountryName" ValueField="CountryName" SelectedIndex="0" CallbackPageSize="25" EnableCallbackMode="true">
</dx:BootstrapComboBox>
<ef:EntityDataSource ID="CountriesDataSource5" runat="server" ContextTypeName="DevExpress.Web.Demos.WorldCitiesContextSL"
    EntitySetName="Countries" OrderBy="it.CountryName">
</ef:EntityDataSource>

Null Text

This example illustrates how the NullText property 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.

<dx:BootstrapComboBox runat="server" DataSourceID="CountriesDataSource6" NullText="Select Your Country"
    TextField="CountryName" ValueField="CountryName">
    <ClearButton DisplayMode="Always" />
</dx:BootstrapComboBox>
<ef:EntityDataSource ID="CountriesDataSource6" runat="server" ContextTypeName="DevExpress.Web.Demos.WorldCitiesContextSL"
    EntitySetName="Countries" OrderBy="it.CountryName">
</ef:EntityDataSource>

Display Format

The DisplayFormatString property 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 topic: Formatting Types.

<dx:BootstrapComboBox runat="server" SelectedIndex="0" DisplayFormatString="DXperience Enterprise v{0}">
    <Items>
        <dx:BootstrapListEditItem Text="2017.1" Value="2017.1" />
        <dx:BootstrapListEditItem Text="2016.2" Value="2016.2" />
        <dx:BootstrapListEditItem Text="2016.1" Value="2016.1" />
    </Items>
</dx:BootstrapComboBox>

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.

<dx:BootstrapComboBox runat="server" Caption="Country" HelpText="Select your country"
    DataSourceID="CountriesDataSource8" TextField="CountryName" ValueField="CountryName">
    <ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
</dx:BootstrapComboBox>
<ef:EntityDataSource ID="CountriesDataSource8" runat="server" ContextTypeName="DevExpress.Web.Demos.WorldCitiesContextSL"
    EntitySetName="Countries" OrderBy="it.CountryName">
</ef:EntityDataSource>

Templates

The Combo Box control allows you to customize layouts of its visual elements using the template technology. In this demo, the Button Template is used to customize the Combo Box control's drop-down button. For the custom button to expand the dropdown list on click, the corresponding action is declaratively assigned to the button using the data-toggle attribute.

Show More
<dx:BootstrapComboBox runat="server" DataSourceID="DataSource1" ValueField="EmployeeID" TextFormatString="{0} {1}">
    <Fields>
        <dx:BootstrapListBoxField FieldName="FirstName" />
        <dx:BootstrapListBoxField FieldName="LastName" />
    </Fields>
    <ButtonTemplate>
        <span class="dxbs-edit-btn btn btn-default dropdown-toggle" data-toggle="dropdown-show">Show More</span>
    </ButtonTemplate>
    <ItemTemplate>
        <div class="media">
            <div class="media-left media-middle">
                <dx:BootstrapBinaryImage runat="server" AlternateText="" Value='<%# Eval("Photo") %>' Width="64">
                    <CssClasses Control="media-object" />
                </dx:BootstrapBinaryImage>
            </div>
            <div class="media-body media-middle">
                <h4 class="media-heading"><%# Eval("FirstName") %> <%# Eval("LastName") %></h4>
                <%# Eval("Title") %>
            </div>
        </div>
    </ItemTemplate>
</dx:BootstrapComboBox>
Screen Size
Color Themes
Demo QR Code