DxListEditorBase<TData, TValue>.ItemTemplate Property

Specifies a template used to display component items.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.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 a component’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 following code snippet displays the List Box’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

<DxListBox Data="@Data"
           @bind-Value="@Value"
           CssClass="cw-400 chi-220">
    <ItemTemplate>
        <div class="listbox-item-template">
            <img src="@StaticAssetUtils.GetImagePath(GetImageFileName(context))" />
            <div class="listbox-item-template-text">
                <span>@context.FirstName @context.LastName</span>
                <span class="listbox-item-template-text-phone">@context.HomePhone</span>
            </div>
        </div>
    </ItemTemplate>
</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;
}