Sets the tree width.

Code examples

Initialize a jqxTree with the width property specified.

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

Sets the panel height.

Code examples

Initialize a jqxTree with the height property specified.

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

Gets or sets whether the tree is disabled.

Code examples

Initialize a jqxTree with the disabled property specified.

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

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' }); 

Gets or sets the duration of the show animation.

Code examples

Initialize a jqxTree with the animationShowDuration property specified.

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

Gets or sets the duration of the hide animation.

Code examples

Initialize a jqxTree with the animationHideDuration property specified.

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

Enables or disables the hover state.

Code examples

Initialize a jqxTree with the enableHover property specified.

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

Enables or disables the key navigation.

Code examples

Initialize a jqxTree with the keyboardNavigation property specified.

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

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' }); 

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'});

                        

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 }); 

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 }); 

Enables the dragging of Tree Items.

Code example

Initialize a jqxTree with the allowDrag property specified.

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

Enables the dropping of Tree Items.

Code example

Initialize a jqxTree with the allowDrop property specified.

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

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({dragEnd: function (droppedItem) {



    }

});

                        

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 }); 

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

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

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

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

Ensures the visibility of an element.

Code example

Invoke the ensureVisible method.

// @param element (li tag) 

$('#jqxTree').jqxTree('ensureVisible', element);

                        

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 });

Removes an element.

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');

                        

Disables a tree item.

Code example

Invoke the disableItem method.

// @param element (li tag) 

$('#jqxTree').jqxTree('disableItem', element);

                        

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

                         

Enables a tree item.

Code example

Invoke the enableItem method.

// @param element (li tag) 

$('#jqxTree').jqxTree('enableItem', element);

                        

Locks a tree item.

Code example

Invoke the lockItem method.

// @param element (li tag) 

$('#jqxTree').jqxTree('lockItem', element);

                        

Unlocks a tree item.

Code example

Invoke the unlockItem method.

// @param element (li tag) 

$('#jqxTree').jqxTree('unlockItem', element);

                         

Gets an array with all tree items.

Code example

Invoke the getItems method.

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

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

Gets the selected tree item.

Code example

Invoke the getSelectedItem method.

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

Gets the item above another item.

Code example

Invoke the getPrevItem method.

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

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

Gets the item below another item.

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]);

                        

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

                        

Expands a tree item by passing an element as parameter.

Code example

Invoke the expandItem method.

// @param element (li tag) 

$('#jqxTree').jqxTree('expandItem', element);