1. Home
  2. Forum
  3. Angular - EJ 2
  4. Accordion doesn't collapse with treeview

Accordion doesn't collapse with treeview

Hello Syncfusion,

I ran into issue where i wanna place ejs-treeview component into ejs-accordion as items. I do that as shown below in the pictures. But the main problem appears that i can't collapse accordion anymore if there is treeview inside and i need this to be dynamic.

Query: How do i collapse accordion with ejs-treeview inside.


 
First of all i add accordion item with empty content. Then i create treeview with my data and append it to accordion item by using its Id

Result. I get result as wanted, but the collapse arrow doesn't work with treeview as accordion item


1 Reply
BM Balaji M Syncfusion Team May 2, 2018 02:57 PM UTC

Hi Domantas,  
  
Thanks for contacting Syncfusion support. 
 
We have checked your shared code snippets and we can able to replicate you reported this issue. On further analysis, we found that you have appended the TreeView data directly to the Accordion item. As per the Accordion current behavior, the data should be append to Accordion item’s content only. In your case, since there is no content div is created and the TreeView data appended to the accordion header and so the collapse functionality failed.  To resolve this, we suggest you to render your like the below options. 
 
Option 1: 
 
We have made some modification with your shared code. If the Accordion item is expanded, then the content div will be there and so we can render the Treeview . Please find the below code snippets. 
 
 
  this.accordion.addItem({ header: "AccordionHeader1", content: "<div id='acc'> </div>", expanded: true }, 0)  //set the content instead of leaving it empty and set expanded as true  
 
    var treeObj: any = new TreeView({ 
      fields: { dataSource: this.firsttreeview, id: "id", text: 'name' }, 
    }); 
    
    treeObj.appendTo("#" + this.accordion.element.childNodes[0].lastChild.lastChild.lastChild["id"]); // append the treeview object to the content div (i.e. acc) 
 
    treeObj.selecteNodes = [treeObj["rootData"][0].id] 
 
 
 
 
Option 2: 
 
The other component can be rendered with the use of provided Accordion events, such as clicked and expanding . Please find the below code snippets for rendering Treeview and Toolbar as content for Accordionitem . 
 
 
<ejs-accordion #accordion1 id="accordion1" (expanding)="expanded($event)"> 
 
  <e-accordionitems> 
    <e-accordionitem expanded='true' header='ASP.NET' content='<div id="treeDoc1"></div>'></e-accordionitem> 
    <e-accordionitem header='ASP.NET MVC' content='<div id="treeDoc2"></div>'></e-accordionitem> 
  </e-accordionitems> 
 
</ejs-accordion> 
 
 
  public expanded(e: any) {  
    if (e.isExpanded && [].indexOf.call(this.accordion1.items, e.item) === 0 && e.element.querySelector('#treeDoc1').childElementCount === 0) { 
      //Initialize TreeView component 
      let treeObj: TreeView = new TreeView({ 
        fields: { dataSource: this.firsttreeview, id: "id", text: 'name' }, 
        sortOrder: 'Ascending' 
      }); 
      //Render initialized TreeView component 
      treeObj.appendTo('#treeDoc1'); 
    } 
 
 
 
Please find the modified sample below for your reference. 
 
 
Note: We have documented this content in our Accordion how to section and this UG will be published in our upcoming Volume2 release. 
 
 
Please let us know if you need any further assistance. 
      
Regards, 
M. Balaji 


Loader.
Up arrow icon