This topic explains, with code examples, how to add and remove nodes of igTree™ control programmatically.
The following topics are prerequisites to understanding this topic:
igTree control including information regarding: features, binding to data sources, requirements, and templates.This topic contains the following sections:
The igTree™ control supports adding and removing of tree nodes.
Adding Nodes
To a node, you can add the following:
Adding a node is done by addNode method.
Removing Nodes
You can remove a a node by either of the following:
The following table lists the code examples included in this topic.
| Example | Description |
|---|---|
| Code Example: Creating a New Node in a Tree | This example demonstrates how to add a new node to the tree of the igTree control. |
| Code Example: Adding Multiple Nodes to a Tree | This example demonstrates get-ting the selected node and adding an array of nodes to it. |
| Code Example: Removing a selected node from a Tree | This example demonstrates get-ting selected node and removing it from an igTree. |
| Code Example: Removing a node by value from a Tree | This example demonstrates removing nodes from an igTree by value |
This example demonstrates how to add a new node to the tree of the igTree control. In the example, you have to take the node Pepsi and add from an HTML place under the selected node. To do this, you get the reference to selected node in the igTree and then add the HTML list item to the selected node from the HTML list.
In JavaScript:
var selectedNode = $("#tree").igTree("selectedNode").element;
// This returns a JSON object with the following structure:
// var newNode = {
// Text: "Pepsi",
// Value: 5
// };
var newNode = clickedElement();
if (selectedNode != null) {
// Adding the node to the tree
$("#tree").igTree("addNode", newNode, selectedNode);
}
This example demonstrates how add multiple nodes to the tree of the igTree control. For instance, you have to take a whole set of nodes nodes from an HTML list and that set under the selected node. To do this,, you get the reference to selected node in the igTree and then add the set of nodes from the HTML list. In the example, a randomizer us used to generate values for the new nodes (representing, for instance, quantities).
In JavaScript:
var selectedNode = $("#tree").igTree("selectedNode").element;
if (selectedNode != null) {
// Creating an array of new nodes
var newNodes = [];
// Converting the HTML list to the array of nodes
var list = $("ul#items li").each(function () {
var item = $(this);
// Pushing new items with random values representing quantities
newNodes.push({
Text: item.html(),
Value: Math.floor(Math.random() * 1001)
});
});
// Adding the array of nodes to the tree
$("#tree").igTree("addNode", newNodes, selectedNode);
}
This example demonstrates how to remove a selected node from the tree of the igTree control. You first get the reference to selected node in igTree and then remove the node by referencing it by its path.
In JavaScript:
var selectedPath = $("#tree").igTree("selectedNode").path;
if (selectedPath != null) {
// Removing the selected node by path
$("#tree").igTree("removeAt", selectedPath);
}
This example demonstrates how remove a node from an igTree by value. In the example, you need to remove all nodes whose value matches the value the user has entered through an HTML input field. You get the value first and then remove the node by referencing it by that value.
In JavaScript:
var nodeValue = $("#nodeValue").val();
if (nodeValue) {
// Removing all nodes with the provided value
$("#tree").igTree("removeNodesByValue", nodeValue);
}
The following topics provide additional information related to this topic.
API Links (igTree): This topic provides links to igTree jQuery and MVC API.
Add and Remove Nodes Method Reference (igTree): This topic provides a reference for the methods for adding and removing nodes in the igTree control.
The following samples provide additional information related to this topic.
igTree API.View on GitHub