Kendo TreeView demo with source code

Kendo TreeView Example

•   My Web Site
  •  images
    • mylogo.jpg
    • Bus.png
    • photo.png
  •  resources
    •  pdf
      • Billing.pdf
      • Stock.pdf
    •  zip
  • Home.html
  • About.html
  • Service.html
  • Contact.html

Source Code:-

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2017.1.118/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2017.1.118/styles/kendo.common.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

<h2>Kendo ListView demo with source code</h2>
    <div id="CodeViewexample">
    <div class="demo-section k-content">
        <ul id="CodeViewtreeview">
            <li data-expanded="true">
                <span class=""><i class="fa fa-folder-open" aria-hidden="true"></i>&nbsp;</span>
                My Web Site
                <ul>
                    <li data-expanded="true">
                        <span class=""><i class="fa fa-folder-open" aria-hidden="true"></i>&nbsp;</span>images
                        <ul>
                            <li><span class="k-sprite image"></span>mylogo.jpg</li>
                            <li><span class="k-sprite image"></span>Bus.png</li>
                            <li><span class="k-sprite image"></span>photo.png</li>
                        </ul>
                    </li>
                    <li data-expanded="true">
                        <span class=""><i class="fa fa-folder-open" aria-hidden="true"></i>&nbsp;</span>resources
                        <ul>
                            <li data-expanded="true">
                                <span class=""><i class="fa fa-folder-open" aria-hidden="true"></i>&nbsp;</span>pdf
                                <ul>
                                    <li><span class="k-sprite pdf"></span>Billing.pdf</li>
                                    <li><span class="k-sprite pdf"></span>Stock.pdf</li>
                                </ul>
                            </li>
                            <li><span class=""><i class="fa fa-folder-open" aria-hidden="true"></i>&nbsp;</span>zip</li>
                        </ul>
                    </li>
                    <li><span class="k-sprite html"></span>Home.html</li>
                    <li><span class="k-sprite html"></span>About.html</li>
                    <li><span class="k-sprite html"></span>Service.html</li>
                    <li><span class="k-sprite html"></span>Contact.html</li>
                </ul>
            </li>
        </ul>
    </div>

    <script>
                $(document).ready(function() {
                    $("#CodeViewtreeview").kendoTreeView();
                });
    </script>

    <style>
        #CodeViewtreeview ul li {
            list-style:none !important;

        }
        #CodeViewtreeview .k-sprite {
            background-image: url("../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>