BoldDeskWe are launching BoldDesk on Product Hunt soon. Learn more & follow us.
Is it possible to place Badge control in Accordion header?
Do we have header template for Accordion
Hi Mahesh,
You can add badge control in the Accordion header with help of the accordion item header property or the headerTemplate property of the Accordion as shown in the below code snippet.
Using header property:
[index.cshtml]
<ejs-accordion id="defaultAccordion"> <e-accordion-accordionitems> <e-accordion-accordionitem expanded="true" header="ASP.NET<span class='e-badge e-badge-primary'>New</span>" content="Microsoft ASP.NET"></e-accordion-accordionitem> <e-accordion-accordionitem header="#mvc" content="The Model-View-Controller"></e-accordion-accordionitem> </ejs-accordion>
<div id="mvc">ASP.NET MVC<span class="e-badge e-badge-primary">New</span></div> |
Using headerTemplate property with Accordion dataSource:
[index.cshtml]
<ejs-accordion id="templateAccordion" dataSource="@Model.items" headerTemplate="#header" itemTemplate="#content"> </ejs-accordion>
<script type="text/x-template" id="header"> <div>${header}<span class="e-badge e-badge-primary">${badgeContent}</span></div> </script> <script type="text/x-template" id="content"> <div>${content}</div> </script> |
[index.cshtml.cs]
namespace ej2_core_app.Pages { public class IndexModel : PageModel { private readonly ILogger<IndexModel> _logger; public List<AccordionItems> items = new List<AccordionItems> { new AccordionItems{ header = "ASP.NET", content = "ASP.NET Core content", badgeContent = "New" }, new AccordionItems{ header = "ASP.NET MVC", content = "ASP.NET MVC content", badgeContent = "Updated" }, new AccordionItems{ header = "JavaScript", content = "JavaScript content", badgeContent = "Old" } }; public IndexModel(ILogger<IndexModel> logger) { _logger = logger; }
public void OnGet() { } } public class AccordionItems { public string? header { get; set; } public string? content { get; set; } public string? badgeContent { get; set; } } } |
Regards,
Ravikumar Venkatesan