The first step is to include the required Javascript files.
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>
The second step is to add the jqx-tree HTML tag within the document’s body. The tag should have settings attribute.
<jqx-tree settings="treeSettings"></jqx-tree>
The third step is to put the initialization settings within a script tag. The Tree API can be found on the documentation page.
If you want to bind to events, you can do it the same way you do it for native HTML Elements – through addEventListener. The example below demonstrates how to bind to the “expand” and “collapse” events of jqxTree.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Tree Custom Element Overview</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script type="text/javascript"> var data = [ { icon: "../images/mailIcon.png", label: "Mail", expanded: true, items: [ { icon: "../images/calendarIcon.png", label: "Calendar" }, { icon: "../images/contactsIcon.png", label: "Contacts", selected: true } ] }, { icon: "../images/folder.png", label: "Inbox", expanded: true, items: [ { icon: "../images/folder.png", label: "Admin" }, { icon: "../images/folder.png", label: "Corporate" }, { icon: "../images/folder.png", label: "Finance" }, { icon: "../images/folder.png", label: "Other" }, ] }, { icon: "../images/recycle.png", label: "Deleted Items" }, { icon: "../images/notesIcon.png", label: "Notes" }, { iconsize: 14, icon: "../images/settings.png", label: "Settings" }, { icon: "../images/favorites.png", label: "Favorites" }, ]; JQXElements.settings["treeSettings"] = { source: data } window.onload = function () { var tree = document.querySelector("jqx-tree"); tree.addEventListener('expand', function (event) { var treeElement = event.args.element; }); tree.addEventListener('collapse', function (event) { var treeElement = event.args.element; }); } </script></head><body> <jqx-tree settings="treeSettings"></jqx-tree></body></html>