jqxTree API Reference

Name Type Default

animationShowDuration Number 350

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

Try it: animationShowDuration is set to 1000

animationHideDuration Number fast

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

Try it: animationHideDuration is set to 1000

allowDrag Boolean false

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

Try it: allowDrag is set to true

allowDrop Boolean false

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

Try it: allowDrop is set to true

checkboxes Boolean false

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

Try it: checkboxes is set to 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;
}
});

Try it: dragStart is set to a custom function

dragEnd Function null

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

Try it: dragEnd is set to a custom function

disabled Boolean false

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

Try it: disabled is set to true

easing String 'easeInOutCirc'

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

Try it: easing is set to 'easeInOutCirc'

enableHover Boolean true

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

Try it: enableHover is set to false

height Number/String null

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

Try it: height is set to '300px'

hasThreeStates Boolean false

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

Try it: hasThreeStates is set to true

incrementalSearch Boolean true

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

Try it: incrementalSearch is set to true

keyboardNavigation Boolean true

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

Try it: keyboardNavigation is set to false

rtl Boolean false

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

Try it: rtl is set to true

source Object null

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

Try it: source is set to source

toggleIndicatorSize Number 16

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

Try it: toggleIndicatorSize is set to 20

toggleMode String dblclick

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

Try it: toggleMode is set to 'click'

theme String ''

width Number/String null

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

Try it: width is set to '300px'

added Event

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

Try it: Bind to the added event by type: jqxTree.

checkChange Event

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

Try it: Bind to the checkChange event by type: jqxTree.

collapse Event

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

Try it: Bind to the collapse event by type: jqxTree.

dragStart Event

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

Try it: Bind to the dragStart event by type: jqxTree.

dragEnd Event

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

Try it: Bind to the dragEnd event by type: jqxTree.

expand Event

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

Try it: Bind to the expand event by type: jqxTree.

initialized Event

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

Try it: Bind to the initialized event by type: jqxTree.

itemClick Event

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

Code examples

Bind to the itemClick event by type: jqxTree.

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

Try it: Bind to the itemClick event by type: jqxTree.

removed Event

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

Try it: Bind to the removed event by type: jqxTree.

select Event

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; 
    var type = args.type; // mouse, keyboard or null. If the user selects with the mouse, the type will be "mouse".
});

Try it: Bind to the select event by type: jqxTree.

addBefore Method

Adds an item as a sibling of another item.

Parameter	Type	Description
item	Object
id	String

Return Value
None

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

Try it: adds new item in the jqxTree.

addAfter Method

Adds an item as a sibling of another item.

Parameter	Type	Description
item	Object
id	String

Return Value
None

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

Try it: adds new item in the jqxTree.

addTo Method

Adds an item.

Parameter	Type	Description
item	Object
id	String

Return Value
None

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

Try it: adds new sub item in the jqxTree.

clear Method

Removes all elements.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the clear method.

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

Try it: clears all items in the jqxTree.

checkAll Method

Checks all tree items.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the checkAll method.

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

Try it: checks all items in the jqxTree.

checkItem Method

Checks a tree item.

Parameter	Type	Description
item	Object
checked	Boolean

Return Value
None

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

Try it: checks an item in the jqxTree.

collapseAll Method

Collapses all items.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the collapseAll method.

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

Try it: collapse all items in the jqxTree.

collapseItem Method

Collapses a tree item by passing an element as parameter.

Parameter	Type	Description
item	Object

Return Value
None

Code example

Invoke the collapseItem method.

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

// Collapse item with id="home"


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

Try it: collapse an item in the jqxTree.

destroy Method

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

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the destroy method.

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

Try it: destroy the jqxTree.

disableItem Method

Disables a tree item.

Parameter	Type	Description
item	Object

Return Value
None

Code example

Invoke the disableItem method.

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

Try it: disables an item in the jqxTree.

ensureVisible Method

Ensures the visibility of an element.

Parameter	Type	Description
item	Object

Return Value
None

Code example

Invoke the ensureVisible method.

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

Try it: ensures the vizibility of an element in the jqxTree.

enableItem Method

Enables a tree item.

Parameter	Type	Description
item	Object

Return Value
None

Code example

Invoke the enableItem method.

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

Try it: enables an item in the jqxTree.

expandAll Method

Expandes all items.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the expandAll method.

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

Try it: expand all items in the jqxTree.

expandItem Method

Expands a tree item by passing an element as parameter.

Parameter	Type	Description
item	Object

Return Value
None

Code example

Invoke the expandItem method.

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

// Expand item with id="home"


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

Try it: expand an item in the jqxTree.

focus Method

Sets the focus to the widget.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the focus method.

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

Try it: focuses the jqxTree.

getCheckedItems Method

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.

Parameter	Type	Description
None

Return Value
Array

Code example

Invoke the getCheckedItems method.

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

Try it: Invoke the getCheckedItems method of the jqxTree.

getUncheckedItems Method

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.

Parameter	Type	Description
None

Return Value
Array

Code example

Invoke the getUncheckedItems method.

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

Try it: Invoke the getUncheckedItems method of the jqxTree.

getItems Method

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.

Parameter	Type	Description
None

Return Value
Array

Code example

Invoke the getItems method.

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

Try it: Invoke the getItems method of the jqxTree.

getItem Method

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.

Parameter	Type	Description
None

Return Value
Object

Code example

Invoke the getItem method.

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

Try it: Invoke the getItem method of the jqxTree.

getSelectedItem Method

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.

Parameter	Type	Description
None

Return Value
Object

Code example

Invoke the getSelectedItem method.

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

Try it: Invoke the getSelectedItem method of the jqxTree.

getPrevItem Method

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.

Parameter	Type	Description
None

Return Value
Object

Code example

Invoke the getPrevItem method.

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

Try it: Invoke the getPrevItem method of the jqxTree.

getNextItem Method

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.

Parameter	Type	Description
None

Return Value
Object

Code example

Invoke the getNextItem method.

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

Try it: Invoke the getNextItem method of the jqxTree.

hitTest Method

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

Parameter	Type	Description
left	Number
top	Number

Return Value
Object

Code example

Invoke the hitTest method.

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

Try it: Invoke the hitTest method of the jqxTree.

removeItem Method

Removes an item.

Parameter	Type	Description
item	Object

Return Value
None

Code example

Invoke the removeItem method.

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

Try it: removes an item in the jqxTree.

render Method

Renders the jqxTree widget.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the render method.

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

Try it: renders the jqxTree.

refresh Method

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

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the refresh method.

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

Try it: refresh the jqxTree.

selectItem Method

Selects an item.

Parameter	Type	Description
item	Object

Return Value
None

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

Try it: selects item in the jqxTree.

uncheckAll Method

Unchecks all tree items.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the uncheckAll method.

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

Try it: unchecks all items in the jqxTree.

uncheckItem Method

Unchecks a tree item.

Parameter	Type	Description
item	Object

Return Value
None

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

Try it: unchecks an item in the jqxTree.

updateItem Method

Updates an item.

Parameter	Type	Description
item	Object
newItem	Object

Return Value
None

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

Try it: updates an item in the jqxTree.

val Method

Sets or gets the selected item.

Parameter	Type	Description
value	String

Return Value
String

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

Try it: Invoke the val method of the jqxTree.

Properties

Code examples

Code examples

Code example

Code example

Code examples

Code example

Code example

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Code example

Code example

Code examples

Code examples

Code examples

Code examples

Code examples

Methods

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example