DxComboBox<TData, TValue>.ItemTemplate Property

Specifies a template used to display the ComboBox’s items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.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 ComboBox’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 example below demonstrates how to display the ComboBox’s items in a card-like view. Each item shows an employee’s first name, last name, photo, and phone number.

Razor

@inject NwindDataService NwindDataService
<DxComboBox Data="@Data"
            @bind-Value="@Value"
            CssClass="cw-480">
    <ItemTemplate>
        <div class="combobox-item-template">
            <img src="@StaticAssetUtils.GetImagePath(GetImageFileName(context))" />
            <div class="combobox-item-template-text">
                <span>@context.FirstName @context.LastName</span>
                <span class="combobox-item-template-employee-phone">@context.HomePhone</span>
            </div>
        </div>
    </ItemTemplate>
</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";
    }
}

CSS

.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;
}

Employee.cs

public partial class Employee {
// ...
    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";
}

Run Demo: ComboBox - ItemTemplate