Sets or gets the tree's width.

Code examples

Set the width property.

$('#jqxTree').jqxTree({width:"200px"});

Get the width property.

var width = $('#jqxTree').jqxTree('width');

Sets or gets the tree's height.

Code examples

Set the height property.

$('#jqxTree').jqxTree({height:"400px"});

Get the height property.

var height = $('#jqxTree').jqxTree('height');

Gets or sets whether the tree is disabled.

Code examples

Set the disabled property.

$('#jqxTree').jqxTree({ disabled:true }); 

Get the disabled property.

var disabled = $('#jqxTree').jqxTree('disabled');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxTree').jqxTree({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxTree').jqxTree('rtl'); 

Sets or gets the animation's easing to one of the JQuery's supported easings.

Code examples

Set the easing property .

$('#jqxTree').jqxTree({ easing: 'easeInOutCirc' }); 

Get the easing property.

var easing = $('#jqxTree').jqxTree('easing'); 

Sets or gets the duration of the show animation.

Code examples

Set the animationShowDuration property.

$('#jqxTree').jqxTree({ animationShowDuration: 500 }); 

Get the animationShowDuration property.

var animationShowDuration = $('#jqxTree').jqxTree('animationShowDuration'); 

Sets or gets the duration of the hide animation.

Code examples

Set the animationHideDuration property.

$('#jqxTree').jqxTree({ animationHideDuration: 500 }); 

Get the animationHideDuration property.

var animationHideDuration = $('#jqxTree').jqxTree('animationHideDuration'); 

Enables or disables the hover state.

Code examples

Set the enableHover property.

$('#jqxTree').jqxTree({ enableHover: true }); 

Get the enableHover property.

var enableHover = $('#jqxTree').jqxTree('enableHover'); 

Enables or disables the key navigation.

Code examples

Set the keyboardNavigation property.

$('#jqxTree').jqxTree({ keyboardNavigation: true }); 

Get the keyboardNavigation property.

var keyboardNavigation = $('#jqxTree').jqxTree('keyboardNavigation'); 

Sets or gets user interaction used for expanding or collapsing any item.

Possible Values:

'click'

'dblclick'

Code examples

Set the toggleMode property.

$('#jqxTree').jqxTree({ toggleMode: 'click' }); 

Get the toggleMode property.

var toggleMode = $('#jqxTree').jqxTree('toggleMode'); 

Specifies the jqxTree's data source. Use this property to populate the jqxTree.

Each tree item in the source object may have the following fields:
Item Fields

• label - sets the item's label.
• value - sets the item's value.
• html - item's html. The html to be displayed in the item.
• id - sets the item's id.
• disabled - sets whether the item is enabled/disabled.
• checked - sets whether the item is checked/unchecked(when checkboxes are enabled).
• expanded - sets whether the item is expanded or collapsed.
• selected - sets whether the item is selected.
• items - sets an array of sub items.
• icon - sets the item's icon(url is expected).
• iconsize - sets the size of the item's icon.

Code examples

Initialize a jqxTree with the source property specified.

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({ source: source, width: '330px'});
                        

Determines whether the incremental search is enabled. The feature allows you to quickly find and select items by typing when the widget is on focus.

Code examples

Set the incrementalSearch property.

$('#jqxTree').jqxTree({incrementalSearch:false});

Get the incrementalSearch property.

var incrementalSearch = $('#jqxTree').jqxTree('incrementalSearch');

Sets or gets whether the tree should display a checkbox next to each item. In order to use this feature, you need to include the jqxcheckbox.js.

Code examples

Set the checkboxes property.

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

Get the checkboxes property.

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

Sets or gets whether the tree checkboxes have three states - checked, unchecked and indeterminate.

Code examples

Set the hasThreeStates property.

$('#jqxTree').jqxTree({ hasThreeStates: true }); 

Get the hasThreeStates property.

var hasThreeStates = $('#jqxTree').jqxTree('hasThreeStates'); 

Enables the dragging of Tree Items.(requires jqxdragdrop.js)

Code example

Set the allowDrag property.

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

Get the allowDrag property.

var allowDrag = $('#jqxTree').jqxTree('allowDrag'); 

Enables the dropping of Tree Items.(requires jqxdragdrop.js)

Code example

Set the allowDrop property.

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

Get the allowDrop property.

var allowDrop = $('#jqxTree').jqxTree('allowDrop'); 

Callback function which is called when a drag operation starts.

Code example

Set the dragStart property.

$("#jqxTree").jqxTree({dragStart: function (item)
{
    // disable dragging of 'Café au lait' item.
    if (item.label == 'Café au lait')
    return false;
                        
    // enable dragging for the item.
    return true;
}
});
                        

Callback function which is called when a drag operation ends.

Code example

Set the dragEnd property.

$('#jqxTree').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', dragEnd: function (dragItem, dropItem, args, dropPosition, tree)
{
    // dragItem is the item which is dragged by the user.
    // dropItem is the item over which we dropped the dragged item.
    // args - dragEvent event arguments.
    // dropPosition - the position of the dragItem regarding the possition of the dropItem. The possible values are: 'inside' - when the dragItem is dropped over the dropItem,
    'before' - when the dragItem is dropped above the dropItem.
    'after' - when the dragItem is dropped below the dropItem.
    // tree - the jqxTree's jQuery object associated to the dropItem. If the tree's id is 'tree', this returns $("#tree")                                                          
    // to cancel the drop operation, return false.    
}
});
                        

Sets or gets the size of the expand/collapse arrows.

Code examples

Set the toggleIndicatorSize property.

$('#jqxTree').jqxTree({ toggleIndicatorSize: 0 }); 

Get the toggleIndicatorSize property.

var toggleIndicatorSize = $('#jqxTree').jqxTree('toggleIndicatorSize'); 

This event is triggered when the user expands a tree item.

Code examples

Bind to the expand event by type: jqxTree.

$('#jqxTree').on('expand', function (event) {
    var args = event.args;
    var item = $('#jqxTree').jqxTree('getItem', args.element);
    var label = item.label; 
});

This event is triggered when the user collapses a tree item.

Code examples

Bind to the collapse event by type: jqxTree.

$('#jqxTree').on('collapse',function (event) {
    var args = event.args;
    var item = $('#jqxTree').jqxTree('getItem', args.element);
    var label = item.label; 
});

This event is triggered when the user selects a tree item.

Code examples

Bind to the select event by type: jqxTree.

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

This event is triggered when the jqxTree is created and initialized.

Code examples

Bind to the initialized event by type: jqxTree.

$('#jqxTree').on('initialized', function (event) { // Some code here. }); 

This event is triggered when the user adds a new tree item.

Code examples

Bind to the added event by type: jqxTree.

$('#jqxTree').on('added', function (event) { // Some code here. }); 

This event is triggered when the user removes a tree item.

Code examples

Bind to the removed event by type: jqxTree.

$('#jqxTree').on('removed', function (event) { // Some code here. }); 

This event is triggered when the user checks, unchecks or the checkbox is in indeterminate state.

Code examples

Bind to the checkChange event by type: jqxTree.

$('#jqxTree').on('checkChange', function (event) 
{
    var args = event.args;
    var element = args.element;
    var checked = args.checked;
}); 

This event is triggered when the user starts a drag operation.

Code example

Bind to the dragStart event by type: jqxTree.

$("#jqxTree").on('dragStart', function (event) 
{
    // get item's label.
    var itemLabel = event.args.label;
    // get item's value.
    var itemValue = event.args.value;
    // get the original dragStart event from the jqxDragDrop plug-in.
    var originalEvent = event.args.originalEvent;
    // using the originalEvent, you can retrieve the mouse cursor's position.
    var x = event.args.originalEvent.pageX;
    var y = event.args.originalEvent.pageY;
    if (event.args.originalEvent.originalEvent.touches) {
    var touch = event.args.originalEvent.originalEvent.changedTouches[0];
    x = touch.pageX;
    y = touch.pageY;
}
});
                         

This event is triggered when the user drops an item.

Code example

Bind to the dragEnd event by type: jqxTree.

$("#jqxTree").on('dragEnd', function (event) 
{
    // get item's label.
    var itemLabel = event.args.label;
    // get item's value.
    var itemValue = event.args.value;
    // get the original dragStart event from the jqxDragDrop plug-in.
    var originalEvent = event.args.originalEvent;
    // using the originalEvent, you can retrieve the mouse cursor's position.
    var x = event.args.originalEvent.pageX;
    var y = event.args.originalEvent.pageY;
    if (event.args.originalEvent.originalEvent.touches) {
    var touch = event.args.originalEvent.originalEvent.changedTouches[0];
    x = touch.pageX;
    y = touch.pageY;
}
});
                         

Ensures the visibility of an element.

Code example

Invoke the ensureVisible method.

// @param element (li tag) 
$('#jqxTree').jqxTree('ensureVisible', element);
                        

Adds an item as a sibling of another item.

Code example

Invoke the addBefore method.

$('#jqxTree').jqxTree('addBefore', newElement, element);
                        

The following code adds a new item before the first tree item:

var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
var firstItemElement = firstItem.element;
$('#jqxTree').jqxTree('addBefore', { label: 'Item' }, firstItemElement);

The following code adds a new item before a tree item by using the item's ID.

var elementByID = $('#jqxTree').find("#home")[0];
$('#jqxTree').jqxTree('addBefore', { label: 'Item' }, elementByID);

Adds an item as a sibling of another item.

Code example

Invoke the addAfter method.

$('#jqxTree').jqxTree('addAfter', newElement, element);
                        

The following code adds a new item after the first tree item:

var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
var firstItemElement = firstItem.element;
$('#jqxTree').jqxTree('addAfter', { label: 'Item' }, firstItemElement);

The following code adds a new item after a tree item by using the item's ID.

var elementByID = $('#jqxTree').find("#home")[0];
$('#jqxTree').jqxTree('addAfter', { label: 'Item' }, elementByID);

Adds an item.

Code example

Invoke the addTo method.

// @param element (li tag) 
// @param parentElement (li tag) - optional parameter, which specifies the parent item. If not specified, the new element is added as last tree item. 
$('#jqxTree').jqxTree('addTo', element, parentElement);
                        

The following code adds a new item to the jqxTree:

$('#jqxTree').jqxTree('addTo', { label: 'Item' });

The following code adds a new sub item to the first tree item:

var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
var firstItemElement = firstItem.element;
$('#jqxTree').jqxTree('addTo', { label: 'Item' }, firstItemElement);

The following code adds a new sub item to a tree item by using the item's ID.

var elementByID = $('#jqxTree').find("#home")[0];
$('#jqxTree').jqxTree('addTo', { label: 'Item' }, elementByID);

The following code adds a new item with custom HTML and specific ID to the jqxTree.

$('#jqxTree').jqxTree('addTo', { html: <span style='font-weight: bold;' id='myItem'>Item });

Updates an item.

Code example

Invoke the updateItem method.

// @param element (li tag) 
$('#jqxTree').jqxTree('updateItem', element, {label: "New Label"});
                        

The following code updates the first item.

var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
$('#jqxTree').jqxTree('updateItem', firstItem, { label: 'Item' });

Removes an item.

Code example

Invoke the removeItem method.

// @param element (li tag) 
$('#jqxTree').jqxTree('removeItem', element);
                        

Removes all elements.

Code example

Invoke the clear method.

$('#jqxTree').jqxTree('clear');
                        

Gets an item at specific position. The method expects 2 parameters - left and top. The coordinates are relative to the document.

Code example

Invoke the hitTest method.

var item = $('#jqxTree').jqxTree('hitTest', 10, 20);
                        

Disables a tree item.

Code example

Invoke the disableItem method.

// @param element (li tag) 
$('#jqxTree').jqxTree('disableItem', element);
                        

Checks all tree items.

Code example

Invoke the checkAll method.

$('#jqxTree').jqxTree('checkAll');
                        

Unchecks all tree items.

Code example

Invoke the uncheckAll method.

$('#jqxTree').jqxTree('uncheckAll');
                        

Checks a tree item.

Code example

Invoke the checkItem method.

// @param element (li tag) 
// @param true, false or null. - CheckBox state.
$('#jqxTree').jqxTree('checkItem', element, true);
                         

// check an item with id="home"

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

Unchecks a tree item.

Code example

Invoke the uncheckItem method.

// @param element (li tag) 
$('#jqxTree').jqxTree('uncheckItem', element);
                         

// uncheck an item with id="home"

var newCheckState = true;
$("#jqxTree").jqxTree('uncheckItem', $("#home")[0]);
                        

Enables a tree item.

Code example

Invoke the enableItem method.

// @param element (li tag) 
$('#jqxTree').jqxTree('enableItem', element);
                        

Gets an array with all checked tree items.

Each tree item has the following fields:
Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Code example

Invoke the getCheckedItems method.

var items = $('#jqxTree').jqxTree('getCheckedItems');

Gets an array with all unchecked tree items.

Each tree item has the following fields:
Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Code example

Invoke the getUncheckedItems method.

var items = $('#jqxTree').jqxTree('getUncheckedItems');

Gets an array with all tree items.

Each tree item has the following fields:
Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Code example

Invoke the getItems method.

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

Gets the tree item associated to a LI tag passed as parameter. The returned value is an Object.

Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Code example

Invoke the getItem method.

// @param element (li tag) 
var item = $('#jqxTree').jqxTree('getItem', element);

Gets the selected tree item.

Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Code example

Invoke the getSelectedItem method.

var item = $('#jqxTree').jqxTree('getSelectedItem');

Gets the item above another item. The returned value is an Object.

Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Code example

Invoke the getPrevItem method.

var selectedItem = $("#jqxTree").jqxTree('selectedItem');
var prevItem = $("#jqxTree").jqxTree('getPrevItem', selectedItem.element);

Gets the item below another item. The returned value is an Object.

Item Fields

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• element - gets the item's LI tag.
• parentElement - gets the item's parent LI tag.
• isExpanded - gets whether the item is expanded or collapsed.
• selected - gets whether the item is selected or not.

Code example

Invoke the getNextItem method.

var selectedItem = $("#jqxTree").jqxTree('selectedItem');
var nextItem = $("#jqxTree").jqxTree('getNextItem', selectedItem.element);

Selects an item.

Code example

Invoke the selectItem method.

// @param element (li tag)          
$('#jqxTree').jqxTree('selectItem', element);
                        

Code example

Invoke the selectItem method.

 $('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
                        

// Select item with id="home"

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

// Clear selection.

$("#jqxTree").jqxTree('selectItem', null);

Collapses all items.

Code example

Invoke the collapseAll method.

$('#jqxTree').jqxTree('collapseAll');

Expandes all items.

Code example

Invoke the expandAll method.

$('#jqxTree').jqxTree('expandAll');

Collapses a tree item by passing an element as parameter.

Code example

Invoke the collapseItem method.

// @param element (li tag) 
$('#jqxTree').jqxTree('collapseItem', element);
                        

// Collapse item with id="home"

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

Expands a tree item by passing an element as parameter.

Code example

Invoke the expandItem method.

// @param element (li tag) 
$('#jqxTree').jqxTree('expandItem', element);
                        

// Expand item with id="home"

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

Sets the focus to the widget.

Code example

Invoke the focus method.

$("#jqxTree").jqxTree('focus'); 

Renders the jqxTree widget.

Code example

Invoke the render method.

$('#jqxTree').jqxTree('render');
                        

Refreshes the jqxTree widget. The refresh method will update the jqxTree's layout and size.

Code example

Invoke the refresh method.

$('#jqxTree').jqxTree('refresh');
                        

Destroy the jqxTree widget. The destroy method removes the jqxTree widget from the web page.

Code example

Invoke the destroy method.

$('#jqxTree').jqxTree('destroy');
                        

Sets or gets the selected item.

Code example

Invoke the val method.

// Get the selected item.

var value = $("#jqxTree").jqxTree('val');

// Get the selected tab's index using jQuery's val()

var value = $("#jqxTree").val();

// Set the selected item. The element should be a LI tag from the jqxTree's HTML Structure.

$("#jqxTree").jqxTree('val', element);

// Set the selected tab using jQuery's val().

$("#jqxTree").val(element);