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, jQuery TreeGrid, TreeGrid, TreeGrids, JavaScript TreeGrid, HTML TreeGrid, jQuery mobile treegrid, treelist widget, treelist control, javascript mobile treelist, javascript mobile treegrid" /> <meta name="description" content="This page represents the help documentation of the jqxTreeGrid widget." /> <title>jqxTreeGrid 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='Span28'>altRows</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 jqxTreeGrid automatically alternates row colors. </p> <h4>Code examples </h4> <p> Set the <code>altRows</code> property. </p> <pre><code>$('#treeGrid').jqxTreeGrid({altRows: true}); </code></pre> <p> Get the <code>altRows</code> property. </p> <pre><code>var altRows = $('#treeGrid').jqxTreeGrid('altRows'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sznLP/">altRows is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span38'>autoRowHeight</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> Sets or gets whether the jqxTreeGrid automatically calculates the rows height and wraps the cell text. </p> <h4>Code examples </h4> <p> Set the <code>autoRowHeight</code> property. </p> <pre><code>$('#treeGrid').jqxTreeGrid({autoRowHeight: true}); </code></pre> <p> Get the <code>autoRowHeight</code> property. </p> <pre><code>var autoRowHeight = $('#treeGrid').jqxTreeGrid('autoRowHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tQWJM/">autoRowHeight is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span39'>aggregatesHeight</span> </td> <td> <span>Number</span> </td> <td>34 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the height of the aggregates bar. Aggregates bar is displayed after setting <code>showAggregates</code> to true. </p> <h4>Code examples </h4> <p> Set the <code>aggregatesHeight</code> property. </p> <pre><code>$('#treeGrid').jqxTreeGrid({aggregatesHeight: 50}); </code></pre> <p> Get the <code>aggregatesHeight</code> property. </p> <pre><code>var aggregatesHeight = $('#treeGrid').jqxTreeGrid('aggregatesHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5AL7t/">aggregatesHeight is set to 40</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span40'>autoShowLoadElement</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> Sets or gets whether the loading html element with animated gif is automatically displayed by the widget during the data binding process. </p> <h4>Code examples </h4> <p> Set the <code>autoShowLoadElement</code> property. </p> <pre><code>$('#treeGrid').jqxTreeGrid({autoShowLoadElement: false}); </code></pre> <p> Get the <code>autoShowLoadElement</code> property. </p> <pre><code>var autoShowLoadElement = $('#treeGrid').jqxTreeGrid('autoShowLoadElement'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GF3Ld/">autoShowLoadElement is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span48'>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> Determines whether checkboxes are displayed or not. </p> <h4>Code examples </h4> <p> Set the <code>checkboxes</code> property. </p> <pre><code>$('#treeGrid').jqxTreeGrid({checkboxes: true}); </code></pre> You can also set the <code>checkboxes</code> property to a function. The function's result should be <code>true</code> or <code>false</code> depending on whether you want a checkbox to be displayed or not. <br /> <pre><code> checkboxes: function (rowKey, dataRow) { var level = dataRow.level; if (level == 0) { return true; } return false; } </code></pre> <p> Get the <code>checkboxes</code> property. </p> <pre><code>var checkboxes = $('#treeGrid').jqxTreeGrid('checkboxes'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fhbLa/">checkboxes is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span41'>columnsHeight</span> </td> <td> <span>Number</span> </td> <td>30 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the height of the columns header. </p> <h4>Code examples </h4> <p> Set the <code>columnsHeight</code> property. </p> <pre><code>$('#treeGrid').jqxTreeGrid({columnsHeight: 40}); </code></pre> <p> Get the <code>columnsHeight</code> property. </p> <pre><code>var columnsHeight = $('#treeGrid').jqxTreeGrid('columnsHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/FppLy/">columnsHeight is set to 40</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span42'>columns</span> </td> <td> <span>Array</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 jqxTreeGrid's columns. </p> <br /> List of properties: <ul> <li>text - string property which sets the column header's text.</li> <li>dataField - string property which sets the column's bound field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.</li> <li>displayField - string property which sets the column's display field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.</li> <li>sortable - boolean property which determines whether the column is sortable.</li> <li>filterable - boolean property which determines whether the column is filterable.</li> <li>hidden - boolean property which determines whether the column is visible or hidden.</li> <li>columnGroup - string property which determines the name of the column's parent group. It should point to a valid name defined in the <code>columnGroups</code>.</li> <li>autoCellHeight - boolean property which determines whether the cell's data wrapping is enabled. This property is set to <code>true</code> by default. When <code>autoRowHeight</code> is enabled and <code>autoCellHeight</code> is set to false, the cell's data will not be wrapped.</li> <li>renderer - callback function for custom rendering of the column's header. <h4>Code Example</h4> <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>renderer: function (text, align, height) {<div /> var checkBox = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div id=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'checkbox' style='z-index: 999; margin: 5px; margin-left: 30px; margin-top: 8px; margin-bottom: 3px;'</span>></span>"</span>;<div /> checkBox += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> return checkBox;<div />}<div /></pre> </li> <li>rendered - callback function which is called after the column's header rendering is completed. <h4>Code Example</h4> <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>rendered: function (element, align, height) {<div /> element.jqxCheckBox();<div /> element.on(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'change'</span>, function (event) {<div /> if (!updatingSelectionFromtreeGrid) {<div /> var args = event.args;<div /> var rows = $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'getRows'</span>);<div /> updatingSelection = true;<div /> if (args.checked) {<div /> for (var i = 0; i < rows.length; i++) {<div /> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'selectRow'</span>, i);<div /> }<div /><div /> }<div /> else {<div /> $(<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"#treeGrid"</span>).jqxTreeGrid(<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'clearSelection'</span>);<div /> }<div /> updatingSelection = false;<div /> }<div /> });<div /> return true;<div />}<div /></pre> </li> <li>cellsRenderer - callback function which is called when a cell is being rendered. The result of that function should be valid and well-formatted HTML String. The cellsRenderer function has 4 parameters passed by jqxTreeGrid - row's key, column's data field, cell's value, row's data as an Object of Key/Value pairs. <h4>Code Example</h4> <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>{<div /> text: <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'Details', align: 'center', dataField: 'lastname'</span>,<div /> // row - row's key.<div /> // column - column's data field.<div /> // value - cell's value.<div /> // rowData - rendered row's object.<div /> cellsRenderer: function (row, column, value, rowData) {<div /> var container = <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"width: 100%; height: 100%;"</span>></span>'</span><div /> var leftcolumn = <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left; width: 50%;"</span>></span>'</span>;<div /> var rightcolumn = <span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"float: left; width: 50%;"</span>></span>'</span>;<div /> <div /> var firstname = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><b></span>First Name:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></b></span> " + rowData.firstname + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> var lastname = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><b></span>Last Name:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></b></span> " + rowData.lastname + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> var title = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><b></span>Title:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></b></span> " + rowData.title + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> var address = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><b></span>Address:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></b></span> " + rowData.address + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> <div /> leftcolumn += firstname;<div /> leftcolumn += lastname;<div /> leftcolumn += title;<div /> leftcolumn += address;<div /> leftcolumn += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /><div /> var postalcode = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><b></span>Postal Code:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></b></span> " + rowData.postalcode + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> var city = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><b></span>City:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></b></span> " + rowData.city + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> var phone = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><b></span>Phone:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></b></span> " + rowData.homephone + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> var hiredate = <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><div style=<span style=" clear: both; padding: 0px; margin: 0px; color: #a24;">'margin: 10px;'</span>></span><span style="clear: both; padding: 0px; margin: 0px; color: #11a;"><b></span>Hire Date:<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></b></span> " + rowData.hiredate + "<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /><div /> rightcolumn += postalcode;<div /> rightcolumn += city;<div /> rightcolumn += phone;<div /> rightcolumn += hiredate;<div /> rightcolumn += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> container += leftcolumn;<div /> container += rightcolumn;<div /> container += <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;"></div></span>"</span>;<div /> return container;<div /> }<div />}<div /></pre> </li> <li>columnType - string property which determines the column's type.<br /> Possible values: <ul> <li>"template" - sets a custom editor as a default editor for the column. The editor should be created in the <code>createEditor</code> callback function. The editor should be synchronized with the cell's value in the <code>initEditor</code> callback. The editor's value should be retrieved in the <code>getEditorValue</code> callback function.</li> <li>"custom" - sets a custom editor as a default editor for a cell. That setting enables you to have different cell editors in the column. The editors should be created in the <code>createEditor</code> callback function which is called for each row when the <code>columnType</code> property is set to "custom". The editors should be synchronized with the cell's value in the <code>initEditor</code> callback. The editor's value should be retrieved in the <code>getEditorValue</code> callback function.</li> </ul> </li> <li>validation - callback function which is called when the jqxTreeGrid's edited row needs to be validated. The function has 2 parameters - edit cell and the cell's value. The function should return true or false, depending on the user's validation logic. It can also return a validation object with 2 fields - "result" - true or false, and "message" - validation string displayed to the users. <h4>Code Example</h4> <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>validation: function (cell, value) {<div /> var date = new Date(value);<div /> if (date.getFullYear() > 2014 || date.getFullYear() < 1990) {<div /> return { message: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"Shipped Date should be in the 1990 - 2014 interval"</span>, result: false };<div /> }<div /> return true;<div />}<div /></pre> </li> <li>initEditor - callback function which is called when an editor is opened. It has 5 parameters - row's key, cell's value, the editor element, cell's width and cell's height. The function can be used for adding some custom parameters to the editor. <h4>Code Example</h4> <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>initEditor: function (row, cellValue, editor, cellText, width, height) {<div /> // your code here<div />}<div /></pre> </li> <li>createEditor - callback function which is called just once when the cells editor is created. It has 5 parameters - row's key, cell's value, the editor element, cell's width and cell's height. The function can be used for adding some custom parameters to the editor. <h4>Code Example</h4> <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>createEditor: function (row, cellValue, editor, cellText, width, height) {<div /> // your code here<div />}<div /></pre> </li> <li>getEditorValue - callback function which could be used for overriding the value returned by the editor. It is useful for advanced scenarios with custom editors. It has 3 parameters - row's key, cell's value and the editor element. The result of the function is expected to be the editor's new value. <h4>Code Example</h4> <pre style='width: 600px; max-width: 600px; margin: 0px;' class='code'>getEditorValue: function (row, cellValue, editor) {<div /> // your code here<div />}<div /></pre> </li> <li>cellsFormat - determines the Format string used for formatting the cell values.<br /> <br /> Possible Number strings: <br /> "d" - decimal numbers. <br /> "f" - floating-point numbers. <br /> "n" - integer numbers. <br /> "c" - currency numbers. <br /> "p" - percentage numbers. <br /> <br /> For adding decimal places to the numbers, add a number after the formatting string. <br /> For example: "c3" displays a number in this format $25.256 <br /> Possible built-in Date formats: <br /> <br /> // short date pattern d: "M/d/yyyy", <br /> // long date pattern D: "dddd, MMMM dd, yyyy", <br /> // short time pattern t: "h:mm tt", <br /> // long time pattern T: "h:mm:ss tt", <br /> // long date, short time pattern f: "dddd, MMMM dd, yyyy h:mm tt", <br /> // long date, long time pattern F: "dddd, MMMM dd, yyyy h:mm:ss tt", <br /> // month/day pattern M: "MMMM dd", <br /> // month/year pattern Y: "yyyy MMMM", <br /> // S is a sortable format that does not vary by culture S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss" <br /> <br /> Possible Date format strings: <br /> <br /> "d"-the day of the month;<br /> "dd"-the day of the month; <br /> "ddd"-the abbreviated name of the day of the week;<br /> "dddd"- the full name of the day of the week;<br /> "h"-the hour, using a 12-hour clock from 1 to 12; <br /> "hh"-the hour, using a 12-hour clock from 01 to 12; <br /> "H"-the hour, using a 24-hour clock from 0 to 23;<br /> "HH"- the hour, using a 24-hour clock from 00 to 23; <br /> "m"-the minute, from 0 through 59;<br /> "mm"-the minutes,from 00 though59;<br /> "M"- the month, from 1 through 12;<br /> "MM"- the month, from 01 through 12;<br /> "MMM"-the abbreviated name of the month;<br /> "MMMM"-the full name of the month;<br /> "s"-the second, from 0 through 59; <br /> "ss"-the second, from 00 through 59; <br /> "t"- the first character of the AM/PM designator;<br /> "tt"-the AM/PM designator; <br /> "y"- the year, from 0 to 99; <br /> "yy"- the year, from 00 to 99; <br /> "yyy"-the year, with a minimum of three digits; <br /> "yyyy"-the year as a four-digit number; <br /> </li> <li>aggregates - array property which determines the column aggregates.<br /> <br /> <h4>Code Examples</h4> <pre><code>{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }</code></pre> <br /> Aggregate functions: <ul> <li>'avg' - Average aggregate</li> <li>'count' - Count aggregate</li> <li>'min' - Min aggregate</li> <li>'max' - Max aggregate</li> <li>'sum' - Sum aggregate</li> <li>'product' - Product aggregate</li> <li>'stdev' - Standard deviation on a sample.</li> <li>'stdevp' - Standard deviation on an entire population.</li> <li>'varp' - Variance on an entire population.</li> <li>'var' - Variance on a sample.</li> </ul> <br /> Custom Aggregate<br /> <pre><code> aggregates: [{ 'In Stock': function (aggregatedValue, currentValue) { if (currentValue) { return aggregatedValue + 1; } return aggregatedValue; } } </code></pre> <br /> Custom Aggregate which aggregates values from two columns <br /> <pre><code> { text: 'Price', dataField: 'price', cellsAlign: 'right', cellsFormat: 'c2', aggregates: [{ '<b>Total</b>': function (aggregatedValue, currentValue, column, record) { var total = currentValue * parseInt(record['quantity']); return aggregatedValue + total; } }] } </code></pre> <br /> 'In Stock' - the aggregate's display name. The function has 2 params - the aggregated value and the current value. It should return an aggregated value. </li> <li>aggregatesRenderer - callback function which could be used for customization of the aggregates rendering. It has 1 parameter - the column's aggregates. <h4>Code Example</h4> <p> Apply aggregates. </p> <pre style='width: 630px; overflow: auto; max-height: 400px; max-width: 630px; margin: 0px;' class='code'>var data = [<div /> {<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas"</span>,<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div /> [<div /> {<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio"</span>,<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div /> [<div /> {<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio"</span>,<div /> children:<div /> [<div /> { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio"</span> },<div /> { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio"</span> },<div /> ]<div /> },<div /> { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio"</span> }<div /> ]<div /> },<div /> {<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami"</span>,<div /> <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"children"</span>:<div /> [<div /> { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami"</span> },<div /> { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami"</span> },<div /> { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami"</span> }<div /> ]<div /> },<div /> { <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id": "11", "name": "Research Division", "budget": "200000", "location": "Boston"</span> }<div /> ]<div /> }<div />];<div /><div />var source =<div /> {<div /> dataType: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"json"</span>,<div /> dataFields: [<div /> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"name", type: "string"</span> },<div /> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"budget", type: "number"</span> },<div /> { name: <span style="clear: both; padding: 0px; margin: 0px; color: #a24;">"id", type: "number"</span> },<div /> { name: <span style="clear: both; padding: