Skip to main content

DxTagBox<TData, TValue>.ItemTemplate Property

This property is now obsolete. Use the ItemDisplayTemplate property instead.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type Description
RenderFragment<TData>

The template content.

Remarks

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

Note

The ItemTemplate property does not work for a multi-column TagBox.

See Also