Contents
- Dynamically adding nodes
- Dynamically removing nodes
- Dynamically update nodes
- Dynamically refresh nodes
- Dynamically move nodes
Having trouble getting help?
Contact Support
Contact Support
Nodes manipulation in TreeView control
30 Jan 202524 minutes to read
The TreeView control provides essential methods for dynamically managing nodes, offering the ability to create a highly interactive and customizable tree structure.
These methods provide the flexibility to add, remove, update, refresh, or relocate nodes as needed, facilitating a fully interactive and customizable TreeView structure.
Dynamically adding nodes
The addNodes method of TreeView allows you to insert new nodes at designated positions within the TreeView by passing the necessary node information. You can add both parent and child nodes by specifying their target ID.
<div id='treeparent'>
<ejs-treeview id="treedata">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields>
</ejs-treeview>
</div>
<ejs-button id="button1" cssClass="e-primary inline-element right" content="Add parent"></ejs-button>
<ejs-button id="button2" cssClass="e-primary inline-element right" content="Add child"></ejs-button>
<script>
document.getElementById("button1").addEventListener('click', function () {
var treeObj = document.getElementById('treedata').ej2_instances[0];
// add nodes to the root level
treeObj.addNodes([
{ id: 26, name: 'New Parent' },
{ id: 27, pid: 26, name: 'New Child' },
]);
});
document.getElementById("button2").addEventListener('click', function () {
var treeObj = document.getElementById('treedata').ej2_instances[0];
// add nodes to the existing parent node
treeObj.addNodes([{ id: 29, pid: 1, name: 'New Child1' }], 1);
});
</script>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
</style>public IActionResult AddNode()
{
List<object> treedata = new List<object>();
treedata.Add(new
{
id = 1,
name = "Discover Music",
hasChild = true,
expanded = true
});
treedata.Add(new
{
id = 2,
pid = 1,
name = "Hot Singles",
});
treedata.Add(new
{
id = 3,
pid = 1,
name = "Rising Artists"
});
treedata.Add(new
{
id = 4,
pid = 1,
name = "Live Music"
});
treedata.Add(new
{
id = 5,
hasChild = true,
name = "Sales and Events",
});
treedata.Add(new
{
id = 6,
pid=5,
name = "100 Albums - $5 Each",
});
treedata.Add(new
{
id = 7,
pid = 5,
name = "Hip-Hop and R&B Sale"
});
treedata.Add(new
{
id = 8,
pid = 5,
name = "CD Deals"
});
treedata.Add(new
{
id = 10,
hasChild = true,
name = "Categories"
});
treedata.Add(new
{
id = 11,
pid=10,
name = "Bestselling Albums",
});
treedata.Add(new
{
id = 12,
pid = 10,
name = "New Releases"
});
treedata.Add(new
{
id = 13,
pid = 10,
name = "Bestselling Songs"
});
treedata.Add(new
{
id = 14,
hasChild = true,
name = "MP3 Albums"
});
treedata.Add(new
{
id = 15,
pid = 14,
name = "Rock"
});
treedata.Add(new
{
id = 16,
name = "Gospel",
pid = 14,
});
treedata.Add(new
{
id = 17,
pid = 14,
name = "Latin Music"
});
treedata.Add(new
{
id = 18,
pid = 14,
name = "Jazz"
});
treedata.Add(new
{
id = 19,
hasChild = true,
name = "More in Music"
});
treedata.Add(new
{
id = 20,
pid = 19,
name = "Music Trade-In"
});
treedata.Add(new
{
id = 21,
name = "Redeem a Gift Card",
pid = 19
});
treedata.Add(new
{
id = 22,
pid = 19,
name = "Band T-Shirts"
});
ViewBag.dataSource = treedata;
return View();
}The output will look like the image below:
Dynamically removing nodes
The TreeView removeNodes method lets you remove multiple nodes by providing their IDs. You can remove both parent and child nodes.
<div id='treeparent'>
<ejs-treeview id="treedata">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields>
</ejs-treeview>
</div>
<ejs-button id="button1" cssClass="e-primary inline-element right" content="Remove parent"></ejs-button>
<ejs-button id="button2" cssClass="e-primary inline-element right" content="Remove child"></ejs-button>
<script>
document.getElementById("button1").addEventListener('click', function () {
var treeObj = document.getElementById('treedata').ej2_instances[0];
// The node with id 14 is removed from the TreeView control.
treeObj.removeNodes(['14']);
});
document.getElementById("button2").addEventListener('click', function () {
var treeObj = document.getElementById('treedata').ej2_instances[0];
// The nodes with id 3 and 4 are removed from the TreeView control.
treeObj.removeNodes(['3', '4']);
});
</script>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
</style>public IActionResult RemoveNode()
{
List<object> treedata = new List<object>();
treedata.Add(new
{
id = 1,
name = "Discover Music",
hasChild = true,
expanded = true
});
treedata.Add(new
{
id = 2,
pid = 1,
name = "Hot Singles",
});
treedata.Add(new
{
id = 3,
pid = 1,
name = "Rising Artists"
});
treedata.Add(new
{
id = 4,
pid = 1,
name = "Live Music"
});
treedata.Add(new
{
id = 5,
hasChild = true,
name = "Sales and Events",
});
treedata.Add(new
{
id = 6,
pid=5,
name = "100 Albums - $5 Each",
});
treedata.Add(new
{
id = 7,
pid = 5,
name = "Hip-Hop and R&B Sale"
});
treedata.Add(new
{
id = 8,
pid = 5,
name = "CD Deals"
});
treedata.Add(new
{
id = 10,
hasChild = true,
name = "Categories"
});
treedata.Add(new
{
id = 11,
pid=10,
name = "Bestselling Albums",
});
treedata.Add(new
{
id = 12,
pid = 10,
name = "New Releases"
});
treedata.Add(new
{
id = 13,
pid = 10,
name = "Bestselling Songs"
});
treedata.Add(new
{
id = 14,
hasChild = true,
name = "MP3 Albums"
});
treedata.Add(new
{
id = 15,
pid = 14,
name = "Rock"
});
treedata.Add(new
{
id = 16,
name = "Gospel",
pid = 14,
});
treedata.Add(new
{
id = 17,
pid = 14,
name = "Latin Music"
});
treedata.Add(new
{
id = 18,
pid = 14,
name = "Jazz"
});
treedata.Add(new
{
id = 19,
hasChild = true,
name = "More in Music"
});
treedata.Add(new
{
id = 20,
pid = 19,
name = "Music Trade-In"
});
treedata.Add(new
{
id = 21,
name = "Redeem a Gift Card",
pid = 19
});
treedata.Add(new
{
id = 22,
pid = 19,
name = "Band T-Shirts"
});
ViewBag.dataSource = treedata;
return View();
}The output will look like the image below:
Dynamically update nodes
The TreeView control has the updateNode method, which allows you to change a specific node’s text by providing its target (either the node ID or element) and the new text. To enable text editing, set the allowEditing property to true, ensuring correct functionality of the updateNode method.
<div id='treeparent'>
<ejs-treeview id="treedata" allowEditing="true">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields>
</ejs-treeview>
</div>
<ejs-button id="button1" cssClass="e-primary inline-element right" content="Update node"></ejs-button>
<script>
document.getElementById("button1").addEventListener('click', function () {
var treeObj = document.getElementById('treedata').ej2_instances[0];
// The node with id 4 is updated with new text from the TreeView control.
treeObj.updateNode('4', 'Node updated');
});
</script>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
</style>public IActionResult UpdateNode()
{
List<object> treedata = new List<object>();
treedata.Add(new
{
id = 1,
name = "Discover Music",
hasChild = true,
expanded = true
});
treedata.Add(new
{
id = 2,
pid = 1,
name = "Hot Singles",
});
treedata.Add(new
{
id = 3,
pid = 1,
name = "Rising Artists"
});
treedata.Add(new
{
id = 4,
pid = 1,
name = "Live Music"
});
treedata.Add(new
{
id = 5,
hasChild = true,
name = "Sales and Events",
});
treedata.Add(new
{
id = 6,
pid=5,
name = "100 Albums - $5 Each",
});
treedata.Add(new
{
id = 7,
pid = 5,
name = "Hip-Hop and R&B Sale"
});
treedata.Add(new
{
id = 8,
pid = 5,
name = "CD Deals"
});
treedata.Add(new
{
id = 10,
hasChild = true,
name = "Categories"
});
treedata.Add(new
{
id = 11,
pid=10,
name = "Bestselling Albums",
});
treedata.Add(new
{
id = 12,
pid = 10,
name = "New Releases"
});
treedata.Add(new
{
id = 13,
pid = 10,
name = "Bestselling Songs"
});
treedata.Add(new
{
id = 14,
hasChild = true,
name = "MP3 Albums"
});
treedata.Add(new
{
id = 15,
pid = 14,
name = "Rock"
});
treedata.Add(new
{
id = 16,
name = "Gospel",
pid = 14,
});
treedata.Add(new
{
id = 17,
pid = 14,
name = "Latin Music"
});
treedata.Add(new
{
id = 18,
pid = 14,
name = "Jazz"
});
treedata.Add(new
{
id = 19,
hasChild = true,
name = "More in Music"
});
treedata.Add(new
{
id = 20,
pid = 19,
name = "Music Trade-In"
});
treedata.Add(new
{
id = 21,
name = "Redeem a Gift Card",
pid = 19
});
treedata.Add(new
{
id = 22,
pid = 19,
name = "Band T-Shirts"
});
ViewBag.dataSource = treedata;
return View();
}The output will look like the image below:
Dynamically refresh nodes
The refreshNode method in TreeView allows you to update the content of a specific node by providing its target and the new details. To retrieve the current details of the node, use the getTreeData method in conjunction with the node’s ID. The refreshNode method refreshes a designated node within the TreeView.
<div id='treeparent'>
<ejs-treeview id="treedata">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields>
</ejs-treeview>
</div>
<ejs-button id="button1" cssClass="e-primary inline-element right" content="Refresh node"></ejs-button>
<script>
document.getElementById("button1").addEventListener('click', function () {
var treeObj = document.getElementById('treedata').ej2_instances[0];
var nodeData = treeObj.getTreeData('4');
//Update the name text for node having id 4.
nodeData[0].name = 'Node refreshed';
// Refresh the updated data.
treeObj.refreshNode('4', nodeData);
});
</script>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
</style>public IActionResult RefreshNode()
{
List<object> treedata = new List<object>();
treedata.Add(new
{
id = 1,
name = "Discover Music",
hasChild = true,
expanded = true
});
treedata.Add(new
{
id = 2,
pid = 1,
name = "Hot Singles",
});
treedata.Add(new
{
id = 3,
pid = 1,
name = "Rising Artists"
});
treedata.Add(new
{
id = 4,
pid = 1,
name = "Live Music"
});
treedata.Add(new
{
id = 5,
hasChild = true,
name = "Sales and Events"
});
treedata.Add(new
{
id = 6,
pid=5,
name = "100 Albums - $5 Each"
});
treedata.Add(new
{
id = 7,
pid = 5,
name = "Hip-Hop and R&B Sale"
});
treedata.Add(new
{
id = 8,
pid = 5,
name = "CD Deals"
});
treedata.Add(new
{
id = 10,
hasChild = true,
name = "Categories"
});
treedata.Add(new
{
id = 11,
pid=10,
name = "Bestselling Albums",
});
treedata.Add(new
{
id = 12,
pid = 10,
name = "New Releases"
});
treedata.Add(new
{
id = 13,
pid = 10,
name = "Bestselling Songs"
});
treedata.Add(new
{
id = 14,
hasChild = true,
name = "MP3 Albums"
});
treedata.Add(new
{
id = 15,
pid = 14,
name = "Rock"
});
treedata.Add(new
{
id = 16,
name = "Gospel",
pid = 14
});
treedata.Add(new
{
id = 17,
pid = 14,
name = "Latin Music"
});
treedata.Add(new
{
id = 18,
pid = 14,
name = "Jazz"
});
treedata.Add(new
{
id = 19,
hasChild = true,
name = "More in Music",
});
treedata.Add(new
{
id = 20,
pid = 19,
name = "Music Trade-In",
});
treedata.Add(new
{
id = 21,
name = "Redeem a Gift Card",
pid = 19
});
treedata.Add(new
{
id = 22,
pid = 19,
name = "Band T-Shirts",
});
ViewBag.dataSource = treedata;
return View();
}The output will look like the image below:
Dynamically move nodes
The moveNodes method in TreeView allows you to relocate a node by defining the node to be moved, the target location, and the index within that target. It facilitates the repositioning of nodes within the same TreeView based on the specified target.
<div id='treeparent'>
<ejs-treeview id="treedata">
<e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields>
</ejs-treeview>
</div>
<ejs-button id="button1" cssClass="e-primary inline-element right" content="Move node"></ejs-button>
<script>
document.getElementById("button1").addEventListener('click', function () {
var treeObj = document.getElementById('treedata').ej2_instances[0];
// The node with id 2 is moved to the parent node with id 3 to the index of 1.
treeObj.moveNodes(['2'], '3', 1);
});
</script>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
</style>public IActionResult MoveNode()
{
List<object> treedata = new List<object>();
treedata.Add(new
{
id = 1,
name = "Discover Music",
hasChild = true,
expanded = true
});
treedata.Add(new
{
id = 2,
pid = 1,
name = "Hot Singles",
});
treedata.Add(new
{
id = 3,
pid = 1,
name = "Rising Artists"
});
treedata.Add(new
{
id = 4,
pid = 1,
name = "Live Music"
});
treedata.Add(new
{
id = 5,
hasChild = true,
name = "Sales and Events",
});
treedata.Add(new
{
id = 6,
pid=5,
name = "100 Albums - $5 Each",
});
treedata.Add(new
{
id = 7,
pid = 5,
name = "Hip-Hop and R&B Sale"
});
treedata.Add(new
{
id = 8,
pid = 5,
name = "CD Deals"
});
treedata.Add(new
{
id = 10,
hasChild = true,
name = "Categories"
});
treedata.Add(new
{
id = 11,
pid=10,
name = "Bestselling Albums",
});
treedata.Add(new
{
id = 12,
pid = 10,
name = "New Releases"
});
treedata.Add(new
{
id = 13,
pid = 10,
name = "Bestselling Songs"
});
treedata.Add(new
{
id = 14,
hasChild = true,
name = "MP3 Albums"
});
treedata.Add(new
{
id = 15,
pid = 14,
name = "Rock"
});
treedata.Add(new
{
id = 16,
name = "Gospel",
pid = 14,
});
treedata.Add(new
{
id = 17,
pid = 14,
name = "Latin Music"
});
treedata.Add(new
{
id = 18,
pid = 14,
name = "Jazz"
});
treedata.Add(new
{
id = 19,
hasChild = true,
name = "More in Music"
});
treedata.Add(new
{
id = 20,
pid = 19,
name = "Music Trade-In"
});
treedata.Add(new
{
id = 21,
name = "Redeem a Gift Card",
pid = 19
});
treedata.Add(new
{
id = 22,
pid = 19,
name = "Band T-Shirts"
});
ViewBag.dataSource = treedata;
return View();
}The output will look like the image below:
