## Properties

Name | Type | Default
--- | --- | ---
width | Number/String | null
Sets the tree width. #### Code examples Initialize a jqxTree with the `width` property specified.
    $('#jqxTree').jqxTree({width:"200px"});
height | Number/String | null
Sets the panel height. #### Code examples Initialize a jqxTree with the `height` property specified.
    $('#jqxTree').jqxTree({height:"400px"});
disabled | Boolean | false
Gets or sets whether the tree is disabled. #### Code examples Initialize a jqxTree with the `disabled` property specified.
    $('#jqxTree').jqxTree({ disabled:true });
easing | String | 'easeInOutCirc'
Gets or sets the animation's easing to one of the JQuery's supported easings. #### Code examples Initialize a jqxTree with the `easing` property specified.
    $('#jqxTree').jqxTree({ easing: 'easeInOutCirc' });
animationShowDuration | Number | 350
Gets or sets the duration of the show animation. #### Code examples Initialize a jqxTree with the `animationShowDuration` property specified.
    $('#jqxTree').jqxTree({ animationShowDuration: 500 });
animationHideDuration | Number | fast
Gets or sets the duration of the hide animation. #### Code examples Initialize a jqxTree with the `animationHideDuration` property specified.
    $('#jqxTree').jqxTree({ animationHideDuration: 500 });
enableHover | Boolean | true
Enables or disables the hover state. #### Code examples Initialize a jqxTree with the `enableHover` property specified.
    $('#jqxTree').jqxTree({ enableHover: true });
keyboardNavigation | Boolean | true
Enables or disables the key navigation. #### Code examples Initialize a jqxTree with the `keyboardNavigation` property specified.
    $('#jqxTree').jqxTree({ keyboardNavigation: true });
toggleMode | String | dblclick
Gets or sets user interaction used for expanding or collapsing any item. Possible values ['click', 'dblclick']. #### Code examples Initialize a jqxTree with the `toggleMode` property specified.
    $('#jqxTree').jqxTree({ toggleMode: 'click' });
source | Object | null
Specifies the jqxTree's data source. Use this property to populate the jqxTree. #### 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'});
checkboxes | Boolean | false
Gets or sets 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 Initialize a jqxTree with the `checkboxes` property specified.
    $('#jqxTree').jqxTree({ checkboxes: true });
hasThreeStates | Boolean | false
Gets or sets whether the tree checkboxes have three states - checked, unchecked and indeterminate. #### Code examples Initialize a jqxTree with the `hasThreeStates` property specified.
    $('#jqxTree').jqxTree({ hasThreeStates: true });
allowDrag(requires jqxdragdrop.js) | Boolean | false
Enables the dragging of Tree Items. #### Code example Initialize a jqxTree with the `allowDrag` property specified.
    $("#jqxTree").jqxTree({allowDrag:true});
allowDrop(requires jqxdragdrop.js) | Boolean | false
Enables the dropping of Tree Items. #### Code example Initialize a jqxTree with the `allowDrop` property specified.
    $("#jqxTree").jqxTree({allowDrop:true});
dragStart | Function | null
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;
        }
    });
dragEnd | Function | null
Callback function which is called when a drag operation ends. #### Code example Set the dragEnd property
    $("#jqxTree").jqxTree({dragEnd: function (droppedItem) {

        }
    });
toggleIndicatorSize | Number | 16
Gets or sets whether the size of the expand/collapse arrows. #### Code examples Initialize a jqxTree with the `toggleIndicatorSize` property specified.
    $('#jqxTree').jqxTree({ toggleIndicatorSize: 0 });
## Events
expand | Event |
Expand is triggered when the user expands a tree item. #### Code examples Bind to the expand event by type: jqxTree.
    $('#jqxTree').bind('expand', function (event) { // Some code here. });
collapse | Event |
Collapse is triggered when the user collapses a tree item. #### Code examples Bind to the collapse event by type: jqxTree.
    $('#jqxTree').bind('collapse', function (event) { // Some code here. });
select | Event |
Select is triggered when the user selects a tree item. #### Code examples Bind to the select event by type: jqxTree.
    $('#jqxTree').bind('select', function (event) { // Some code here. });
initialized | Event |
The initialized event is triggered when the jqxTree is created and initialized. #### Code examples Bind to the initialized event by type: jqxTree.
    $('#jqxTree').bind('initialized', function (event) { // Some code here. });
add | Event |
Add event is triggered when the user adds a new tree item. #### Code examples Bind to the add event by type: jqxTree.
    $('#jqxTree').bind('add', function (event) { // Some code here. });
removed | Event |
Removed event is triggered when the user removes a tree item. #### Code examples Bind to the remove event by type: jqxTree.
    $('#jqxTree').bind('remove', function (event) { // Some code here. });
checkchange | Event |
Checkchange 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').bind('checkchange', function (event) { // Some code here. });
dragStart | Event |
This event is triggered when the user starts a drag operation. #### Code example Bind to the dragStart event by type: jqxTree.
    $('#jqxTree').bind('dragStart', function (event) { // Some code here. });
dragEnd | Event |
This event is triggered when the user drops an item. #### Code example Bind to the dragEnd event by type: jqxTree.
    $('#jqxTree').bind('dragEnd', function (event) { // Some code here. });
## Methods
ensureVisible | Method |
Ensures the visibility of an element. #### Code example Invoke the ensureVisible method.
    // @param element (li tag)
    $('#jqxTree').jqxTree('ensureVisible', element);
addTo | Method |
Adds an element. #### 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 });
removeItem | Method |
Removes an element. #### Code example Invoke the removeItem method.
    // @param element (li tag)
    $('#jqxTree').jqxTree('removeItem', element);
clear | Method |
Removes all elements. #### Code example Invoke the clear method.
    $('#jqxTree').jqxTree('clear');
disableItem | Method |
Disables a tree item. #### Code example Invoke the disableItem method.
    // @param element (li tag)
    $('#jqxTree').jqxTree('disableItem', element);
checkItem | Method |
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);
enableItem | Method |
Enables a tree item. #### Code example Invoke the enableItem method.
    // @param element (li tag)
    $('#jqxTree').jqxTree('enableItem', element);
lockItem | Method |
Locks a tree item. #### Code example Invoke the lockItem method.
    // @param element (li tag)
    $('#jqxTree').jqxTree('lockItem', element);
unlockItem | Method |
Unlocks a tree item. #### Code example Invoke the unlockItem method.
    // @param element (li tag)
    $('#jqxTree').jqxTree('unlockItem', element);
getItems | Method |
Gets an array with all tree items. #### Code example Invoke the getItems method.
    var items = $('#jqxTree').jqxTree('getItems');
getItem | Method |
Gets the tree item associated to a LI tag passed as parameter. #### Code example Invoke the getItem method.
    // @param element (li tag)
    var item = $('#jqxTree').jqxTree('getItem', element);
getSelectedItem | Method |
Gets the selected tree item. #### Code example Invoke the getSelectedItem method.
    var item = $('#jqxTree').jqxTree('getSelectedItem');
getPrevItem | Method |
Gets the item above another item. #### Code example Invoke the getPrevItem method.
    var selectedItem = $("#jqxTree").jqxTree('selectedItem');
    var prevItem = $("#jqxTree").jqxTree('getPrevItem', selectedItem.element);
getNextItem | Method |
Gets the item below another item. #### Code example Invoke the getNextItem method.
    var selectedItem = $("#jqxTree").jqxTree('selectedItem');
    var nextItem = $("#jqxTree").jqxTree('getNextItem', selectedItem.element);
selectItem | Method |
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]);
collapseAll | Method |
Collapses all items. #### Code example Invoke the collapseAll method.
    $('#jqxTree').jqxTree('collapseAll');
expandAll | Method |
Expandes all items. #### Code example Invoke the expandAll method.
    $('#jqxTree').jqxTree('expandAll');
collapseItem | Method |
Collapses a tree item by passing an element as parameter. #### Code example Invoke the collapseItem method.
    // @param element (li tag)
    $('#jqxTree').jqxTree('collapseItem', element);
expandItem | Method |
Expands a tree item by passing an element as parameter. #### Code example Invoke the expandItem method.
    // @param element (li tag)
    $('#jqxTree').jqxTree('expandItem', element);