ComboBox

• Aug 08, 2019
• 6 minutes to read

ComboBox combines the functionality of a single-line text editor, button editor and dropdown list editor. The editor’s dropdown displays a list of items that can be selected by end-users. Selecting an item changes the editor’s edit value.

To learn more about ComboBox and see it in action, refer to our online demos.

Implementation Details

ComboBox is realized by the ComboBoxExtension class. Its instance can be accessed via the ExtensionsFactory.ComboBox helper method, which is used to add a ComboBox extension to a view. This method’s parameter provides access to the ComboBox ‘s settings implemented by the ComboBoxSettings class, allowing you to fully customize the extension.

ComboBox ‘s client counterpart is represented by the MVCxClientComboBox object.

Declaration

ComboBox can be added to a view in the following manner.

View code (ASPX):

• C#

<% 
    Html.DevExpress().ComboBox(
        settings => {
            settings.Name = "comboBox1";

            settings.Width = 180;
            settings.SelectedIndex = 0;
            settings.Properties.DisplayFormatString = "DXp v. {0}";
            settings.Properties.ValueType = typeof(string);

            settings.Properties.Items.Add("2009.3");
            settings.Properties.Items.Add("2010.1");
            settings.Properties.Items.Add("2010.2");
        }
    )
    .Render();
%>

View code (Razor):

• C#

@Html.DevExpress().ComboBox(
    settings => {
        settings.Name = "comboBox1";

        settings.Width = 180;
        settings.SelectedIndex = 0;
        settings.Properties.DisplayFormatString = "DXp v. {0}";
        settings.Properties.ValueType = typeof(string);

        settings.Properties.Items.Add("2009.3");
        settings.Properties.Items.Add("2010.1");
        settings.Properties.Items.Add("2010.2");
    }).GetHtml()

Note

The Partial View should contain only the extension’s code.

The code result is demonstrated in the image below.

Main Features

• Data-Bound and Unbound Modes Support (See demo)

• Three Item Loading Modes

• Incremental Filtering (See demo)

• Custom Filtering (See demo)

• Delayed Filtering (See demo)

• Display Formatting (See demo)

• Multi-Column Mode (See demo)

• Item Images

• Customizable Button Collection

• Built-in Validation

• Full-Featured Client-Side API