Kendo TreeView Example
-
My Web Site
-
images
- mylogo.jpg
- Bus.png
- photo.png
-
resources
-
pdf
- Billing.pdf
- Stock.pdf
- zip
-
pdf
- Home.html
- About.html
- Service.html
- Contact.html
-
images
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> </span> My Web Site <ul> <li data-expanded="true"> <span class=""><i class="fa fa-folder-open" aria-hidden="true"></i> </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> </span>resources <ul> <li data-expanded="true"> <span class=""><i class="fa fa-folder-open" aria-hidden="true"></i> </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> </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>
No comments:
Post a comment