Expand All and Collapse All Controls

[Kumail Jawadi]

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]

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(); 

} 

Sample:
https://stackblitz.com/edit/angular-414dbr?file=default.html 

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

Thanks, 

Christo

[Kumail Jawadi]

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]

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: 

https://stackblitz.com/edit/angular-414dbr-2udba3?file=default.component.ts  

 

Please get back to us if you require any further assistance on this. 

 

Regards, 

Silambarasan 

[Kumail Jawadi]

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]

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: 

https://stackblitz.com/edit/angular-414dbr-dqevan?file=default.component.ts 

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

Regards,
Deepa L. 

[Kumail Jawadi]

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]

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]

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]

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. 

 

https://www.syncfusion.com/Account/Logon?ReturnUrl=/support/directtrac 

 

 

Regards, 

Silambarasan