<!DOCTYPE html>
<html>
<head>
<link data-require="kendo-bootstrap-css@*" data-semver="2013.2.716" rel="stylesheet" href="//cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" />
<link data-require="kendo-bootstrap-css@*" data-semver="2013.2.716" rel="stylesheet" href="//cdn.kendostatic.com/2013.2.716/styles/kendo.bootstrap.min.css" />
<link data-require="kendo@*" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" />
<link data-require="kendo@*" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" />
<link data-require="kendo@*" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" />
<link data-require="kendo@*" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" />
<link data-require="kendo@*" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" />
<link data-require="kendo@*" data-semver="2013.3.716" rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" />
<link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="kendo@*" data-semver="2013.3.716" src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.0.3" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="treeView"></div>
<script src="script.js"></script>
</body>
</html>
// Code goes here
var Mymodule = function(){
var treeview = $('#treeView').kendoTreeView({
dataSource: [
{
text: "Europe",
selected: true,
iconBefore: "glyphicon glyphicon-folder-close",
isFolder: true
},
{
text: "Americas",
iconBefore: "glyphicon glyphicon-folder-close",
isFolder: true,
items: [
{
text: "North America",
iconBefore: "glyphicon glyphicon-folder-close",
isFolder: true,
items: [
{
text: "Canada",
iconBefore: "glyphicon glyphicon-list"
},
{
text: "United States",
iconBefore: "glyphicon glyphicon-list"
},
{
text: "Mexico",
iconBefore: "glyphicon glyphicon-list"
}
]
},
{
text: "Central America",
iconBefore: "glyphicon glyphicon-list"
},
{
text: "South America",
iconBefore: "glyphicon glyphicon-folder-close",
items: [
{
text: "Argentina",
iconBefore: "glyphicon glyphicon-list"
},
{
text: "Brazil",
iconBefore: "glyphicon glyphicon-list"
},
{
text: "Chile",
iconBefore: "glyphicon glyphicon-list"
}
]
}
]
},
{
text: "Asia",
iconBefore: "glyphicon glyphicon-folder-close",
isFolder: true
}],
dragAndDrop: true,
expand: onExpand,
collapse: onCollapse,
select:onSelect
});
function onExpand(e) {
$(e.node)
.find(".glyphicon-folder-close")
.first()
.removeClass("glyphicon-folder-close")
.addClass("glyphicon-folder-open");
}
function onCollapse(e) {
/// changes the folder open icon with the folder close icon
$(e.node)
.find(".glyphicon-folder-open")
.first()
.removeClass("glyphicon-folder-open")
.addClass("glyphicon-folder-close");
}
function onSelect(e) {
var kendoTreeData = $("#treeview").data("kendoTreeView"),
nodeData = kendoTreeData.dataItem(e.node);
$(".k-treeview .controlPanel").remove();
if (nodeData.isFolder) {
var plusMinus = $('#plusMinusTemplate').html();
$(e.node).find(".k-in").first().append(plusMinus);
} else {
var minus = $('#minusTemplate').html();
$(e.node).find(".k-in").first().append(minus);
}
}
var kendoTreeView = $("#treeView").data("kendoTreeView");
var dataSource = kendoTreeView.dataSource.data();
var setCssClass = function(data) {
for (var i = 0; i < data.length; i++) {
var nodeData = data[i];
if (nodeData.iconBefore) {
var node = kendoTreeView.findByUid(nodeData.uid);
var icon = $('<span class="' + nodeData.iconBefore + '" style="margin-right:0.5em"></span>');
$(node).find(".k-in").first().prepend(icon);
}
if (nodeData.hasChildren) {
setCssClass(nodeData.children.data());
}
}
};
setCssClass(dataSource);
}();
/* Styles go here */