jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
2,615 lines • 135 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, Tree, jQuery Tree, TreeView, Tree Widget, jqxTree, jquery mobile tree, jquery mobile treeview" />
<meta name="description" content="This page represents the help documentation of the jqxTree widget." />
<title>jqxTree API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">Properties</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>animationShowDuration</span>
</td>
<td>
<span>Number</span>
</td>
<td>350
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the duration of the show animation.
</p>
<h4>Code examples</h4>
<p>
Set the <code>animationShowDuration</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({ animationShowDuration: 500 }); </code></pre>
<p>
Get the <code>animationShowDuration</code> property.
</p>
<pre><code>var animationShowDuration = $('#jqxTree').jqxTree('animationShowDuration'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mwskv/">animationShowDuration is set to 1000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>animationHideDuration</span>
</td>
<td>
<span>Number</span>
</td>
<td>fast
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the duration of the hide animation.
</p>
<h4>Code examples</h4>
<p>
Set the <code>animationHideDuration</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({ animationHideDuration: 500 }); </code></pre>
<p>
Get the <code>animationHideDuration</code> property.
</p>
<pre><code>var animationHideDuration = $('#jqxTree').jqxTree('animationHideDuration'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Up7VT/">animationHideDuration is set to 1000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span42'>allowDrag</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables the dragging of Tree Items.(requires jqxdragdrop.js)
</p>
<h4>Code example</h4>
<p>
Set the <code>allowDrag</code> property.
</p>
<pre><code>$("#jqxTree").jqxTree({allowDrag:true}); </code></pre>
<p>
Get the <code>allowDrag</code> property.
</p>
<pre><code>var allowDrag = $('#jqxTree').jqxTree('allowDrag'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aG7FF/">allowDrag is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span43'>allowDrop</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables the dropping of Tree Items.(requires jqxdragdrop.js)
</p>
<h4>Code example</h4>
<p>
Set the <code>allowDrop</code> property.
</p>
<pre><code>$("#jqxTree").jqxTree({allowDrop:true}); </code></pre>
<p>
Get the <code>allowDrop</code> property.
</p>
<pre><code>var allowDrop = $('#jqxTree').jqxTree('allowDrop'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aBYCY/">allowDrop is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>checkboxes</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code examples</h4>
<p>
Set the <code>checkboxes</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({ checkboxes: true }); </code></pre>
<p>
Get the <code>checkboxes</code> property.
</p>
<pre><code>var checkboxes = $('#jqxTree').jqxTree('checkboxes'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c3ZTB/">checkboxes is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span47'>dragStart</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback function which is called when a drag operation starts.
</p>
<h4>Code example</h4>
<p>
Set the <code>dragStart</code> property.
</p>
<pre><code>$("#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;
}
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aQNUd/">dragStart is set to a custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span48'>dragEnd</span>
</td>
<td>
<span>Function</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Callback function which is called when a drag operation ends.
</p>
<h4>Code example</h4>
<p>
Set the <code>dragEnd</code> property.
</p>
<pre><code>$('#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.
}
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kDPyz/">dragEnd is set to a custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>disabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Gets or sets whether the tree is disabled.
</p>
<h4>Code examples</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({ disabled:true }); </code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxTree').jqxTree('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/J2gFM/">disabled is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>easing</span>
</td>
<td>
<span>String</span>
</td>
<td>'easeInOutCirc'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the animation's easing to one of the JQuery's supported easings.
</p>
<h4>Code examples</h4>
<p>
Set the <code>easing</code> property .
</p>
<pre><code>$('#jqxTree').jqxTree({ easing: 'easeInOutCirc' }); </code></pre>
<p>
Get the <code>easing</code> property.
</p>
<pre><code>var easing = $('#jqxTree').jqxTree('easing'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m8k4K/">easing is set to 'easeInOutCirc'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>enableHover</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the hover state.
</p>
<h4>Code examples</h4>
<p>
Set the <code>enableHover</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({ enableHover: true }); </code></pre>
<p>
Get the <code>enableHover</code> property.
</p>
<pre><code>var enableHover = $('#jqxTree').jqxTree('enableHover'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c8tjU/">enableHover is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>height</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the tree's height.
</p>
<h4>Code examples</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({height:"400px"});</code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxTree').jqxTree('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ntEC8/">height is set to '300px'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>hasThreeStates</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets whether the tree checkboxes have three states - checked, unchecked and indeterminate.
</p>
<h4>Code examples</h4>
<p>
Set the <code>hasThreeStates</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({ hasThreeStates: true }); </code></pre>
<p>
Get the <code>hasThreeStates</code> property.
</p>
<pre><code>var hasThreeStates = $('#jqxTree').jqxTree('hasThreeStates'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/h9CAa/">hasThreeStates is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span112'>incrementalSearch</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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.
</p>
<h4>Code examples</h4>
<p>
Set the <code>incrementalSearch</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({incrementalSearch:false});</code></pre>
<p>
Get the <code>incrementalSearch</code> property.
</p>
<pre><code>var incrementalSearch = $('#jqxTree').jqxTree('incrementalSearch');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pB4K6/">incrementalSearch is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>keyboardNavigation</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Enables or disables the key navigation.
</p>
<h4>Code examples</h4>
<p>
Set the <code>keyboardNavigation</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({ keyboardNavigation: true }); </code></pre>
<p>
Get the <code>keyboardNavigation</code> property.
</p>
<pre><code>var keyboardNavigation = $('#jqxTree').jqxTree('keyboardNavigation'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9DAMf/">keyboardNavigation is set to false</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span68'>rtl</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p>
<h4>Code example</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({rtl : true}); </code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxTree').jqxTree('rtl'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hxz5N/">rtl is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>source</span>
</td>
<td>
<span>Object</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Specifies the jqxTree's data source. Use this property to populate the jqxTree.
</p>
Each tree item in the source object may have the following fields:
<br />
Item Fields
<ul>
<li>label - sets the item's label.</li>
<li>value - sets the item's value.</li>
<li>html - item's html. The html to be displayed in the item.</li>
<li>id - sets the item's id.</li>
<li>disabled - sets whether the item is enabled/disabled.</li>
<li>checked - sets whether the item is checked/unchecked(when checkboxes are enabled).</li>
<li>expanded - sets whether the item is expanded or collapsed.</li>
<li>selected - sets whether the item is selected.</li>
<li>items - sets an array of sub items.</li>
<li>icon - sets the item's icon(url is expected).</li>
<li>iconsize - sets the size of the item's icon.</li>
</ul>
<h4>Code examples</h4>
<p>
Initialize a jqxTree with the <code>source</code> property specified.
</p>
<pre><code>
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'});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fFqzU/">source is set to source</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>toggleIndicatorSize</span>
</td>
<td>
<span>Number</span>
</td>
<td>16
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the size of the expand/collapse arrows.
</p>
<h4>Code examples</h4>
<p>
Set the <code>toggleIndicatorSize</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({ toggleIndicatorSize: 0 }); </code></pre>
<p>
Get the <code>toggleIndicatorSize</code> property.
</p>
<pre><code>var toggleIndicatorSize = $('#jqxTree').jqxTree('toggleIndicatorSize'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3T38v/">toggleIndicatorSize is set to 20</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>toggleMode</span>
</td>
<td>
<span>String</span>
</td>
<td>dblclick
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets user interaction used for expanding or collapsing any item.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'click'</code></pre>
<pre><code>'dblclick'</code></pre>
<h4>Code examples</h4>
<p>
Set the <code>toggleMode</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({ toggleMode: 'click' }); </code></pre>
<p>
Get the <code>toggleMode</code> property.
</p>
<pre><code>var toggleMode = $('#jqxTree').jqxTree('toggleMode'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/X3vE7/">toggleMode is set to 'click'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>theme</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the widget's theme.
</p>
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:
<ul>
<li>Include the theme's CSS file after jqx.base.css.<br />
The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
</code></pre>
</code></pre>
</li>
<li>Set the widget's theme property to 'energyblue' when you initialize it.
</li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/a6rZu/">theme is set to 'energyblue'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='property-name-disabled'>width</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the tree's width.
</p>
<h4>Code examples</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$('#jqxTree').jqxTree({width:"200px"});</code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxTree').jqxTree('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3TPhH/">width is set to '300px'</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Events</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>added</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user adds a new tree item.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>added</code> event by type: jqxTree.
</p>
<pre><code>$('#jqxTree').on('added', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kE4xD/">Bind to the added event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>checkChange</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user checks, unchecks or the checkbox is in indeterminate state.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>checkChange</code> event by type: jqxTree.
</p>
<pre><code>$('#jqxTree').on('checkChange', function (event)
{
var args = event.args;
var element = args.element;
var checked = args.checked;
}); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ASBn8/">Bind to the checkChange event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>collapse</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user collapses a tree item.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>collapse</code> event by type: jqxTree.
</p>
<pre><code>$('#jqxTree').on('collapse',function (event) {
var args = event.args;
var item = $('#jqxTree').jqxTree('getItem', args.element);
var label = item.label;
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GrU6M/">Bind to the collapse event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span45'>dragStart</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user starts a drag operation.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>dragStart</code> event by type: jqxTree.
</p>
<pre><code>$("#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;
}
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/y9htx/">Bind to the dragStart event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span46'>dragEnd</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user drops an item.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>dragEnd</code> event by type: jqxTree.
</p>
<pre><code>$("#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;
}
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7TT7r/">Bind to the dragEnd event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>expand</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user expands a tree item.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>expand</code> event by type: jqxTree.
</p>
<pre><code>$('#jqxTree').on('expand', function (event) {
var args = event.args;
var item = $('#jqxTree').jqxTree('getItem', args.element);
var label = item.label;
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/M9KaF/">Bind to the expand event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>initialized</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the jqxTree is created and initialized.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>initialized</code> event by type: jqxTree.
</p>
<pre><code>$('#jqxTree').on('initialized', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/22jma/">Bind to the initialized event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span57'>itemClick</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user clicks a tree item.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>itemClick</code> event by type: jqxTree.
</p>
<pre><code>$('#jqxTree').on('itemClick',function (event)
{
var args = event.args;
var item = $('#jqxTree').jqxTree('getItem', args.element);
var label = item.label;
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xm1maabe/">Bind to the itemClick event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>removed</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user removes a tree item.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>removed</code> event by type: jqxTree.
</p>
<pre><code>$('#jqxTree').on('removed', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JbArT/">Bind to the removed event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>select</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user selects a tree item.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>select</code> event by type: jqxTree.
</p>
<pre><code>$('#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".
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ccegq/">Bind to the select event by type: jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Methods</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>addBefore</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Adds an item as a sibling of another item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>id</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>addBefore</code> method.
</p>
<pre><code>
$('#jqxTree').jqxTree('addBefore', newElement, element);
</code></pre>
<br />
The following code adds a new item before the first tree item:
<pre><code>
var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
var firstItemElement = firstItem.element;
$('#jqxTree').jqxTree('addBefore', { label: 'Item' }, firstItemElement);
</code></pre>
<br />
The following code adds a new item before a tree item by using the item's ID.
<pre><code>
var elementByID = $('#jqxTree').find("#home")[0];
$('#jqxTree').jqxTree('addBefore', { label: 'Item' }, elementByID);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EBLCX/">adds new item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span53'>addAfter</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Adds an item as a sibling of another item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>id</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>addAfter</code> method.
</p>
<pre><code>
$('#jqxTree').jqxTree('addAfter', newElement, element);
</code></pre>
<br />
The following code adds a new item after the first tree item:
<pre><code>
var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
var firstItemElement = firstItem.element;
$('#jqxTree').jqxTree('addAfter', { label: 'Item' }, firstItemElement);
</code></pre>
<br />
The following code adds a new item after a tree item by using the item's ID.
<pre><code>
var elementByID = $('#jqxTree').find("#home")[0];
$('#jqxTree').jqxTree('addAfter', { label: 'Item' }, elementByID);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DPK78/">adds new item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>addTo</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Adds an item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>id</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>addTo</code> method.
</p>
<pre><code>// @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);
</code></pre>
<br />
The following code adds a new item to the jqxTree:
<pre><code>
$('#jqxTree').jqxTree('addTo', { label: 'Item' });
</code></pre>
<br />
The following code adds a new sub item to the first tree item:
<pre><code>
var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
var firstItemElement = firstItem.element;
$('#jqxTree').jqxTree('addTo', { label: 'Item' }, firstItemElement);
</code></pre>
<br />
The following code adds a new sub item to a tree item by using the item's ID.
<pre><code>
var elementByID = $('#jqxTree').find("#home")[0];
$('#jqxTree').jqxTree('addTo', { label: 'Item' }, elementByID);
</code></pre>
The following code adds a new item with custom HTML and specific ID to the jqxTree.
<pre style='margin: 10px;' class='code'>$(<span style=" clear: both; padding: 0px; margin: 0px;">'#jqxTree').jqxTree('addTo', { html: <span style="clear: both; padding: 0px; margin: 0px;>"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><span style='font-weight: bold;' id='myItem'</span>></span>Item<span style="clear: both; padding: 0px; margin: 0px;></span></span>"</span> });<div/></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/t29qD/">adds new sub item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span33'>clear</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Removes all elements.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>clear</code> method.
</p>
<pre><code>$('#jqxTree').jqxTree('clear');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kNvRR/">clears all items in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span44'>checkAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Checks all tree items.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>checkAll</code> method.
</p>
<pre><code>$('#jqxTree').jqxTree('checkAll');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZKu6Z/">checks all items in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>checkItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Checks a tree item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>checked</em></td>
<td>Boolean</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>checkItem</code> method.
</p>
<pre><code>// @param element (li tag)
// @param true, false or null. - CheckBox state.
$('#jqxTree').jqxTree('checkItem', element, true);
</code></pre>
<br />
// check an item with id="home"
<pre><code>
var newCheckState = true;
$("#jqxTree").jqxTree('checkItem', $("#home")[0], newCheckState);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pMZS7/">checks an item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span29'>collapseAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Collapses all items.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>collapseAll</code> method.
</p>
<pre><code>$('#jqxTree').jqxTree('collapseAll');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Hnyrt/">collapse all items in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>collapseItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Collapses a tree item by passing an element as parameter.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>collapseItem</code> method.
</p>
<pre><code>// @param element (li tag)
$('#jqxTree').jqxTree('collapseItem', element);
</code></pre>
<br />
// Collapse item with id="home"
<pre><code>
$("#jqxTree").jqxTree('collapseItem', $("#home")[0]);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/p4Tj9/">collapse an item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span52'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Destroy the jqxTree widget. The destroy method removes the jqxTree widget from the web page.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxTree').jqxTree('destroy');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/26aEY/">destroy the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>disableItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Disables a tree item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>disableItem</code> method.
</p>
<pre><code>// @param element (li tag)
$('#jqxTree').jqxTree('disableItem', element);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/smv8K/">disables an item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span37'>ensureVisible</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Ensures the visibility of an element.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>ensureVisible</code> method.
</p>
<pre><code>// @param element (li tag)
$('#jqxTree').jqxTree('ensureVisible', element);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VvB6g/">ensures the vizibility of an element in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>enableItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Enables a tree item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>enableItem</code> method.
</p>
<pre><code>// @param element (li tag)
$('#jqxTree').jqxTree('enableItem', element);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/H7sTs/">enables an item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>expandAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Expandes all items.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>expandAll</code> method.
</p>
<pre><code>$('#jqxTree').jqxTree('expandAll');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QgKMu/">expand all items in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>expandItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Expands a tree item by passing an element as parameter.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>expandItem</code> method.
</p>
<pre><code>// @param element (li tag)
$('#jqxTree').jqxTree('expandItem', element);
</code></pre>
<br />
// Expand item with id="home"
<pre><code>
$("#jqxTree").jqxTree('expandItem', $("#home")[0]);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZaaBJ/">expand an item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span55'>focus</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the focus to the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>focus</code> method.
</p>
<pre><code>$("#jqxTree").jqxTree('focus'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4a7jG/">focuses the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span40'>getCheckedItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Gets an array with all checked tree items.</p>
Each tree item has the following fields:
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>element - gets the item's LI tag.</li>
<li>parentElement - gets the item's parent LI tag.</li>
<li>isExpanded - gets whether the item is expanded or collapsed.</li>
<li>selected - gets whether the item is selected or not.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getCheckedItems</code> method.
</p>
<pre><code>var items = $('#jqxTree').jqxTree('getCheckedItems');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tEDgb/">Invoke the getCheckedItems method of the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span41'>getUncheckedItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Gets an array with all unchecked tree items.</p>
Each tree item has the following fields:
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>element - gets the item's LI tag.</li>
<li>parentElement - gets the item's parent LI tag.</li>
<li>isExpanded - gets whether the item is expanded or collapsed.</li>
<li>selected - gets whether the item is selected or not.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getUncheckedItems</code> method.
</p>
<pre><code>var items = $('#jqxTree').jqxTree('getUncheckedItems');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6pC5L/">Invoke the getUncheckedItems method of the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>getItems</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Gets an array with all tree items.</p>
Each tree item has the following fields:
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>element - gets the item's LI tag.</li>
<li>parentElement - gets the item's parent LI tag.</li>
<li>isExpanded - gets whether the item is expanded or collapsed.</li>
<li>selected - gets whether the item is selected or not.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Array</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getItems</code> method.
</p>
<pre><code>var items = $('#jqxTree').jqxTree('getItems');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/W4NZw/">Invoke the getItems method of the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>getItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Gets the tree item associated to a LI tag passed as parameter. The returned value is an Object.</p>
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>element - gets the item's LI tag.</li>
<li>parentElement - gets the item's parent LI tag.</li>
<li>isExpanded - gets whether the item is expanded or collapsed.</li>
<li>selected - gets whether the item is selected or not.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getItem</code> method.
</p>
<pre><code>// @param element (li tag)
var item = $('#jqxTree').jqxTree('getItem', element);</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4ssYx/">Invoke the getItem method of the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span38'>getSelectedItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Gets the selected tree item.</p>
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>element - gets the item's LI tag.</li>
<li>parentElement - gets the item's parent LI tag.</li>
<li>isExpanded - gets whether the item is expanded or collapsed.</li>
<li>selected - gets whether the item is selected or not.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getSelectedItem</code> method.
</p>
<pre><code>var item = $('#jqxTree').jqxTree('getSelectedItem');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BQ7a6/">Invoke the getSelectedItem method of the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>getPrevItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Gets the item above another item. The returned value is an Object.</p>
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>element - gets the item's LI tag.</li>
<li>parentElement - gets the item's parent LI tag.</li>
<li>isExpanded - gets whether the item is expanded or collapsed.</li>
<li>selected - gets whether the item is selected or not.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getPrevItem</code> method.
</p>
<pre><code>var selectedItem = $("#jqxTree").jqxTree('selectedItem');
var prevItem = $("#jqxTree").jqxTree('getPrevItem', selectedItem.element);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6L43j/">Invoke the getPrevItem method of the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>getNextItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Gets the item below another item. The returned value is an Object.</p>
<br />
Item Fields
<ul>
<li>label - gets item's label.</li>
<li>value - gets the item's value.</li>
<li>disabled - gets whether the item is enabled/disabled.</li>
<li>checked - gets whether the item is checked/unchecked.</li>
<li>element - gets the item's LI tag.</li>
<li>parentElement - gets the item's parent LI tag.</li>
<li>isExpanded - gets whether the item is expanded or collapsed.</li>
<li>selected - gets whether the item is selected or not.</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getNextItem</code> method.
</p>
<pre><code>var selectedItem = $("#jqxTree").jqxTree('selectedItem');
var nextItem = $("#jqxTree").jqxTree('getNextItem', selectedItem.element);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zHr3E/">Invoke the getNextItem method of the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span56'>hitTest</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Gets an item at specific position. The method expects 2 parameters - left and top. The coordinates are relative to the document.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>left</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>top</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>hitTest</code> method.
</p>
<pre><code>var item = $('#jqxTree').jqxTree('hitTest', 10, 20);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8KQpc/">Invoke the hitTest method of the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>removeItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Removes an item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>removeItem</code> method.
</p>
<pre><code>// @param element (li tag)
$('#jqxTree').jqxTree('removeItem', element);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Jbeeu/">removes an item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span39'>render</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Renders the jqxTree widget.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>render</code> method.
</p>
<pre><code>$('#jqxTree').jqxTree('render');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rUL6y/">renders the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>refresh</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Refreshes the jqxTree widget. The refresh method will update the jqxTree's layout and size.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>refresh</code> method.
</p>
<pre><code>$('#jqxTree').jqxTree('refresh');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hM9mL/">refresh the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>selectItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Selects an item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>selectItem</code> method.
</p>
<pre><code>// @param element (li tag)
$('#jqxTree').jqxTree('selectItem', element);
</code></pre>
<h4>Code example</h4>
<p>
Invoke the <code>selectItem</code> method.
</p>
<pre><code>
$('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
</code></pre>
<br />
// Select item with id="home"
<pre><code>
$("#jqxTree").jqxTree('selectItem', $("#home")[0]);
</code></pre>
<br />
// Clear selection.
<pre><code>
$("#jqxTree").jqxTree('selectItem', null);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yWBZJ/">selects item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span49'>uncheckAll</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Unchecks all tree items.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>uncheckAll</code> method.
</p>
<pre><code>$('#jqxTree').jqxTree('uncheckAll');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6YMr8/">unchecks all items in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span50'>uncheckItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Unchecks a tree item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>uncheckItem</code> method.
</p>
<pre><code>// @param element (li tag)
$('#jqxTree').jqxTree('uncheckItem', element);
</code></pre>
<br />
// uncheck an item with id="home"
<pre><code>
var newCheckState = true;
$("#jqxTree").jqxTree('uncheckItem', $("#home")[0]);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pD3by/">unchecks an item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span54'>updateItem</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>Updates an item.</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>Object</td>
<td></td>
</tr>
<tr>
<td><em>newItem</em></td>
<td>Object</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>updateItem</code> method.
</p>
<pre><code>// @param element (li tag)
$('#jqxTree').jqxTree('updateItem', element, {label: "New Label"});
</code></pre>
The following code updates the first item.
<pre><code>
var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
$('#jqxTree').jqxTree('updateItem', firstItem, { label: 'Item' });
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vDxbQ/">updates an item in the jqxTree.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>val</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the selected item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>value</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>String</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>val</code> method.
</p>
// Get the selected item.
<pre><code>var value = $("#jqxTree").jqxTree('val');</code></pre>
// Get the selected tab's index using jQuery's val()
<pre><code>var value = $("#jqxTree").val();</code></pre>
// Set the selected item. The element should be a LI tag from the jqxTree's HTML Structure.
<pre><code>$("#jqxTree").jqxTree('val', element);</code></pre>
// Set the selected tab using jQuery's val().
<pre><code>$("#jqxTree").val(element);</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XGUrU/">Invoke the val method of the jqxTree.</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</div>
</body>
</html>