TagInfo<T>.DataItem Property

Gets the tag's bound data item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public T DataItem { get; }

Property Value

Type Description
T

The data item type.

Remarks

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"
          @bind-Tags="@Tags">
            <TagTemplate Context="tagInfo">
                @{
                    var style = tagInfo.IsCustom ? ButtonRenderStyle.Secondary : tagInfo.DataItem.Style;
                    var styleMode = tagInfo.IsCustom ? ButtonRenderStyleMode.Outline: ButtonRenderStyleMode.Contained;
                    <DxButton RenderStyle="@style" 
                              RenderStyleMode="@styleMode" 
                              Text="@tagInfo.Text" 
                              style="display:inline-block">
                        @context
                        <span @onclick="@tagInfo.RemoveTagAction">&times;</span>
                    </DxButton>
                }
            </TagTemplate>
</DxTagBox>

@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

NOTE

Online Demo: TagBox - Tag Template

See Also