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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

add items dynamically

Thread ID:

Created:

Updated:

Platform:

Replies:

142594 Feb 11,2019 05:01 PM UTC Feb 13,2019 06:55 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: Accordion
Andrew
Asked On February 11, 2019 05:01 PM UTC

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 [Syncfusion]
Replied On 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. 

Thanks, 
Christo

Andrew
Replied On 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?

Silambarasan I [Syncfusion]
Replied On 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"> 
    <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: 
 
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? 
 
Regards, 
Silambarasan 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;