Available in the OSS Version
Tree - API and Events
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
var node = $("#tree").igTree("selectedNode");
$("#tree").igTree("removeAt", node.path);
var nodes = $("#tree").igTree("findNodesByText", "Tech");
$("#tree").igTree("select", nodes[0].element);
$("#tree").igTree("addNode", { Text: "New Node" });
$("#tree").igTree("removeAt", node.path);
var nodes = $("#tree").igTree("findNodesByText", "Tech");
$("#tree").igTree("select", nodes[0].element);
$("#tree").igTree("addNode", { Text: "New Node" });
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to handle events in the Tree control and API usage.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<!-- Used to add markup and provide logging
functionality for the API Explorer and API Viewer UI -->
<script src="/js/apiviewer.js"></script>
</head>
<body>
<div id="tree"></div>
<!-- Begin: API UI -->
<div class="api-explorer">
<button id="btnRemoveNode">Remove Selected Node</button><span>var node = $("#tree").igTree("selectedNode");<br />$("#tree").igTree("removeAt", node.path);</span><br />
<button id="btnSelectNode">Select Tech Node</button><span>var nodes = $("#tree").igTree("findNodesByText", "Tech"); <br />$("#tree").igTree("select", nodes[0].element);</span><br />
<button id="btnAddNode">Add Node</button><span>$("#tree").igTree("addNode", { Text: "New Node" });</span>
</div>
<div class="api-viewer" tabindex="0"></div>
<!-- End: API UI -->
<script src="/data-files/hierarchical-products.js"></script>
<script>
$(function () {
// Used to show output in the API Viewer at runtime,
// defined in external script 'apiviewer.js'
var apiViewer = new $.ig.apiViewer();
/*----------------- Method & Option Examples -------------------------*/
// Remove Selected Node button click handler
$("#btnRemoveNode").click(function (e) {
var node = $("#tree").igTree("selectedNode");
if (node.path != null) {
if (node.data.Text === "Tech") {
apiViewer.log("Tech node cannot be removed");
}
else {
// Remove selected node using path
$("#tree").igTree("removeAt", node.path);
apiViewer.log("Node Removed: " + node.data.Text);
$("#tree").igTree("clearSelection");
}
} else {
apiViewer.log("Please select a node and try again.");
}
});
// Select "Tech" Node button click handler
$("#btnSelectNode").click(function (e) {
var nodes = $("#tree").igTree("findNodesByText", "Tech");
if (nodes.length > 0) {
$("#tree").igTree("select", nodes[0].element);
}
});
// {Button Label} button click handler
$("#btnAddNode").click(function (e) {
var parentNode = $("#tree").igTree("selectedNode").element;
if (parentNode == null) {
$("#tree").igTree("addNode", { Text: "New Node" });
}
else {
$("#tree").igTree("addNode", { Text: "New Node" }, parentNode);
$("#tree").igTree("expand", parentNode);
}
});
/*----------------- Event Examples -------------------------*/
$("#tree").on("igtreeselectionchanged", function (e, ui) {
apiViewer.log("igtreeselectionchanged: [ " + "Selection Changed: " + ui.newNodes[0].data.Text + "]"); focusOnMobile();
});
$("#tree").on("igtreenodeclick", function (evt, ui) {
apiViewer.log("igtreenodeclick: [ " + "Node Clicked: " + ui.node.data.Text + "]"); focusOnMobile();
});
$("#tree").on("igtreedragstart", function (evt, ui) {
apiViewer.log("igtreedragstart: [ " + "Node Drag Start: " + ui.data.Text + "]"); focusOnMobile();
});
$("#tree").on("igtreedragstop", function (evt, ui) {
apiViewer.log("igtreedragstop"); focusOnMobile();
});
$("#tree").on("igtreenodedropped", function (evt, ui) {
apiViewer.log("igtreenodedropped"); focusOnMobile();
});
/*----------------- Instantiation -------------------------*/
$("#tree").igTree({
singleBranchExpand: true,
dataSourceType: "json",
dataSource: products, //defined in external script
dragAndDrop: true,
bindings: {
textKey: "Text",
valueKey: "Text",
childDataProperty: "Nodes"
}
});
function focusOnMobile() {
setTimeout(function () {
if ($(window).width() < 600) {
$(".api-viewer").focus();
}
}, 0);
}
});
</script>
</body>
</html>
var products = [
{
Text: "Food", Nodes: [
{
Text: "Sandwiches", Nodes: [
{ Text: "Ham & Cheese" },
{ Text: "Tuna" },
{ Text: "Turkey & Cheese" }
]
},
{ Text: "Fish" },
{ Text: "Hamburgers" },
{ Text: "Sushi" },
{ Text: "Steaks" }
]
}, {
Text: "Beverages", Nodes: [
{ Text: "Coke" },
{ Text: "Mountain Dew" },
{ Text: "Lemonade" }
]
},
{
Text: "Tech", Nodes: [
{ Text: "Laptops" },
{ Text: "Desktops" },
{ Text: "Tablets" },
{ Text: "Smartphones" },
{ Text: "Mainframes" }
]
},
{
Text: "Literature", Nodes: [
{ Text: "Dostoevsky" },
{ Text: "Vazov" },
{ Text: "Tolstoy" },
{ Text: "Goethe" },
{ Text: "Steinbeck" }]
}, {
Text: "Accessories", Nodes: [
{ Text: "Mouse" },
{ Text: "Keyboard" },
{ Text: "Microphone" },
{ Text: "Camera" },
{ Text: "Mousepad" }]
}];