@using Syncfusion.EJ2.Blazor.Navigations
<EjsAccordion DataSource="@AccordionItems" ModelType="@typeof(AccordionData)">
<AccordionTemplates>
<HeaderTemplate>
<div>@((context as AccordionData).EmployeeName)</div>
</HeaderTemplate>
<ItemTemplate>
@{
AccordionData ContextData = context as AccordionData;
<div>
<div><b>Employee ID: </b>@ContextData.EmployeeId</div>
<div><b>Designation: </b>@ContextData.Designation</div>
</div>
}
</ItemTemplate>
</AccordionTemplates>
</EjsAccordion>
@code{
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; }
}
}
@using Syncfusion.EJ2.Blazor.Navigations
<EjsAccordion DataSource="@AccordionItems" ModelType="AccordionModel">
<AccordionTemplates>
<HeaderTemplate>
<div>@((context as AccordionData).EmployeeName)</div>
</HeaderTemplate>
<ItemTemplate>
@{
AccordionData ContextData = context as AccordionData;
<div>
<div><b>Employee ID: </b>@ContextData.EmployeeId</div>
<div><b>Designation: </b>@ContextData.Designation</div>
</div>
}
</ItemTemplate>
</AccordionTemplates>
</EjsAccordion>
@code{
AccordionData AccordionModel = new AccordionData();
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; }
}
} |