DxAccordion.ItemTemplate Property

Specifies the template used to display Accordion items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment<IAccordionItemInfo>	The item template.

Remarks

Use the ItemTemplate to specify the template for an item’s header and content.

The following example shows how to apply the ItemTemplate:

Index.Razor

<style>
    .my-class {
        margin-bottom: 5px;
    }
</style>
<div class="cw-480">
    <DxAccordion Data=@DataSource>
        <DataMappings>
            <DxAccordionDataMapping Key="LastName" 
                                    Text="LastName" />
        </DataMappings>
        <ItemTemplate>
            @{
                var dataItem = (Employee)context.DataItem;
            }
            <div class="my-class">
                <EmployeeCard EmployeeInfo=dataItem />
            </div>
        </ItemTemplate>
    </DxAccordion>
</div>

EmployeeCard.Razor

<div class="e-card">
    <div class="e-main d-flex align-items-center">
        <div class="flex-shrink-0">
            <img class="e-photo" src=@GetPhotoUrl() alt="" @attributes=@ImageAttributes/>
        </div>
        <div class="e-info flex-grow-1 ms-3">
            <h5 class="e-name">@($"{EmployeeInfo.FirstName} {EmployeeInfo.LastName}")</h5>
            <p class="e-title">@EmployeeInfo.Title</p>
            @if(Detailed) {
                <p class="e-email">
                    @(($"{EmployeeInfo.FirstName}.{EmployeeInfo.LastName}@sample.com").ToLower())
                </p>
            }
        </div>
    </div>
    @* ... *@
</div>

Employee.cs

using System;

namespace Tabs.Data {
    public class Employee {
        public string Title { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Position { get; set; }
        public DateTime BirthDate { get; set; }
        public DateTime HireDate { get; set; }
        public string Notes { get; set; }
        public string FileName { get; set; }
    }
}

If you want to specify custom item content or header text only, use the ItemContentTemplate or ItemHeaderTextTemplate property.

If you want to specify the template for all items, use the Template.