This is a migrated thread and some comments may be shown as answers.

use custom image instead of SpriteImage for kendoTreeView

0 Answers 117 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Pawan
Top achievements
Rank 1
Pawan asked on 13 Aug 2012, 04:09 PM
HI,

I'm using kendoTreeView  and  "coloricons-sprite.png" to show images(like folder/pdf... ) .  But, i want to show custom image (like close) .  Plz suggest me how can i make use of other images (say close button) instead of sprite Image .

Im using code : 
<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><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>
 
 
 
  <style>
             
               #treeview .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>
 
    <script>
               $(document).ready(function() {
                   $("#treeview").kendoTreeView();
               });
           </script>

 

No answers yet. Maybe you can help?

Tags
TreeView
Asked by
Pawan
Top achievements
Rank 1
Share this question
or