Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
    <title></title>
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
</head>
<body>
    
        <div id="example" class="k-content">
            <div class="demo-section">
                <ul id="treeview">
                    <li data-expanded="true">
                        <span class="k-sprite folder"></span>
                        My Web Site
                        <ul>
                            <li data-expanded="true">
                                <span class="k-sprite folder"></span>images
                                <ul>
                                    <li><span class="k-sprite image"></span>logo.png</li>
                                    <li><span class="k-sprite image"></span>body-back.png</li>
                                    <li><span class="k-sprite image"></span>my-photo.jpg</li>
                                </ul>
                            </li>
                            <li data-expanded="true">
                                <span class="k-sprite folder"></span>resources
                                <ul>
                                    <li data-expanded="true">
                                        <span class="k-sprite folder"></span>pdf
                                        <ul>
                                            <li><span class="k-sprite pdf"></span>brochure.pdf</li>
                                            <li><span class="k-sprite pdf"></span>prices.pdf</li>
                                        </ul>
                                    </li>
                                    <li><span class="k-sprite folder"></span>zip</li>
                                </ul>
                            </li>
                            <li><span class="k-sprite html"></span>about.html</li>
                            <li><span class="k-sprite html"></span>contacts.html</li>
                            <li><span class="k-sprite html"></span>index.html</li>
                            <li><span class="k-sprite html"></span>portfolio.html</li>
                        </ul>
                    </li>
                </ul>
            </div>
​
            <script>
                
            </script>
​
            <style scoped>
                .demo-section {
                    width: 200px;
                }
​
                #treeview .k-sprite {
                    background-image: url("http://demos.kendoui.com/web/treeview/../../content/web/treeview/coloricons-sprite.png");
                }
​
                .rootfolder { background-position: 0 0; }
                .folder { background-position: 0 -16px; }
                .pdf { background-position: 0 -32px; }
                .html { background-position: 0 -48px; }
                .image { background-position: 0 -64px; }
​
            </style>
        </div>
​
​
</body>
</html>
 
.relationshipsTree 
{
    display: inline;
    font-size: 10pt;
    text-decoration: none;
    /*cursor: hand;*/
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    filter: none;
    font-weight: bold;
    color: green;
    background-color: transparent;
}
 
$(document).ready(function() {
  function treeviewSelect(e) {
    var node = this.dataItem(e.node);
    //window.open(node.NotificationLink, "_self");
    $('#treeview div').removeClass('relationshipsTree');
    $(e.node).parents('li').first().children('div').addClass('relationshipsTree');
  }
  
  $("#treeview").kendoTreeView({select: treeviewSelect});
  
  
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers