The DevExpress Blazor TagBox allows users to select multiple items (tags) from a predefined drop-down list. Users can also enter values in the edit box to filter list items matching the search string.

Key TagBox API members are listed below:

• Data — Specifies the data source used to populate the list items.
• TextFieldName — Specifies the data source field that supplies item text.
• Tags — Specifies the editor tags.
• TagsChanged — Fires when the tag collection is changed.
• Values — Specifies the drop-down list's selected values.
• ValuesChanged — Fires when the selected value collection is changed.

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

The TagBox supports keyboard navigation (list of supported keyboard shortcuts). Users can focus the component edit box, navigate through tags and remove them, navigate within the drop-down item list, and select items.

This demo illustrates how to bind the Blazor TagBox to a list of complex business objects.

The DevExpress Blazor TagBox allows users to filter data. When a user enters text in the edit box, the TagBox searches for this text in all visible columns, filters items, and highlights matches.

Users can use special characters to create composite criteria.

You can use the following API members to configure search and filter capabilities:

• SearchMode — Specifies search mode. AutoSearch is the default mode. You can set this property to Disabled to prevent search operations.
• SearchFilterCondition — Specifies search/filter condition (Contains/Default, Equals, or StartsWith).
• SearchTextParseMode — Specifies how the TagBox 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 text parse modes are available: GroupWordsByAnd, GroupWordsByOr, and ExactMatch.
• SearchEnabled — Specifies whether the component can search text in current column cells.
• SearchDelay — Specifies the delay between the last input in the edit box and initiation of the search operation.

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

Our Blazor TagBox 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 populate column items.
• SearchEnabled — Specifies whether the component can search text in cells associated with the current column.
• Visible — Specifies column visibility.
• VisibleChanged — Fires when column visibility changes.
• VisibleIndex — Specifies column display order.
• VisibleIndexChanged — Fires when the column's visible index changes.
• Width — Specifies 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 TagBoxes. 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, our Blazor TagBox allows you to organize dropdown list items into groups.

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

Note the following when using this option:

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

Use the DisabledFieldName property to disable individual items within a TagBox dropdown list. The property specifies a Boolean field and 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 TagBox renders the item list.

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

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

The TagBox 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 TagBox items.

If the ValueFieldName property is not specified, the TagBox 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 values of the selected items, use the Values property. To track selection changes, use the ValuesChanged event or two-way synchronization as demonstrated in this module.

In this demo, the TagBox supports custom tags that are not stored in a bound data source (the AllowCustomTags property is set to true).

In this demo, the TagBox displays selected items in the drop-down list. Set the HideSelectedItems property to false to enable this behavior.

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

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

This demo uses the TagDisplayTemplate property to customize tag's appearance.

The template's Context parameter has the following properties:

• DataItem — The tag's bound data item (if the tag is not custom).
• IsCustom -Returns whether the current tag is custom (not stored in the assigned data source).
• RemoveTagAction — The predefined action that removes the tag.
• DisplayText — The tag's text.

Use the ItemDisplayTemplate property to customize the appearance of TagBox items. The property acceptsTagBoxItemDisplayTemplateContext 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 TagBox items in a card-like view. The TagDisplayTemplate property customizes the appearance of TagBox tags.

This demo customizes cell appearance in a multi-column TagBox.

Use the DxListEditorColumn.CellDisplayTemplate property to specify cell rendering for a specific column. You can format data, apply CSS styles, and add custom HTML markup.

The CellDisplayTemplate property gives you access to cell context through a ListBoxColumnCellDisplayTemplateContext object:

• The underlying data object (the DataItem property)
• The parent column (the Column property)
• Other relevant information about the cell (value, state, display text, sequential index, etc.)

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

• The Data property is not set.
• The specified data source does not contain items.
• You use the DataAsync property or the CustomData property to bind the List Box to a data source. The component sends the first request to a remote data source and waits for an appropriate response.

Define the EmptyDataAreaTemplate to customize content displayed in this empty region. The template's context parameter includes the IsDataLoading property. This property allows you to determine whether TagBox is still 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 TagBox components. To change the width of their drop-down lists, use the Drop Down Width Mode option below.