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:

• DataItem
• DisplayText
• HighlightedDisplayText
• Value
• VisibleIndex

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.

Razor

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

CSS

.listbox-item-template {
    display: flex;
    align-items: center;
}

.listbox-item-template > img {
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
}

img + .listbox-item-template-text {
    margin-left: 1rem;
}

.listbox-item-template-text {
    display: flex;
    flex-flow: column;
}

.listbox-item-template-text-phone {
    opacity: 0.65;
}

Employee.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

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: ListBox - Item Display Template

Implements

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