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

Declaration

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

Property Value

Type	Description
RenderFragment<TData>	The template content.

Remarks

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

ItemTemplate

Specifies a template for the editor’s items.

TagTemplate

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.

Razor

@inject NwindDataService NwindDataService
<DxTagBox Data="@Data"
          @bind-Values="@Values"
          CssClass="cw-480">
    <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">
            </DxButton>
        </div>
    </TagTemplate>
    <ItemTemplate>
        <div class="item-template">
            <img class="item-template-employee-photo" src="@StaticAssetUtils.GetImagePath(GetImageFileName(context))" />
            <div>
                <span class="item-template-employee-first-name">@context.FirstName @context.LastName</span>
                <span class="item-template-employee-home-phone">@context.HomePhone</span>
            </div>
        </div>
    </ItemTemplate>
</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

.item-template {
    display: flex;
    align-items: center;
}
.tag-template {
    display: flex;
    align-items: center;
    padding: 0.125em 0.5em 0.125em 0;
    position: relative;
}
.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;
}
.item-template-employee-photo,
.tag-template-employee-photo {
    margin-right: 0.5em;
    border-radius: 16px;
    border: 0 solid #000;
}
.item-template-employee-photo {
    width: 32px;
    height: 32px;
}
.tag-template-employee-photo {
    width: 24px;
    height: 24px;
}
.item-template-employee-home-phone {
    opacity: 0.65;
    display: block;
    font-size: 0.75em;
}
.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;
}
.tag-template-close-btn-icon {
    height: 16px;
    width: 16px;
    background-image: url("images/close.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}

Run Demo: TagBox - ItemTemplate