Skip to main content
All docs
V24.1

DxListBox<TData, TValue>.ItemDisplayTemplate Property

Specifies a display template for List Box items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type Description
RenderFragment<ListBoxItemDisplayTemplateContext<TData>>

The template content.

Remarks

The ItemDisplayTemplate property allows you to customize the appearance of List Box items. The property accepts a ListBoxItemDisplayTemplateContext object as the context parameter. You can use the parameter’s members to get information about items:

The following code snippet displays List Box items as contact cards. Each item shows an employee’s first name, last name, photo, and phone number.

@inject NwindDataService NwindDataService

<DxListBox Data="@Data"
            @bind-Value="@Value"
            SizeMode="Params.SizeMode"
            CssClass="cw-400 chi-220">
    <ItemDisplayTemplate>
        <div class="listbox-item-template">
            <img src="@StaticAssetUtils.GetImagePath(GetImageFileName(context.DataItem))" alt="@context.DataItem.FullName" />
            <div class="listbox-item-template-text">
                <span>@context.DataItem.FullName</span>
                <span class="listbox-item-template-text-phone">@context.DataItem.HomePhone</span>
            </div>
        </div>
    </ItemDisplayTemplate>
</DxListBox>

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

    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetEmployeesAsync();
        Value = Data.FirstOrDefault();
    }

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

ListBox - Item Display Template

Run Demo: ListBox - Item Display Template

Implements

DevExpress.Blazor.IListBox<TData, TValue>.ItemDisplayTemplate
See Also