Tree Random Hierarchy through adding new nodes

A demonstration of the Ignite UI Tree hierarchy capabilities through free adding of nodes at any place and Drag and Drop moving http://stackoverflow.com/questions/17595053/infragistics-igtree-on-hierarchy-data

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>

	<ul id="tree"></ul>

  <button id="button">Click me</button>

	<button id="button1">Add Node</button>

</body>
</html>

CSS

.apiButton {
	text-align: center;
	padding: 0px 0.5em 0px 0.5em;
	margin: 0.1em !important;
	display: inline-block;
	cursor: pointer;
	background: #f0f0f0;
	border: 1px solid #a0a0a0;
}

.apiButton:hover {
	background: #d0d0f0;
	border: 1px solid #505090;
}

.apiInput {
	width: 3em;
	margin: 0.1em;
	border: 1px solid #a0a0a0;
}

JavaScript

var data = [ {
				"Text" : "North America",
        "ID" : 1,
				"Nodes" : [ {	"Text" : "United States", "ID" : 1 } ] 
			} , 
			{
				"Text" : "South America",
				"ID" : 2,        
				"Nodes" : [ {	"Text" : "United States 2", "ID" : 1} ]
			},
			{
				"Text" : "Europe",
				"ID" : 3,
				"Nodes" : [ {	"Text" : "United States 3", "ID" : 1} ]
			} ];

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/css/',
    resources: 'igTree'
});
		
$.ig.loader(function () {
    $("#tree").igTree({    
      	singleBranchExpand: true,
        dragAndDrop: true,
				dataSourceType: 'json',
				dataSource : data, //JSON Array defined above
				bindings : {
          textKey: 'Text',
          valueKey: 'Text',
          childDataProperty: 'Nodes'        
				}
			});
		});

		$(document).ready(
    function() {
				$("#button1").click(
					function() {

						//case 2
					    //igTree widget reference
					    var tree = $("#tree").data('igTree');
					    //get selected parent node
					    var selectedNode = tree.selectedNode();
					    //add a data object as new node (can be dynamically generated)
					    tree.addNode({
					        "Text" : "Neo Titans", "Nodes" : 
 									[
 										{	"Text" : "United States 11"},
 										{	"Text" : "United States 12"},
 										{	"Text" : "United States 13"}                    
 									]
					    }, selectedNode.element);

					}
				);
			});