jqwidgets-framework

<!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>