Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
151302 | Feb 6,2020 09:03 AM UTC | Feb 7,2020 12:46 PM UTC | Blazor | 1 |
![]() |
Tags: Accordion |
@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; }
}
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.