Skip to main content

DxAccordion.ItemContentTemplate Property

Specifies a content template for all Accordion items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type Description
RenderFragment<IAccordionItemInfo>

An item content template.

Remarks

You can define ItemContentTemplate to display custom content in all Accordion items. If your template uses components that contain RenderFragment<TValue> (for example, DxFormLayout), then a known Blazor issue may occur. To resolve the problem, specify the Context parameter explicitly.

The following code snippet applies the ItemContentTemplate:

@using Accordion.Data;
@inject Data.EmployeeService EmployeeService

<DxAccordion Data=@Employees>
    <DataMappings>
        <DxAccordionDataMapping Key="LastName"
                                Text="LastName" />
    </DataMappings>
    <ItemContentTemplate>
        <div class="m-1">
            @{
                var dataItem = (Employee)context.DataItem;
            }
            <div class="text-center">
                <h5>@dataItem.LastName @dataItem.FirstName</h5>
                Position: @dataItem.Position
                Hire date: @dataItem.HireDate
            </div>
            <hr />
            <span>@dataItem.Notes</span>
        </div>
    </ItemContentTemplate>
</DxAccordion>

@code {
    IEnumerable<Employee> Employees;
    protected override async Task OnInitializedAsync() {
        Employees = (await EmployeeService.Load()).Skip(5).Take(3);
    }
}

Content Template

You can also specify ItemHeaderTextTemplate for the item’s header or ItemTemplate for both the item’s header and content.

If you want to override a content template for one item, use the ContentTemplate.

See Also