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'>
<div>
@Html.EJS().TreeView("treedata").Fields(field=>
field.Id("id").ParentID("pid").Text("name").HasChildren("hasChild").Expanded("expanded")
.DataSource(ViewBag.dataSource)).Render()
@Html.EJS().Button("button1").Content("Add Parent").Render()
@Html.EJS().Button("button2").Content("Add Child").Render()
</div>
</div>
<div id="display"></div>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#display {
max-width: 500px;
margin: auto;
padding: 10px;
}
</style>
<script>
var treeObj = document.getElementById('treedata').ej2_instances[0];
document.getElementById("button1").addEventListener('click', function () {
// 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 () {
// add nodes to the existing parent node
treeObj.addNodes([{ id: 29, pid: 1, name: 'New Child1' }], 1);
});
</script>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'>
<div>
@Html.EJS().TreeView("treedata").Fields(field=>
field.Id("id").ParentID("pid").Text("name").HasChildren("hasChild").Expanded("expanded")
.DataSource(ViewBag.dataSource)).Render()
@Html.EJS().Button("button1").Content("Remove Parent").Render()
@Html.EJS().Button("button2").Content("Remove Child").Render()
</div>
</div>
<div id="display"></div>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#display {
max-width: 500px;
margin: auto;
padding: 10px;
}
</style>
<script>
var treeObj = document.getElementById('treedata').ej2_instances[0];
document.getElementById("button1").addEventListener('click', function () {
// The node with id 14 is removed from the TreeView control.
treeObj.removeNodes(['14']);
});
document.getElementById("button2").addEventListener('click', function () {
// The nodes with id 3 and 4 are removed from the TreeView control.
treeObj.removeNodes(['3','4']);
});
</script>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'>
<div>
@Html.EJS().TreeView("treedata").AllowEditing(true).Fields(field=>
field.Id("id").ParentID("pid").Text("name").HasChildren("hasChild").Expanded("expanded")
.DataSource(ViewBag.dataSource)).Render()
@Html.EJS().Button("button1").Content("Update Node").Render()
</div>
</div>
<div id="display"></div>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#display {
max-width: 500px;
margin: auto;
padding: 10px;
}
</style>
<script>
var treeObj = document.getElementById('treedata').ej2_instances[0];
document.getElementById("button1").addEventListener('click', function () {
// The node with id 4 is updated with new text from the TreeView control.
treeObj.updateNode('4', 'Node updated');
});
</script>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'>
<div>
@Html.EJS().TreeView("treedata").Fields(field=>
field.Id("id").ParentID("pid").Text("name").HasChildren("hasChild").Expanded("expanded")
.DataSource(ViewBag.dataSource)).Render()
@Html.EJS().Button("button1").Content("Refresh Node").Render()
</div>
</div>
<div id="display"></div>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#display {
max-width: 500px;
margin: auto;
padding: 10px;
}
</style>
<script>
var treeObj = document.getElementById('treedata').ej2_instances[0];
document.getElementById("button1").addEventListener('click', function () {
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>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'>
<div>
@Html.EJS().TreeView("treedata").Fields(field=>
field.Id("id").ParentID("pid").Text("name").HasChildren("hasChild").Expanded("expanded")
.DataSource(ViewBag.dataSource)).Render()
@Html.EJS().Button("button1").Content("Move Node").Render()
</div>
</div>
<div id="display"></div>
<style>
#treeparent {
display: block;
max-width: 350px;
max-height: 350px;
margin: auto;
overflow: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#display {
max-width: 500px;
margin: auto;
padding: 10px;
}
</style>
<script>
var treeObj = document.getElementById('treedata').ej2_instances[0];
document.getElementById("button1").addEventListener('click', function () {
// 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>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:
