blazor-devexpress-dot-blazor-dot-dxtagbox-2-9b9a4b98.md
Specifies the template to display tags in the edit box.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public RenderFragment<TagBoxTagDisplayTemplateContext<TData>> TagDisplayTemplate { get; set; }
| Type | Description |
|---|---|
| RenderFragment<TagBoxTagDisplayTemplateContext<TData>> |
The template content.
|
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.
The following code snippet customizes a tag appearance according to its type and text.
<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">×</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;
}
}
}
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; } }
}
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
}
}
}
public class Startup {
public void ConfigureServices(IServiceCollection services) {
// ...
services.AddScoped<WorldcitiesDataService>();
}
}
Run Demo: TagBox - Tag Display Template
DevExpress.Blazor.ITagBox<TData, TValue>.TagDisplayTemplate
See Also