Skip to main content
All docs
V24.1

TagBoxTagDisplayTemplateContext<TData>.RemoveTagAction Property

Specifies the predefined action that removes the tag.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public EventCallback RemoveTagAction { get; }

Property Value

Type
EventCallback

Remarks

Use the RemoveTagAction property to assign the remove tag’s action to a custom UI element in the tag display template.

The following code snippet customizes a tag appearance according to its type and text.

@inject WorldcitiesDataService WorldcitiesDataService
<DxTagBox Data="@Data"
          TextFieldName="@nameof(City.CityName)"
          TData="City"
          TValue="City"
          AllowCustomTags="true"
          @bind-Tags="@Tags"
          ListRenderMode="ListRenderMode.Virtual">
    <TagDisplayTemplate Context="tagContext">
        @{
            var buttonStyleMode = tagContext.IsCustom ? ButtonRenderStyleMode.Contained : GetModeByID(tagContext.DataItem.CityName);
            var buttonStyle = tagContext.IsCustom ? ButtonRenderStyle.Dark : ButtonRenderStyle.Primary;
            <DxButton RenderStyle="@buttonStyle"
                      RenderStyleMode="@buttonStyleMode"
                      Text="@tagContext.DisplayText"
                      CssStyle="display:inline-block; padding-right: 0">
                @context
                <span @onclick="@tagContext.RemoveTagAction" style="display:inline-block; width: 1em; margin-left: 0.5em">
                    &times;
                </span>
            </DxButton>
        }
    </TagDisplayTemplate>
</DxTagBox>

@code {
    IEnumerable<City> Data { get; set; }
    IEnumerable<string> Tags { get; set; }
    protected override async Task OnInitializedAsync() {
        Data = await WorldcitiesDataService.GetCitiesAsync();
        Tags = new List<string>() { "New York", "Los Angeles", "Tokyo" };
    }
    ButtonRenderStyleMode GetModeByID(string cityName) {
        switch(cityName) {
            case "New York":
                return ButtonRenderStyleMode.Contained;
            case "Los Angeles":
                return ButtonRenderStyleMode.Outline;
            default:
                return ButtonRenderStyleMode.Text;
        }
    }
}

TagBox Template

Run Demo: TagBox - Tag Display Template

See Also