How to set selection to a node by programatically?

[Rahul V Reji]

I want to set a node as selected on startup as well as when i call certain functions. How do i do this?

This is my tree structure.

I want to set selection using the NodeId.

this.treeFields = {

dataSource: this.data,

id: 'NodeId',

text: 'NodeHeader',

child: 'NodeChild',

};

Thank you.

[Ashokkumar Balasubramanian]

Hi Rahul V Reji, 

 

Greetings from Syncfusion support. 

 

For this scenario, you can specify the selected attributes value in fields property of TreeView component to achieve it. Please check the below code block. 

 

public countries: Object[] = [ 

        { id: 1, name: 'Australia', hasChild: true, expanded: true }, 

        { id: 2, pid: 1, name: 'New South Wales', isSelected: true } 

]; 

public field: Object = { dataSource: this.countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', selected: 'isSelected' }; 

 

Also, if you want to specify the selected nodes on certain actions, you can specify the corresponding tree node id’s in selectedNodes property. Please check the below code block. 

 

this.tree.selectedNodes = ['1']; 

 

Sample: https://stackblitz.com/edit/angular-xq53ak?file=src/app/app.component.ts 

 

Please check the above sample and get back to us, if you need any further assistance on this. 

 

Regards, 

Ashokkumar B. 

[Rahul V Reji]

I am getting this error when i'm trying to use this.tree.selectedNodes = ['1']; .

"ERROR TypeError: Cannot set property 'selectedNodes' of undefined".

I want to keep the first node of my tree selected initially. I am using the following code.

public callTreeAPI(): void {

this.dashboardService.getData()

.subscribe(

(data: any) => {

setTimeout(() => {

this.data = data.Data;

console.log(this.data);

this.initializeTOC();

this.getTreeDataAPI(this.data[0].NodeId);

this.treeView.selectedNodes=[this.data[0].NodeId];

}, 1000);

}, // success path

error => this.error = error // error path

);

}

getTreeDataAPI() takes a nodeId as argument and returns the node details.

[Ashokkumar Balasubramanian]

Hi Rahul V Reji, 

 

Thank you for providing the code blocks. 

 

The reported problem due to on accessing the TreeView components instance in your mentioned code block. Could you please ensure whether, you are properly creating the component instance in TreeView component and able the access this component instance in mentioned code blocks? 

 

If you are unable to access TreeView component instance in mentioned code block. Please store the TreeView instance in another variable and use that variable to mentioned code block. Please refer the below code block. 

 

    selectNode(){ 

        var treeInstance = this.tree; 

        setTimeout(() => { 

            this.data = this.countries; 

            //If you are unable to access the TreeView instance 

            treeInstance.selectedNodes = [this.data[4].id]; 

        }, 1000); 

    } 

 

Sample: https://stackblitz.com/edit/angular-a4wc1t?file=src/app/app.component.ts 

 

To know more details about creating instance in Angular, please refer the below documentation. 

 

https://stackoverflow.com/questions/47535780/angular-5-adding-a-new-instance-of-a-component 

 

Kindly check the above provided information’s and revert us, if you need any further assistance. 

 

Regards, 

Ashokkumar B. 

[Rahul V Reji]

Thanks a lot. It's working now. 

Cheers. :)

[Ashokkumar Balasubramanian]

Hi Rahul V Reji,  

 

We are glad to hear the problem has been resolved. Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B.