We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to customize Accordion header

Is it possible to place Badge control in Accordion header?

Do we have header template for Accordion

1 Reply

RV Ravikumar Venkatesan Syncfusion Team March 27, 2023 06:52 PM UTC

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:


<ejs-accordion id="defaultAccordion">


        <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>



<div id="mvc">ASP.NET MVC<span class="e-badge e-badge-primary">New</span></div>

Using headerTemplate property with Accordion dataSource:


<ejs-accordion id="templateAccordion" dataSource="@Model.items" headerTemplate="#header" itemTemplate="#content">



<script type="text/x-template" id="header">

    <div>${header}<span class="e-badge e-badge-primary">${badgeContent}</span></div>


<script type="text/x-template" id="content">




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; }




Ravikumar Venkatesan

Attachment: ej2coreaccordionheadertemplate_db6bc3d9.zip

Live Chat Icon For mobile
Up arrow icon