blazor-devexpress-dot-blazor-dot-dxlistbox-2-5f0532d2.md
Specifies a display template for List Box items.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public RenderFragment<ListBoxItemDisplayTemplateContext<TData>> ItemDisplayTemplate { get; set; }
| Type | Description |
|---|---|
| RenderFragment<ListBoxItemDisplayTemplateContext<TData>> |
The template content.
|
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">
<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-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;
}
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 BirthDate { get; set; }
public Nullable 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";
}
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
}
}
}
public class Startup {
public void ConfigureServices(IServiceCollection services) {
// ...
services.AddScoped<NwindDataService>();
}
}
Run Demo: ListBox - Item Display Template
DevExpress.Blazor.IListBox<TData, TValue>.ItemDisplayTemplate
See Also
DxListBox<TData, TValue> Class