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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Expand All and Collapse All Controls

Thread ID:

Created:

Updated:

Platform:

Replies:

142295 Jan 25,2019 12:14 PM UTC Feb 4,2019 11:27 AM UTC Angular - EJ 2 9
loading
Tags: Treeview
Kumail Jawadi
Asked On January 25, 2019 12:14 PM UTC

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



Christopher Issac Sunder K [Syncfusion]
Replied On 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

Kumail Jawadi
Replied On 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

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


Kumail Jawadi
Replied On 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

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


Kumail Jawadi
Replied On 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'];
}


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


Kumail Jawadi
Replied On 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

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


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

Live Chat Icon For mobile
Live Chat Icon