jQuery Tree

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:

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).

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

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

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.

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;