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

Auto-select the new node

Thread ID:





145392 Jun 19,2019 08:06 PM UTC Jun 26,2019 01:23 PM UTC JavaScript - EJ 2 5
Tags: TreeView
Asked On June 19, 2019 08:06 PM UTC

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.


Christopher Issac Sunder K [Syncfusion]
Replied On June 20, 2019 11:51 AM UTC

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' } 
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, 
Please check with the sample and get back to us if you require any further assistance. 

Replied On June 21, 2019 11:05 AM UTC

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 [Syncfusion]
Replied On June 24, 2019 10:25 AM UTC

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?  
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. 
Ashokkumar B. 

Replied On June 25, 2019 02:59 PM UTC

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 [Syncfusion]
Replied On June 26, 2019 01:23 PM UTC

Hi Lucas, 

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



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