DxTagBox<TData, TValue>.ItemDisplayTemplate Property

Specifies a template used to display the TagBox’s items in the drop-down list.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<TagBoxItemDisplayTemplateContext<TData>> ItemDisplayTemplate { get; set; }

Property Value

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

Remarks

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

The following code snippet uses the ItemDisplayTemplate property to display TagBox items in a card-like view. Each item shows an employee’s first name, last name, photo, and phone number.

Razor

@inject NwindDataService NwindDataService

<DxTagBox Data="@Data"
          @bind-Values="@Values">
    <TagDisplayTemplate Context="tagContext">
        <div class="tagbox-tag-template">
            <img class="tagbox-tag-template-employee-photo" src="@StaticAssetUtils.GetImagePath(GetImageFileName(tagContext.DataItem))" alt="@tagContext.DataItem.FullName" />
            <div>@tagContext.DataItem.FullName</div>
            <DxButton Click="@tagContext.RemoveTagAction"
                        @onclick:stopPropagation
                        aria-label="Remove Tag"
                        CssClass="tagbox-tag-template-close-btn"
                        IconCssClass="tagbox-tag-template-close-btn-icon"
                RenderStyle="ButtonRenderStyle.None" RenderStyleMode="ButtonRenderStyleMode.Text">
            </DxButton>
        </div>
    </TagDisplayTemplate>
    <ItemDisplayTemplate>
        <div class="tagbox-item-template">
            <img class="tagbox-item-template-employee-photo" src="@StaticAssetUtils.GetImagePath(GetImageFileName(context.DataItem))" alt="@context.DataItem.FullName" />
            <div>
                <span class="tagbox-item-template-employee-first-name">@context.DataItem.FullName</span>
                <span class="tagbox-item-template-employee-home-phone">@context.DataItem.HomePhone</span>
            </div>
        </div>
    </ItemDisplayTemplate>
</DxTagBox>

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

CSS

.tagbox-item-template {
    display: flex;
    align-items: center;
}
.tagbox-tag-template {
    display: flex;
    align-items: center;
    padding: 0.125em 0.5em 0.125em 0;
    position: relative;
}
.tagbox-tag-template:before {
    content: " ";
    position: absolute;
    background-color: currentColor;
    opacity: 0.15;
    border-radius: 16px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
.tagbox-item-template-employee-photo,
.tagbox-tag-template-employee-photo {
    margin-right: 0.5em;
    border-radius: 16px;
    border: 0 solid #000;
}
.tagbox-item-template-employee-photo {
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
}
.tagbox-tag-template-employee-photo {
    width: 24px;
    height: 24px;
}
.tagbox-item-template-employee-home-phone {
    opacity: 0.65;
    display: block;
}
.tagbox-tag-template-close-btn {
    border: 0;
    border-radius: 3rem;
    box-shadow: none;
    font-weight: 600;
    padding: 0;
    width: 16px;
    height: 16px;
    margin: 0 0 0 0.5em;
    opacity: 0.5;
}
.tagbox-tag-template-close-btn:hover {
    opacity: 0.75;
}
.tagbox-tag-template-close-btn-icon {
    height: 16px;
    width: 16px;
    mask-image: url("images/icons/clear.svg");
    -webkit-mask-image: url("images/icons/clear.svg");
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}

Employee.cs

public partial class Employee {
    public Employee() {
        this.Orders = new List<Order>();
    }
    public int EmployeeId { get; set; }
    public string LastName { get; set; }
    public string FirstName { get; set; }
    public string Title { get; set; }
    public string TitleOfCourtesy { get; set; }
    public Nullable<System.DateTime> BirthDate { get; set; }
    public Nullable<System.DateTime> HireDate { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
    public string HomePhone { get; set; }
    public string Extension { get; set; }
    public byte[] Photo { get; set; }
    public string Notes { get; set; }
    public Nullable<int> ReportsTo { get; set; }
    public string PhotoPath { get; set; }
    public string GroupName { get; set; }
    public virtual ICollection<Order> Orders { get; set; }
    public string Text => $"{FirstName} {LastName} ({Title})";
    public string FullName => $"{FirstName} {LastName}";
    public string ImageFileName => $"employees/{EmployeeId}.jpg";
}

NwindDataService.cs

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

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

Startup.cs

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

Run Demo: TagBox - ItemTemplate

Implements

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