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

add items dynamically

Hello Community,

I'm looking for a way to add items (client-side) to an already rendered accordion. Is this possible using the EJ2 javascript library?

Thank you for your assistance. 

3 Replies

CI Christopher Issac Sunder K Syncfusion Team February 12, 2019 10:01 AM UTC

Hi  Andrew,  
Thanks for contacting Syncfusion support.  

Yes, it is possible. Based on your requirement of dynamic accordion item addition in the client side, we suggest you to add the item as item model using the addItem public method. Please find the below code snippet for more reference. 

public clicktoadd(e) { 
    // give the item as item model with header and content property  
    var items = { header: 'NewHeader', content: 'NewContentAdded' };  
    this.acrdnInstance.addItem(items); // add the item using addItem 

We have also prepared a sample for your reference below.   

Please check the above shared details and let us know if you need any further assistance. 


AN Andrew February 12, 2019 04:28 PM UTC

Hey Christo,

My accordion is already rendered. I'm not creating it in JavaScript, I'm using a Tag Helper. Is there a way to access this already rendered accordion via ej_instances?

SI Silambarasan I Syncfusion Team February 13, 2019 06:55 AM UTC

Hi Andrew, 
Thanks for your update. 
Yes, we can access our EJ2 Accordion component after rendered using its instance as like in the below code example. For your reference, we have prepared the sample in Core application that demonstrate your requirement. 
<ejs-button id="addBtnElem" content="click to add"></ejs-button> 
<ejs-accordion id="defaultAccordion"> 
    document.getElementById("addBtnElem").addEventListener('click', function () { 
        var accordion, items = { header: 'NewHeader', content: 'NewContentAdded' }; // give the item as item model with header and content property 
        //Recommended way to get instance of EJ2 component. 
        accordion = ej.base.getComponent(document.getElementById("defaultAccordion"), "accordion"); 
        accordion.addItem(items); // add the item using addItem 
        //Direct access 
Sample Link: 
Refer the below API link (to get component instance): 
Could you please check the above information and get back to us If you need further assistance? 

Live Chat Icon For mobile
Up arrow icon