<!DOCTYPE html>
<html>

<head>
  <style href="style.css">
  </style>
  <title></title>
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.mobile.min.css" />

  <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/angular.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div id="example" ng-app="KendoDemos" ng-controller="MyCtrl">
    <button ng-click='expandIt()'>Expand to Robert King</button>
    <button ng-click='addChild()'>Add Child</button>
    <button ng-click='enableToggle()'>Enable/Disable</button>
    <div class="demo-section k-header">
      <div kendo-tree-view="tree" k-data-source="treeData" k-data-text-field="FullName">
        <span k-template>
                     {{dataItem.FullName}}
                 </span>
      </div>

    </div>
    <script>
      
    </script>
  </div>
</body>

</html>
  var serviceRoot = "http://demos.telerik.com/kendo-ui/service";

  angular.module("KendoDemos", ["kendo.directives"])
    .controller("MyCtrl", function($scope, $http) {
      $scope.treeData = new kendo.data.HierarchicalDataSource({
        transport: {
          read: function(o) {
            $.ajax({
              url: serviceRoot + "/Employees",
              dataType: "jsonp",
              data: o.data /*the employeeId of the expanded node*/
            }).success(function(data) {
              if ($scope.foo1)
                $scope.foo2 = data;
              else
                $scope.foo1 = data;
              o.success(data)
            });
          }
        },
        schema: {
          model: {
            id: "EmployeeId",
            hasChildren: "HasEmployees"
          }
        }
      });

      $scope.expandIt = function() {
        expandMatches([
          [2, 5, 7]
        ]);
      }
      
      $scope.enableToggle = function() {
        $scope.enable = !$scope.enable;
        $scope.tree.enable(".k-item",!$scope.enable);
      }

      function onPathExpanded() {
        console.log('Path expanded!');
        var treeView = $scope.tree;
        // Doesn't appear to animate to the node as expected
        treeView.setOptions({
          animation: kendo.ui.TreeView.fn.options.animation
        });
        var searchNode = treeView.findByText('Robert King');
        //if (searchNode.length > 0)
        // Doesn't select the node????
        treeView.select(searchNode);
      }

      function expandMatches(nodeList) {
        var treeView = $scope.tree;
        for (var i = 0; i < nodeList.length; i++) {
          var innerList = nodeList[i];
          treeView.expandPath(innerList, onPathExpanded);
        }
      }
      
      var id = -100;
      var parentId = undefined;
      $scope.addChild = function() {
        var newItem = {
          FullName: 'New Node ' + id,
          EmployeeId: id,
        };
        var newNode = $scope.tree.append(newItem, findNodeByBusinessId(parentId));
        parentId = id--;
        $scope.tree.select(newNode);
      }

      function findNodeByBusinessId(id) {
        var dataItem = findDataItemByBusinessId(id);
        if (dataItem) {
          return $scope.tree.findByUid(dataItem.uid);
        }
        return undefined;
      }

      function findDataItemByBusinessId(id) {
        return $scope.tree.dataSource.get(id);
      }

    })
/* Styles go here */
html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

#example {
          text-align: center;
        }

        .demo-section {
          display: inline-block;
          vertical-align: top;
          width: 320px;
          height: 300px;
          text-align: left;
          margin: 0 2em;
        }