Skip to main content
All docs
V25.1
  • TagBoxTagDisplayTemplateContext<TData>.RemoveTagAction Property

    Specifies the predefined action that removes the tag.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public EventCallback RemoveTagAction { get; }

    Property Value

    Type Description
    EventCallback

    An event handler delegate.

    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