Skip to main content

DxTagBox<TData, TValue>.ItemTemplate Property

Specifies a template used to display the TagBox’s items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor


public RenderFragment<TData> ItemTemplate { get; set; }

Property Value

Type Description

The template content.


The TagBox component supports templates that customize the appearance of its items and tags:

Specifies a template for the editor’s items.
Specifies a template for the editor’s tags.

Place HTML markup in the <ItemTemplate> tag to define custom content for the TagBox’s items. Use the template’s context parameter to access a data object and its fields (for instance, you can get the value of a data field).

The example below demonstrates how to display the TagBox’s items in a card-like view. Each item shows an employee’s first name, last name, photo, and phone number.

@inject NwindDataService NwindDataService
<DxTagBox Data="@Data"
    <TagTemplate Context="tagInfo">
        <div class="tag-template">
            <img class="tag-template-employee-photo" src="@StaticAssetUtils.GetImagePath(GetImageFileName(tagInfo.DataItem))" />
            <div>@tagInfo.DataItem.FirstName @tagInfo.DataItem.LastName</div>
            <DxButton Click="@tagInfo.RemoveTagAction" @onclick:stopPropagation CssClass="tag-template-close-btn" IconCssClass="tag-template-close-btn-icon"
                RenderStyle="ButtonRenderStyle.None" RenderStyleMode="ButtonRenderStyleMode.Text">
        <div class="item-template">
            <img class="item-template-employee-photo" src="@StaticAssetUtils.GetImagePath(GetImageFileName(context))" />
                <span class="item-template-employee-first-name">@context.FirstName @context.LastName</span>
                <span class="item-template-employee-home-phone">@context.HomePhone</span>

@code {
IEnumerable<Employee> Data { get; set; }
    IEnumerable<Employee> Values { get; set; }

    protected override async Task OnInitializedAsync() {
    Data = await NwindDataService.GetEmployeesAsync();
    Values = Data.Take(1);

    string GetImageFileName(Employee employee) {
    return $"employees/item-template{employee.EmployeeId}.jpg";

TagBox - ItemTemplate

Run Demo: TagBox - ItemTemplate

See Also