The DevExpress Blazor ComboBox allows users to select an item from a drop-down list.

Core ComboBox API members are as follows:

• Data — Specifies the data source used to populates the editor's list items.
• TextFieldName — Specifies the data source's field used to supply item text.
• Text — Specifies the editor's text.
• TextChanged — Fires when the editor text was changed.
• Value — Specifies the drop-down list's selected value.
• ValueChanged — Fires when the selected value was changed.

Our Blazor ComboBox component supports different size modes. To specify the component's size in code, use the SizeMode property. To apply different size modes, use the drop-down list in the demo card's header.

ComboBox also supports keyboard navigation (list of supported keyboard shortcuts), allowing users to navigate within the item list and select an item.

In this demo, the DevExpress ComboBox is bound to a list of complex business objects.

Our Blazor ComboBox ships with API members that allow you to search and apply filters to list content:

• SearchMode — Specifies whether the component can search for text users enter within the edit box.
• SearchFilterCondition — Specifies the search and filter condition (Contains or StartsWith).
• SearchTextParseMode — Specifies how the component treats search words. If search text contains multiple words separated by space characters, words can be treated as a single condition or individual conditions. The following modes are available: GroupWordsByAnd, GroupWordsByOr, and ExactMatch.

For additional information, refer to the following topic: Search and Filter Data.

Our Blazor ComboBox can display data across multiple columns. To create columns, use DxListEditorColumn objects as needs dictate. Objects include the following column customization options:

• Caption — Specifies the column caption.
• FieldName — Specifies the data source field used to populates column items.
• SearchEnabled — Specifies whether the component can search text in cells associated with the current column.
• Visible — Specifies the column visibility.
• VisibleChanged — Fires when the column visibility changes.
• VisibleIndex — Specifies the column display order.
• VisibleIndexChanged — Fires when the column's visible index changes.
• Width — Specifies the column width.

To format an editor value, use the EditFormat property. This property allows you to format values displayed in both standard and multi-column ComboBoxes. A {0} {1} format specifies that the editor value includes values for the following columns: FirstName (VisibleIndex = 0) and LastName (VisibleIndex = 1).

To help you deliver the best possible user experience, the DevExpress Blazor ComboBox allows you to organize dropdown list items into groups.

Use the GroupFieldName property to group data within our Blazor ComboBox dropdown (Group field values appear as group headers in the dropdown).

Note the following when using this option:

• The DevExpress Blazor ComboBox supports a single group level.
• Users cannot collapse groups.
• Group headers are not used for search operations.
• Multi-column ComboBox controls also support groups.
• You can use the GroupHeaderDisplayTemplate property to customize group headers.

Use the DisabledFieldName property to disable individual items within a ComboBox dropdown list. The property specifies a Boolean field that stores each item's enabled or disabled state. Disabled items are grayed out and cannot be selected.

Note: Disabled items can improve overall usability but cannot replace appropriate security protocols (Users may still be able to select disabled items on the client side – as such, you should implement appropriate security-related checks in code).

Use the ListRenderMode property to specify how the ComboBox renders the item list.

• Entire — The ComboBox renders the entire item list. Use this option for small item lists where scrolling should work instantly.
• Virtual — The ComboBox renders items only after they appear in the viewport. Use this option to improve performance when the list contains too many items to render simultaneously.

In this demo, the ListRenderMode property is set to ListRenderMode.Virtual.

The ComboBox component provides access to item values. The value is assigned to the editor's edit value when a user selects an item from the drop-down list. To enable this access, set the ValueFieldName property to the name of the data source field that ships with values for the ComboBox items.

If the ValueFieldName property is not specified, the ComboBox component searches for a Value field in the data source and uses this field as a value field. Otherwise, values are not assigned to editor items.

To access a selected item's value, use the Value property. To track selection changes, use the ValueChanged event or two-way synchronization as demonstrated in this module.

The AllowUserInput property specifies whether users are allowed to input values into an editor's edit box. The following property values are available:

• true — A user can either select an item from the drop-down list or enter new values into the edit box (without the need to invoke the drop-down list).
• false — A user can only select an item from the drop-down list.

In this demo, the AllowUserInput property is set to true.

This demo illustrates how to use the NullText property to display the placeholder text in the ComboBox when its value is null.

Set the ClearButtonDisplayMode property to Auto to display the Clear button when the ComboBox has a non-null value. Users can click this button to clear the editor's value (set it to null).

Use the ItemDisplayTemplate property to customize the appearance of ComboBox items. This property accepts a ComboBoxItemDisplayTemplateContext object as its context parameter. You can use the parameter's members to obtain item information.

• DataItem
• DisplayText
• HighlightedDisplayText
• Value
• VisibleIndex

In this demo, the ItemDisplayTemplate property is used to display the ComboBox's items in a card-like view. Each item displays an employee's first name, last name, photo, and phone number.

Use the EditBoxDisplayTemplate property to customize the appearance of items displayed within the edit box. The template's context parameter allows you to access a data object and its associated fields.

To create an edit box template with user input and filter mode support, declare the DxInputBox object within EditBoxDisplayTemplate markup. Set the ComboBox AllowUserInput to true and specify both SearchMode and SearchFilterCondition properties.

In this demo, the EditBoxDisplayTemplate property is used to display a ComboBox item and its icon within the edit box. The template contains the DxInputBox component and allows users to enter text in the edit box and filter data (Note: The StartsWith condition is used).

The ColumnCellDisplayTemplate property allows you to specify custom content and change the appearance of cells in ComboBox columns. The property accepts a ComboBoxColumnCellDisplayTemplateContext object as the context parameter. You can use the parameter's members to get information about columns:

• Column
• DataItem
• DisplayText
• HighlightedDisplayText
• Value
• VisibleIndex

This demo customizes the appearance of different columns.

The DevExpress Blazor ComboBox displays an “empty data area” in the following instances:

• The Data property is not set.
• The specified data source is empty.
• None of the ComboBox items matches the current search and filter condition.
• You use the DataAsync or CustomData property to bind the ComboBox to a data source. The component sends the first request to a remote data source and waits for a response.

Define the EmptyDataAreaTemplate to customize the content displayed in this empty region. The template's context parameter includes the IsDataLoading property. This property allows you to determine whether ComboBox is loading data.

Use the DropDownWidthMode property to specify the width of a drop-down list.

• ContentOrEditorWidth (Default) — The list's width is equal to the width of the longest list item or the editor's width (whichever is larger).
• ContentWidth — The list's width is equal to the width of the longest list item.
• EditorWidth — The list's width is equal to the editor's width. List items are cut if they do not fit.

In this demo, ContentOrEditorWidth mode is used for both ComboBox components. To change the width of their drop-down lists, use the Drop Down Width Mode option below.

This demo shows how to populate the ComboBox with items based on the user selection in another ComboBox.