<!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;
}