I am newbie to Kendo UI framework. I want to use Kendo_Tree view for my project purpose. Here i want to add some child nodes dynamically when the user tries to expand the tree. So my requirement is like the call to the server happens when the user expands the tree and the data which we got from server should be added to the tree dynamically.
I have tried the above scenario with some example, it is adding child nodes but the nodes are
overlapping(display is not following hierarchy). Please let me know how to add child nodes dynamically.
Please look at the following code:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treeview/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>TreeView</h4>
<div kendo-tree-view="tree"
k-data-source="treeData"
k-template="itemTemplate"
k-on-change="selectedItem = dataItem" k-on-expand="onExpand(kendoEvent)"></div>
</div>
<div class="box-col" ng-show="selectedItem">
<h4>Selected: {{selectedItem.text}}</h4>
<button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
<button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
<button class="k-button" ng-click="remove(selectedItem)">Delete</button>
</div>
</div>
<style scoped>
.k-treeview .k-in {
padding: 5px;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
{ text: "Item 1" },
{ text: "Item 2", items: [
{ text: "SubItem 2.1" },
{ text: "SubItem 2.2" }
] },
{ text: "Item 3" }
]});
$scope.itemTemplate = "{{dataItem.text}} <button class='k-button' ng-click='click(dataItem)'>Select</button>";
$scope.click = function(dataItem) {
alert(dataItem.text);
};
function makeItem() {
var txt = kendo.toString(new Date(), "HH:mm:ss");
return { text: txt };
};
$scope.onExpand = function(e) {
if ($('li.k-item ul.k-group').find()) {
alert("finded");
$('ul').addClass("no-high");
}
// can't get this to work by just modifying the data source
// therefore we're using tree.append instead.
var dataItem = $scope.tree.dataItem(e.node);
var newItem = makeItem();
dataItem.items.push(newItem);
//$scope.tree.append(newItem, $scope.tree.select());
}
$scope.addAfter = function(item) {
var array = item.parent();
var index = array.indexOf(item);
var newItem = makeItem();
array.splice(index + 1, 0, newItem);
};
$scope.addBelow = function() {
// can't get this to work by just modifying the data source
// therefore we're using tree.append instead.
var newItem = makeItem();
$scope.tree.append(newItem, $scope.tree.select());
};
$scope.remove = function(item) {
var array = item.parent();
var index = array.indexOf(item);
array.splice(index, 1);
};
window.$scope = $scope;
}
</script>
<style scope>
.no-high {
height:-1px !important;
color: red;
}
</style>
</body>
</html>
I have tried the above scenario with some example, it is adding child nodes but the nodes are
overlapping(display is not following hierarchy). Please let me know how to add child nodes dynamically.
Please look at the following code:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treeview/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>TreeView</h4>
<div kendo-tree-view="tree"
k-data-source="treeData"
k-template="itemTemplate"
k-on-change="selectedItem = dataItem" k-on-expand="onExpand(kendoEvent)"></div>
</div>
<div class="box-col" ng-show="selectedItem">
<h4>Selected: {{selectedItem.text}}</h4>
<button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
<button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
<button class="k-button" ng-click="remove(selectedItem)">Delete</button>
</div>
</div>
<style scoped>
.k-treeview .k-in {
padding: 5px;
}
</style>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
{ text: "Item 1" },
{ text: "Item 2", items: [
{ text: "SubItem 2.1" },
{ text: "SubItem 2.2" }
] },
{ text: "Item 3" }
]});
$scope.itemTemplate = "{{dataItem.text}} <button class='k-button' ng-click='click(dataItem)'>Select</button>";
$scope.click = function(dataItem) {
alert(dataItem.text);
};
function makeItem() {
var txt = kendo.toString(new Date(), "HH:mm:ss");
return { text: txt };
};
$scope.onExpand = function(e) {
if ($('li.k-item ul.k-group').find()) {
alert("finded");
$('ul').addClass("no-high");
}
// can't get this to work by just modifying the data source
// therefore we're using tree.append instead.
var dataItem = $scope.tree.dataItem(e.node);
var newItem = makeItem();
dataItem.items.push(newItem);
//$scope.tree.append(newItem, $scope.tree.select());
}
$scope.addAfter = function(item) {
var array = item.parent();
var index = array.indexOf(item);
var newItem = makeItem();
array.splice(index + 1, 0, newItem);
};
$scope.addBelow = function() {
// can't get this to work by just modifying the data source
// therefore we're using tree.append instead.
var newItem = makeItem();
$scope.tree.append(newItem, $scope.tree.select());
};
$scope.remove = function(item) {
var array = item.parent();
var index = array.indexOf(item);
array.splice(index, 1);
};
window.$scope = $scope;
}
</script>
<style scope>
.no-high {
height:-1px !important;
color: red;
}
</style>
</body>
</html>
1 Answer, 1 is accepted
0
Hi Surinaidu,
I am not sure I understand what the problem is. Can you provide step-by-step instructions and explain what is the expected behavior, and what is the actual behavior?
On a side note, use console.log(...) instead of alert(...), because Javascript alerts can interfere with page event handlers and produce undesired side effects (e.g. in this case - duplicate item adding).
Regards,
Dimo
Telerik
I am not sure I understand what the problem is. Can you provide step-by-step instructions and explain what is the expected behavior, and what is the actual behavior?
On a side note, use console.log(...) instead of alert(...), because Javascript alerts can interfere with page event handlers and produce undesired side effects (e.g. in this case - duplicate item adding).
Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!