Documentation

Getting Started

jqxTree represents a jQuery Tree widget that displays a hierarchical collection of items. You can populate it from 'UL' or by using its 'source' property.
Every UI widget from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxTree widget requires the following files:

<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxtree.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>

The next step is to create a div element within the body of the html document and add 'UL' and 'LI' elements for the tree items in case you are not populating the jqxTree by setting the 'source' property(option).

<div id='jqxTree'>
    <ul>
        <li item-selected='true'>Home</li>
        <li item-expanded='true'>Solutions
            <ul>
                <li>Education</li>
                <li>Financial services</li>
                <li>Government</li>
                <li>Manufacturing</li>
                <li>Solutions
                    <ul>
                        <li>Consumer photo and video</li>
                        <li>Mobile</li>
                        <li>Rich Internet applications</li>
                        <li>Technical communication</li>
                        <li>Training and eLearning</li>
                        <li>Web conferencing</li>
                    </ul>
                </li>
                <li>All industries and solutions</li>
            </ul>
        </li>
    </ul>
</div>

The last step is to initialize the widget by adding the following script to the html document:

<script type="text/javascript">
    $(document).ready(function () {
        // Create jqxTree
        $('#jqxTree').jqxTree({ height: '300px', width: '300px' });
    });
</script>

To call a function(method), you need to pass the method name and parameters(if any) in the jqxTree’s constructor.

$("#jqxTree").jqxTree(‘selectItem’, html element);

To get the result of a function(method) call, you need to pass the method name in the jqxTree’s constructor and parameters(if any).

$("#jqxTree").jqxTree(‘getItem’, html element );

To set a property(option), you need to pass the property name and value(s) in the jqxTree's constructor.

$("#jqxTree").jqxTree({ checkboxes: true });

To get a property(option), you need to pass the property name to the jqxTree's constructor.

var checkboxes = $("#jqxTree").jqxTree('checkboxes');

To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose that you want to get the selected item when the user clicks. The example code below demonstrates how to bind to the ‘select’ event of jqxTree.

$('#jqxTree').on('select', function (event) {    var args = event.args;    var item = $('#jqxTree').jqxTree('getItem', args.element);    alert("Selected: " + item.label);});

Basic Tree Sample created from UL

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Tree Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxtree.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            $('#jqxTree').jqxTree({ height: '300px', width: '300px' });
            $('#jqxTree').bind('select', function (event) {
                var htmlElement = event.args.element;
                var item = $('#jqxTree').jqxTree('getItem', htmlElement);
                alert(item.label);
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxTree'>
        <ul>
            <li item-selected='true'>Home</li>
            <li item-expanded='true'>Solutions
              <ul>
                  <li>Education</li>
                  <li>Financial services</li>
                  <li>Government</li>
                  <li>Manufacturing</li>
                  <li>Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                            <li>Rich Internet applications</li>
                            <li>Technical communication</li>
                            <li>Training and eLearning</li>
                            <li>Web conferencing</li>
                        </ul>
                  </li>
                  <li>All industries and solutions</li>
              </ul>
            </li>
        </ul>
    </div>
</body>
</html>

The result of the above code is:

Basic Tree Sample created by setting the 'source' property(option).

The result of the above code is:

Basic Tree Sample with checkboxes.

To create a jqxTree with checkboxes, you need to include the jqxcheckbox.js file and set the checkboxes property(option) to true.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="keywords" content="jQuery Tree Widget, Tree Menu, jqxTree, jQuery Widgets, jQuery Plugins, jQuery UI Widgets, jQuery UI" /> 
    <title id='Description'>The jqxTree displays a hierarchical collection of items. You
        can populate it from 'UL' or by using its 'source' property.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                { label: "Item 1", expanded: true, items: [
                    { label: "Item 1.1" },
                    { label: "Item 1.2", selected: true }
                ]
                },
                { label: "Item 2" },
                { label: "Item 3" },
                { label: "Item 4", items: [
                    { label: "Item 4.1" },
                    { label: "Item 4.2" }
                ]
                },
                { label: "Item 5" },
                { label: "Item 6" },
                { label: "Item 7" }
            ];
            // Create jqxTree.
            $('#jqxTree').jqxTree({checkboxes: true, source: source, height: '300px', width: '300px' });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxTree'>
    </div>
</body>
</html>

The result of the above code is:

To check or uncheck an item, use the 'checkItem' method.
If you have an item with id='home', use the following code to check it:

$("#jqxTree").jqxTree('checkItem', $("#home")[0], true);

The last parameter in the above code is the checked state.
To select an item, use the 'selectItem' method.
If you have an item with id='home', use the following code to select it:

$("#jqxTree").jqxTree('selectItem', $("#home")[0]);

To get all tree items, you can use the 'getItems' method.

var items = $("#jqxTree").jqxTree('getItems');

To get an item by LI tag, use the following code:

var item = $("#jqxTree").jqxTree('getItem', $("#home")[0]);

Having the item, you can get its current state by using its fields.

var isChecked = item.checked;
var isExpanded = item.isExpanded;
var isSelected = item.selected;
var itemLabel = item.label;
var itemValue = item.value;
var itemID = item.id;
var itemLIElement = item.element;
var itemLevel = item.level;
var hasItems = item.hasItems;
var isDisabled = item.disabled;
var parentLIElement = item.parentElement;
var arrowElement = item.arrow;
var checkBoxElement = item.checkBoxElement;