JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/angular.min.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtree.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.1/q.js"></script>
<div class="" ng-controller="treeController">
<jqx-tree jqx-settings="mySettings" jqx-instance="tree" class="jqx-hideborder jqx-draggable" ></jqx-tree>
</div>

JavaScript

angular.module('App', [])
.controller('treeController', function ($scope, $timeout) {
   var repoArya = new Repository("mainRepo", "Repository");
				    //console.log("RepoArya :: "+angular.toJson(repoArya));
					var data = [];
					//data.push(repoArya);
					
					var tooljson = [{"id":"xxx","label":"Repox","items":[{"id":"data1","label":"Data1","items":[{"id":"file1","label":"File_1","items":[]}]}]}];
					data = eval(tooljson);
					
					$scope.testData = data;
					console.log(" jqx tree data :: "+angular.toJson(data));

					// $scope.testData =
					// [{"id":"repositories","label":"Repositories","items":[{"id":"repository","label":"Repository","items":[]}]}];
					$scope.tree = {};
					$scope.mySettings = {
						source : $scope.testData,
						width : '300px',
						height : '600px',
						theme : "energyblue",
						allowDrag : true,
						allowDrop : false,
						select : function(event) {

							var item = $scope.tree.getItem(event.args.element);
							$scope.treeItemss = $scope.tree.getItems();
							console.log("Items : " + $scope.treeItemss.length)
							console.log("LABEL :" + item.label);
							console.log("Parent Id :" + item.parentId)
						},
						expand : function(item){
							
							var expandLabel= $scope.tree.getItem(item.args.element).label;
							var expandItemID = $scope.tree.getItem(item.args.element).id;
							var expandParentID = $scope.tree.getItem(item.args.element).parentId;
							console.log("expandItemID :: "+expandItemID);
							
							if(expandParentID=="data1"){
								
						    		var newjson ={"label":"newdata111","id":1};
						    		
						    		//$scope.mainitems = $scope.testData[0].items;
						    		
						    		angular.forEach($scope.testData[0].items,function(value,index){
						    			
						    			if(value.id==expandParentID){
						    				console.log("main value.id : "+angular.toJson(value));
						    				
						    				angular.forEach(value.items,function(value1,index){
						   ...