<!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 */