Skip to main content

DxComboBoxSettings.ItemTemplate Property

Specifies the template used to display the combo box editor’s items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<object> ItemTemplate { get; set; }

Property Value

Type Description
RenderFragment<Object>

The template content.

Remarks

Place HTML markup in the <ItemTemplate> tag to define custom content for the combo box editor’s items. Use the template’s context parameter to access a data object and its fields (for instance, you can get a data field value).

The following code snippet displays the combo box editor’s items in a card-like view. Each item shows an employee’s first name, last name, photo, and phone number.

Item Template

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid Data="Orders"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="EmployeeId" Caption="Employee" Width="20%">
            <EditSettings>
                <DxComboBoxSettings Data="Employees"
                                    TextFieldName="LastName"
                                    ValueFieldName="EmployeeId">
                    <ItemTemplate>
                        @{ var employee = (Employee)context; }
                        <div class="combobox-item-template">
                            <img src="@StaticAssetUtils.GetImagePath(GetImageFileName(employee))" />
                            <div class="combobox-item-template-text">
                                <span>@employee.FirstName @employee.LastName</span>
                                <span class="combobox-item-template-employee-phone">@employee.HomePhone</span>
                            </div>
                        </div>
                    </ItemTemplate>
                </DxComboBoxSettings>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ShippedDate" />
        <DxGridDataColumn FieldName="ShipCountry" />
        <DxGridDataColumn FieldName="ShipCity" />
        <DxGridDataColumn FieldName="ShipName" Width="20%" />
    </Columns>
</DxGrid>

@code {
    NorthwindContext Northwind { get; set; }
    List<Order> Orders { get; set; }
    List<Employee> Employees { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Orders = await Northwind.Orders.ToListAsync();
        Employees = await Northwind.Employees.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

To change the item template at runtime, use the IComboBoxSettings.ItemTemplate property.

Implements

See Also