Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Kendo UI Baseline</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  
<!--Kendo UI Styles-->
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.blueopal.min.css" rel="stylesheet"/>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  #chart{
    width:100%;
  }
</style>
</head>
<body>
  
  <div id="treeview"></div>
  
<!--Scripts-->
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script>
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true,
                  template:"# if(!item.hasChildren){# <input type='checkbox'  name='checkedFiles[#= item.id #]' value='true' />#}#"
                },
                dataSource: [{
                    id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                        {
                            id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                                { id: 3, text: "about.html", spriteCssClass: "html" },
                                { id: 4, text: "index.html", spriteCssClass: "html" },
                                { id: 5, text: "logo.png", spriteCssClass: "image" }
                            ]
                        },
                        {
                            id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                                { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                                { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                            ]
                        },
                        {
                            id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                                { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                                { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                                { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                            ]
                        }
                    ]
                }]
            });
        </script>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers