Search results

Data binding in Blazor Accordion component

Accordion component provides an option to get accordion items from the local data. It can be done through DataSource property. The DataSource property supports list of objects.

You can use HeaderTemplate and ItemTemplate properties to render accordion header and content respectively.

If you use DataSource property, It is mandatory to define HeaderTemplate and ContentTemplate to render accordion header and content. Accordion only supports the local data for data binding.

The below sample explains how to initialize accordion items through DataSource and templates.

@using Syncfusion.Blazor.Navigations

<SfAccordion DataSource="@AccordionItems">
            <div>@((context as AccordionData).EmployeeName)</div>
                AccordionData ContextData = context as AccordionData;
                    <div><b>Employee ID: </b>@ContextData.EmployeeId</div>
                    <div><b>Designation: </b>@ContextData.Designation</div>

    List<AccordionData> AccordionItems = new List<AccordionData>()
        new AccordionData
        EmployeeId = 1,
        EmployeeName = "Laura Callahan",
        Designation = "Product Manager",
        new AccordionData
        EmployeeId = 3,
        EmployeeName = "Andrew Fuller",
        Designation = "Team Lead",
        new AccordionData
        EmployeeId = 4,
        EmployeeName = "Anne Dodsworth",
        Designation = "Developer"
        new AccordionData
        EmployeeId = 5,
        EmployeeName = "Nancy Davolio",
        Designation = "Product Manager"

    public class AccordionData
        public string EmployeeName { get; set; }
        public int EmployeeId { get; set; }
        public string Designation { get; set; }

Output be like the below.

Load Accordion items using datasource