1. Home
  2. Forum
  3. Angular - EJ 2
  4. Expand All and Collapse All Controls

Expand All and Collapse All Controls

Hi

I'd be very grateful if you could help with implementing Expand All and Collapse All controls/buttons on top of the treeview.

Best Regards,
Kumail



9 Replies
CI Christopher Issac Sunder K Syncfusion Team January 28, 2019 09:51 AM UTC

Hi Kumail, 

Thank you for contacting Syncfusion support. 

We checked your requirement "Implementing Expand All and Collapse All controls/buttons on top of the treeview". We have prepared sample for achieving your requirement by using expandAll and collapseAll methods on button click. Please check the below code block and sample, 

<button ejs-button (click)="expandAll()">Expand All nodes</button> 
<button ejs-button (click)="collapseAll()">Collapse All nodes</button> 
 
public expandAll() 
{ 
    this.treeObj.expandAll(); 
} 
public collapseAll() 
{ 
    this.treeObj.collapseAll(); 
} 


Please check it and let us know if you have any concerns. 

Thanks, 
Christo

KJ Kumail Jawadi January 28, 2019 04:54 PM UTC

Hi Christo,

Many thanks for your response. This is to let you know that one of our requirements has been achieved. I'm wondering if you could also help me with the second requirement.

I need a method so that I could pass a certain node id and make it programmatically selected and expanded.

My best,
Kumail

SI Silambarasan I Syncfusion Team January 29, 2019 09:57 AM UTC

Hi Kumail, 
 
Thanks for your update. 
 
We have checked your requirement “To programmatically expand and select the particular node in TreeView” and it can be achievable by using expandAll method and selectedNodes property in TreeView.  
 
If you pass the id of tree node to expandAll method, it's expand the corresponding tree node only in TreeView and also, you can select the node by setting the id to selectedNodes property.  
 
Please refer below code example that expand & select the tree node that has id as ‘02’. 
 
 
public expandNode() {
     this.treeObj.expandAll('02');
     this.treeObj.selectedNodes = '02';
} 
 
  

Stackblitz demo sample: 
 
Please get back to us if you require any further assistance on this. 
 
Regards, 
Silambarasan 


KJ Kumail Jawadi January 29, 2019 12:32 PM UTC

Hi Silambarasan,

Thank you for your reply. I am wondering if I can select a node or expand it inside ngOnInit() with the following code: 
this.treeObj.selectedNodes = ['id'] // from route param;

I tried, but the treeObj at that time seems to be undefined.

My best,
Kumail

DL Deepa Loganathan Syncfusion Team January 30, 2019 01:01 PM UTC


Hi Kumail, 
 
Yes, you can select or expand a tree node inside ngOnInit() lifecycle event using selectedNodes and expandedNodes properties. While checking with the code samples provided in your update, we suspect that the ViewChild instance of Treeview is not properly declared in Component. So kindly cross check in your application if the instance is accessible inside the component. 
 
For your convenience, we have prepared a sample based on your requirement. Here, we have added the node with id '03' to selectedNodes and expandedNodes properties. So, when tree is rendered, the node will be selected and expanded. Please check below code block and sample, 
 
ngOnInit(){ 
this.treeObj.expandedNodes = '03'; 
this.treeObj.selectedNodes = '03'; 
} 
 
 
Sample: 

Kindly get back to us if you have any further concerns. 

Regards,
Deepa L. 


KJ Kumail Jawadi January 30, 2019 01:20 PM UTC

Hi Deepa,

Thank you for your reply. I've already checked that way but no luck and I've been facing bellow error:
"ERROR TypeError: Cannot set property 'expandedNodes' of undefined"
I'm dealing with remote data which comes from an API endpoint. I've already tried DataManager as per the documentation but it throws the same error.

This is my code:
@ViewChild('docCategoriesTree')
public treeObj: TreeViewComponent;

public treeFields: Object = {
dataSource: null,
id: 'value',
text: 'text',
child: 'children'
};

constructor(private _docsService: Documents2Service) {
}


ngOnInit(): void {
this._docsService.getDocumentCategories().subscribe((data: Object[]) => {
this.treeFields['dataSource'] = data.map(item => new Object(item));
});

this.treeObj.expandedNodes = ['2'];
this.treeObj.selectedNodes = ['2'];
}


SI Silambarasan I Syncfusion Team January 31, 2019 06:29 PM UTC

Hi Kumail, 
 
We have analyzed your issue "ERROR TypeError: Cannot set property 'expandedNodes' of undefined" in ngOnInit() function and we suspect it is because treeview instance is not defined properly. Could you please ensure once if you have accessed the treeview component properly using @ViewChild. Please refer to below code block, 
 
HTML 
 
<ejs-treeview #default id="default" fields='field'></ejs-treeview>
Here, #default is the template reference used to access TreeView component using ViewChild 
 
 
TS 
 
import { ViewChild }  
from '@angular/core';
@ViewChild('default') // 'default' is the Template reference defined for TreeView in html page
public treeObj: TreeViewComponent;
//Now you can access tree instance like below,
ngOnInit()  
{ this.treeObj.expandedNodes = ['03']; } 
 
 
Please check the sample that we have provided in our last update and get back to us with more information if still your issue persists. 
 
Regards, 
Silambarasan 


KJ Kumail Jawadi February 1, 2019 12:40 PM UTC

Dear Silambarasan,

Thank you for your email. I've already accessed treeview component properly.

HTML:
<ejs-treeview #docCategoriesTree id="docCategoriesTree" [fields]="treeFields"
*ngIf="treeFields.dataSource" (nodeSelected)="getSelectedNode($event)"></ejs-treeview>

TypeScript:
@ViewChild('docCategoriesTree')
public treeObj: TreeViewComponent;

public treeFields: Object = {
dataSource: null,
id: 'value',
text: 'text',
child: 'children'
};

constructor(private _docsService: Documents2Service) {
}


ngOnInit(): void {
this._docsService.getDocumentCategories().subscribe((data: Object[]) => {
this.treeFields['dataSource'] = data.map(item => new Object(item));
});

this.treeObj.expandedNodes = ['2'];
this.treeObj.selectedNodes = ['2'];
}

Thank you and awaiting your prompt response.

My best,
Kumail

SI Silambarasan I Syncfusion Team February 4, 2019 11:27 AM UTC

Hi Kumail, 
 
Thanks for your update. 
 
We would like to set up a web meeting to look into this issue to provide solution. So, we have created a new support incident under your Direct-Trac account. Please log on to our support website to check for further updates. 
 
 
 
Regards, 
Silambarasan 


Loader.
Up arrow icon