Skip to main content
All docs
V25.1
  • DxListBox<TData, TValue>.ItemDisplayTemplate Property

    Specifies a display template for List Box items.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Parameter]
    public RenderFragment<ListBoxItemDisplayTemplateContext<TData>> ItemDisplayTemplate { get; set; }

    Property Value

    Type Description
    RenderFragment<ListBoxItemDisplayTemplateContext<TData>>

    The template content.

    Remarks

    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">
                <img src="@StaticAssetUtils.GetImagePath(GetImageFileName(context.DataItem))" alt="@context.DataItem.FullName" />
                <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 Display Template

    Run Demo: ListBox - Item Display Template

    Implements

    DevExpress.Blazor.IListBox<TData, TValue>.ItemDisplayTemplate
    See Also