TagBoxTagDisplayTemplateContext<TData>.RemoveTagAction Property

Specifies the predefined action that removes the tag.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

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.

Razor

<DxTagBox Data="@Data"
          TextFieldName="@nameof(City.CityName)"
          TData="City"
          TValue="City"
          AllowCustomTags="true"
          @bind-Tags="@Tags"
          ListRenderMode="ListRenderMode.Virtual"
          SizeMode="Params.SizeMode"
          CssClass="cw-480"
          InputId="tbTagTemplate">
    <TagDisplayTemplate Context="tagContext">
        <div class="@GetTagClass(tagContext.IsCustom ? tagContext.DisplayText : tagContext.DataItem.CityName)">
            @tagContext.DisplayText
            <div @onclick="@tagContext.RemoveTagAction" class="tagbox-tag-template-close-btn-icon" role="button" aria-label="Remove tag"></div>
        </div>
    </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" };
    }
@* ... *@

    string GetTagClass(string cityName) {
        var result = "tagbox-tag-template";
        switch(cityName) {
            case "New York":
                result += " tagbox-tag-template-NY";
                break;
            case "Los Angeles":
                result += " tagbox-tag-template-LA";
                break;
            default:
                break;
        }
        return result;
    }
}

City

public class City {
    public int Id { get; set; }
    public int CountryId { get; set; }
    public string CityName { get; set; }
}

public static class CityData {
    private static readonly Lazy<List<City>> cities = new Lazy<List<City>>(() => {
        return new List<City>() {
            new City() { Id = 0, CountryId = 0, CityName = "Washington" },
            new City() { Id = 1, CountryId = 0, CityName = "New York" },
            new City() { Id = 2, CountryId = 0, CityName = "Los Angeles" },
            new City() { Id = 3, CountryId = 1, CityName = "Berlin" },
            new City() { Id = 4, CountryId = 1, CityName = "Munich" },
            new City() { Id = 5, CountryId = 1, CityName = "Hamburg" },
            new City() { Id = 6, CountryId = 2, CityName = "Tokyo" },
            new City() { Id = 7, CountryId = 2, CityName = "Osaka" },
            new City() { Id = 8, CountryId = 2, CityName = "Yokohama" }
        };
    });
    public static List<City> Cities { get { return cities.Value; } }
} 

WorldcitiesDataService.cs

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Worldcities;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class WorldcitiesDataService {
        public Task<IEnumerable<City>> GetCitiesAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}

Startup.cs

public class Startup {
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddScoped<WorldcitiesDataService>();
    }
}

Run Demo: TagBox - Tag Display Template