Auto-select the new node

[Lucas]

Hi, exists a method to select a node?

I created a button to insert nodes to tree and I want to select the new node automatically. 

When I click on button to insert node, my code inserts a default node to sourceData, and refresh() the tree using the new sourceData.

Thanks.

[Christopher Issac Sunder K]

Hi Lucas, 

 

Greetings from Syncfusion support. 

 

To select the newly added node after inserting it, we need to specify a Boolean variable (i.e isSelected), set it to true and map that variable to the selected attribute of fields API. Here is the code snippet, 

 

// Render the TreeView by mapping its fields property with data source properties 

let treeObj: TreeView = new TreeView({ 

    fields: { dataSource: (dataSource as any).defaultData, id: 'id', text: 'name', child: 'subChild', selected: 'isSelected' } 

}); 

treeObj.appendTo('#tree'); 

 

document.getElementById("btn").onclick = (): void => { 

    let node = [ 

        { "id": "02-01-01", "name": "My photo.png", "isSelected": true }]; 

    treeObj.addNodes(node, "01-01", null, false); //adding the node to parent node with id 01-01 

} 

 

Please find the below sample for reference, 

https://stackblitz.com/edit/pahhn6-isqekq?file=index.ts 

 

Please check with the sample and get back to us if you require any further assistance. 

 

Thanks,
Christo 

[Lucas]

Hi, I tried but it didn't work and I have more questions:

1. How can I use the method addNodes to insert a node in tree root? The documentation says:
 "If target node is not specified, then the nodes are added as children of the given parentID or in the root level of TreeView."

var treeObject = new ej.navigations.TreeView({ fields: { dataSource: scope.infData, id: 'id', text: 'text', child: 'child', iconCss: 'icon', selected: 'isSelected' }, ...);

treeObj.addNodes(node, null,null, false); 

I tried the above code, but the tree don't shows my new node, I had to refresh the tree. But when I use the same method to insert a child node, specifying the parent Id, it works (auto refresh the tree).

This method don't select my new node using parent Id or not.

2. Have I turn off the last selected node flag (isSelected) to works?
I printed the sourceData and all nodes have the attribute isSelected = true.

[Ashokkumar Balasubramanian]

Hi Lucas, 

 

Query: To select the newly added node after inserting it, I tried but it didn't work. 

 

The reported problem may be occurring to not properly mapping the selected attribute in field property of TreeView or else improperly specify the corresponding newly added data’s (selected attribute). Could you please check our previously provided sample or below code block to ensure it? 

 

//selected attribute mapping field and newly added node data's selected field values should be same 

    let treeObj: TreeView = new TreeView({ 

        fields: { dataSource: (dataSource as any).defaultData , id: 'id', text: 'name', child: 'subChild', selected: 'isSelected' } 

    }); 

    let node = [ 

        { "id": "02-01-01", "name": "Root Node", "isSelected": true }]; 

    treeObj.addNodes(node, null, null, false); //adding the node to Root Level 

 

 

Query: Add the data to root level 

 

If you are not specifying the value for second argument in addNodes method, created node will be added in root level otherwise it will be added based specified parent node. Could you please ensure whether you have specified any parent id attribute in newly added data?  

 

Sample: https://stackblitz.com/edit/pahhn6-pbbbxi?file=index.ts 

 

Query: Have I turn off the last selected node flag (isSelected) to works? 

 

Yes, it’s worked. If you want to select the node, you can specify the isSelected attribute value, otherwise you don’t need to specify the isSelected attributes in dataSource. 

 

Still you are facing the same problems, please share the below details. 

 

a.     Initial time treeview bounded data’s with TreeView rendering code block 

b.     Newly added node’s data with corresponding code block. 

c.      Screenshots or video of the problems 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[Lucas]

Thanks a lot!

The problem was because I was trying to insert nodes passing only the node object instead of an array of nodes.

[Christopher Issac Sunder K]

Hi Lucas, 

We are glad to hear that your issue has been resolved. Please get back to us if you require any further assistance. 

Thanks,
Christo