TagInfo<T>.DataItem Property

Gets the tag's bound data item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll


public T DataItem { get; }

Property Value

Type Description

The data item type.


Use the DataItem property to access the tag's bound data item. If the tag is custom, the DataItem property returns NULL. To check whether the tag is custom, use the IsCustom property.

Use the TagInfo instances to define tags to be customized via templates (TagTemplate).

The code below demonstrates how to customize a tag appearance according to its type and text.

<DxTagBox Data="@DataSource"
          TextFieldName ="Data"
          AllowCustomTags ="true"
            <TagTemplate Context="tagInfo">
                    var style = tagInfo.IsCustom ? ButtonRenderStyle.Secondary : tagInfo.DataItem.Style;
                    var styleMode = tagInfo.IsCustom ? ButtonRenderStyleMode.Outline: ButtonRenderStyleMode.Contained;
                    <DxButton RenderStyle="@style" 
                        <span @onclick="@tagInfo.RemoveTagAction">&times;</span>

@code {
    Option[] DataSource { get; set; } = null;

    IEnumerable<string> Tags { get; set; }

    protected override void OnInitialized() {

        DataSource = new Option[] {
            new Option("Option 1", ButtonRenderStyle.Primary),
            new Option("Option 2", ButtonRenderStyle.Success),
            new Option("Option 3", ButtonRenderStyle.Primary),
            new Option("Option 4", ButtonRenderStyle.Success),
            new Option("Option 5", ButtonRenderStyle.Primary),
            new Option("Option 6", ButtonRenderStyle.Success),
            new Option("Option 7", ButtonRenderStyle.Primary)

        Tags = new List<string>() { "Option 2", "Option 5", "Custom Option" };

TagBox Template


Online Demo: TagBox - Tag Template

See Also