use custom image instead of SpriteImage for kendoTreeView

1 posts, 0 answers
  1. Pawan
    Pawan avatar
    9 posts
    Member since:
    Aug 2012

    Posted 13 Aug 2012 Link to this post

    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>

     
Back to Top