DxTagBox<TData, TValue>.TagDisplayTemplate Property

Specifies the template to display tags in the edit box.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<TagBoxTagDisplayTemplateContext<TData>> TagDisplayTemplate { get; set; }

Property Value

Type	Description
RenderFragment<TagBoxTagDisplayTemplateContext<TData>>	The template content.

Remarks

Use the TagDisplayTemplate property to customize tag appearance. The property accepts a TagBoxTagDisplayTemplateContext<TData> object as the context parameter. You can use the parameter’s members to obtain tag information.

• IsCustom
• DisplayText
• DataItem
• RemoveTagAction

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">
                @{
                    var buttonStyleMode = tagContext.IsCustom ? ButtonRenderStyleMode.Contained : GetModeByID(tagContext.DataItem.CityName);
                    var buttonStyle = tagContext.IsCustom ? ButtonRenderStyle.Dark : ButtonRenderStyle.Primary;
                    <DxButton tabindex="-1"
                              RenderStyle="@buttonStyle"
                              RenderStyleMode="@buttonStyleMode"
                              Text="@tagContext.DisplayText"
                              CssClass="tagbox-tag-template-btn">

                        @context
                        <span @onclick="@tagContext.RemoveTagAction" class="tagbox-tag-template-close-btn-icon">&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;
        }
    }
}

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

Implements

DevExpress.Blazor.ITagBox<TData, TValue>.TagDisplayTemplate