TagBox - Overview

The TagBox is an editor that allows users to select multiple items (tags) from a predefined drop-down list. Users can also type in the edit box to filter list items that contain the search string. To remove a tag, users can click its remove button or press Backspace.

The main TagBox API members are listed below.

  • Data - Specifies the data source that populates the editor’s list items.
  • TextFieldName - Specifies the data source’s field that supplies text for items.
  • Tags - Specifies the editor’s tags.
  • TagsChanged - Fires when the tag collection is changed.
  • SelectedItems - Specifies the drop-down list’s selected items.
  • SelectedItemsChanged - Fires when the selected item collection is changed.

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

TagBox - Custom Tags

In this demo, the TagBox supports custom tags that are not stored in a bound data source (the AllowCustomTags property is set to true). To create a custom tag, users should type a value in the edit box and press Enter.

London New York

TagBox - Null Text

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).

TagBox - Virtual Scrolling

Use the ListRenderMode property to specify how the TagBox loads the item list.

  • Entire - The TagBox loads the entire item list. Use this option for small item lists where scrolling should work instantly.
  • Virtual - The TagBox loads visible items only. Use this option to improve performance when the list contains to many items to load simultaneously.

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

TagBox - Filter Modes

Use the FilteringMode property to specify whether and how the TagBox filters list items when users type in the edit box.

  • Contains (Default) - The TagBox filters list items that contain the search string and highlights matches.
  • StartsWith - The TagBox filters list items that begin with the search string and highlights matches.
  • None - The TagBox does not filter list items.

In this demo, the filter mode is set to DataGridFilteringMode.StartsWith. To filter list items, focus the edit box and type a search string. To change the filter mode or disable filtering, use the Filtering Mode drop-down list.

United Kingdom United States

TagBox - Show Selected Items

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

TagBox - Read-Only Mode

In this demo, the TagBox displays values but does not allow users to change them. Set the ReadOnly property to true to activate read-only mode.

TagBox - Tag Template

This demo illustrates how to use the TagTemplate 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.
  • Text - The tag’s text.
Option 2 ×
Option 5 ×
Custom Option ×

TagBox - Validation

This demo illustrates how to add the TagBox to Blazor's standard EditForm component. This component allows data validation.

Use the TagBox’s ValidateBy property to specify whether to validate the editor’s tags or the drop-down list’s selected items. In this demo, this property is set to TagBoxValidateBy.Tags. The Tags property’s bound field is marked with the Required attribute and a custom data annotation attribute that validates email formats.

Users can select email recipients from a drop-down list or type email addresses in the edit box. The TagBox is outlined in color: red indicates the editor contains invalid tags or is empty; green indicates valid tags.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙