DxAccordionItem.ContentTemplate Property

Specifies a template for the Accordion item’s content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment<IAccordionItemInfo>	The item content template.

Remarks

You can define ContentTemplate to display custom content in an Accordion item. 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 uses the DxFormLayout component to show employee information:

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

<DxAccordion>
    <Items>
        @foreach (var item in DataSource) {
            <DxAccordionItem Text=@(item.FirstName + ' ' + item.LastName)>
                <ContentTemplate Context=info>
                    <div class="m-2">
                        <DxFormLayout CssClass="w-100">
                            <DxFormLayoutItem Caption="Title:">
                                <DxTextBox Text="@(item.Title)" />
                            </DxFormLayoutItem>
                            <DxFormLayoutItem Caption="Hire Date:">
                                <DxDateEdit Date="@(item.HireDate)" />
                            </DxFormLayoutItem>
                            <DxFormLayoutItem Caption="Birth Date:">
                                <DxDateEdit Date="@(item.BirthDate)" />
                            </DxFormLayoutItem>
                            <DxFormLayoutItem Caption="Poisition:">
                                <DxTextBox Text="@(item.Position)" />
                            </DxFormLayoutItem>
                        </DxFormLayout>
                    </div>
                </ContentTemplate>
            </DxAccordionItem>
        }
    </Items>
</DxAccordion>

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

You can also specify DevExpress.Blazor.DxAccordionItem.HeaderTextTemplate for the item’s header or Template for both the item’s header and content.

If you want to apply a content template to all items, use the ItemContentTemplate.