DxTagBox<TData, TValue>.TagDisplayTemplate Property

Specifies the template to display tags in the edit box.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.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

@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;
        }
    }
}

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