blazor-devexpress-dot-blazor-dot-dxcombobox-2-29e58f60.md
Specifies a template used to display the ComboBox’s items.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public RenderFragment<ComboBoxItemDisplayTemplateContext<TData>> ItemDisplayTemplate { get; set; }
| Type | Description |
|---|---|
| RenderFragment<ComboBoxItemDisplayTemplateContext<TData>> |
The template content.
|
Place HTML markup in the <ItemDisplayTemplate> tag to define custom content for ComboBox items. Use the template’s context parameter to access a data object and its fields (for instance, get the value of a data field).
The following code snippet uses the ItemDisplayTemplate property to display ComboBox items in a card-like view. Each item shows an employee’s first name, last name, photo, and phone number.
@inject NwindDataService NwindDataService
<DxComboBox Data="@Data"
@bind-Value="@Value"
CssClass="cw-480"
InputId="cbItemTemplate">
<ItemDisplayTemplate>
<div class="combobox-item-template">
<div class="combobox-item-template-text">
<span>@context.DataItem.FullName</span>
<span class="combobox-item-template-employee-phone">@context.DataItem.HomePhone</span>
</div>
</div>
</ItemDisplayTemplate>
</DxComboBox>
@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";
}
}
.combobox-item-template {
display: flex;
align-items: center;
}
.combobox-item-template > img {
border-radius: 50%;
width: 2rem;
height: 2rem;
}
img + .combobox-item-template-text {
margin-left: 1rem;
}
.combobox-item-template-text {
display: flex;
flex-flow: column;
}
.combobox-item-template-employee-phone {
opacity: 0.65;
}
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: ComboBox - Item Display Template
DevExpress.Blazor.IComboBox<TData, TValue>.ItemDisplayTemplate
See Also
DxComboBox<TData, TValue> Class