add items dynamically

[Andrew]

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. 

[Christopher Issac Sunder K]

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.   

https://jsplayground.syncfusion.com/h5gjfdqr 

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

Thanks, 

Christo

[Andrew]

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?

[Silambarasan I]

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

    <e-accordion-accordionitems> 

        //... 

    </e-accordion-accordionitems> 

</ejs-accordion> 

 

<script> 

 

    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 

 

        //or 

 

        //Direct access 

        //document.getElementById("defaultAccordion").ej2_instances[0].addItem(items); 

 

 

    }); 

 

 

</script> 

 

 

 

Sample Link: 

http://www.syncfusion.com/downloads/support/forum/142594/ze/AccordionDemo-644597316 

 

Refer the below API link (to get component instance): 

https://ej2.syncfusion.com/javascript/documentation/api/base/staticFunctions/#getcomponent 

 

 

Could you please check the above information and get back to us If you need further assistance? 

 

Regards, 

Silambarasan