Html Tree

Invoke the getItems method of the jqxTree. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxTree'>
  <ul>
    <li item-selected='true'>Home</li>
    <li item-expanded='true'>
      Solutions
      <ul>
        <li>Education</li>
        <li>Financial services</li>
        <li id="government">Government</li>
        <li>Manufacturing</li>
        <li>
          Solutions
          <ul>
            <li>Consumer photo and video</li>
            <li>Mobile</li>
          </ul>
        </li>
        <li>All industries and solutions</li>
      </ul>
    </li>
  </ul>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Create a duplicate jqxTree" />

JavaScript

$('#jqxTree').jqxTree({
  height: '300px',
  width: '300px',
  theme: 'energyblue'
});
$("#jqxbutton").jqxButton({
  theme: 'energyblue',
  height: 30
});
$('#jqxbutton').click(function() {
  var items = $('#jqxTree').jqxTree('getItems'),
    duplicateTreeSource = [];

  for (var i = 0; i < items.length; i++) {
    var item = items[i],
      newItem = {};

    newItem.id = item.id;
    newItem.parentid = item.parentId;
    newItem.label = item.label;
    newItem.value = item.value;
    duplicateTreeSource.push(newItem);
  }

  var source = {
    datatype: "json",
    datafields: [{
      name: 'id'
    }, {
      name: 'parentid'
    }, {
      name: 'label'
    }, {
      name: 'value'
    }],
    id: 'id',
    localdata: duplicateTreeSource
  };

  var dataAdapter = new $.jqx.dataAdapter(source);

  dataAdapter.dataBind();

  var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items');

  var duplicateTreeDiv = $('<div id="duplicateTree"></div>');
  $('body').append(duplicateTreeDiv);

  duplicateTreeDiv.jqxTree({
    theme: 'energyblue',
    source: records,
    width: '300px'
  });

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