검도 트리 아이콘

Question

합니다.

Answer 1

이 질문은 약간 불특정하지만 나는 당신을 도우 려합니다.

우선 모든 옵션에 당신이 트 리뷰에서 이미지를 표시합니다 :

• 스프라이트는 - 모든 이미지 당신 싶어 표시 CSS 클래스를 제공합니다. 모든 여기처럼 같은 이미지 파일에있을 수 있습니다 : - http://demos.kendoui.com/content/web/treeview/coloricons-sprite.png
• 이미지는 하나의 파일의 각 이미지에 대한 URL을 제공 : 당신이 TreeView1 및 TreeView2처럼 diferrent 이름으로 당신의 사이트에이 트 리뷰를 가지고 가정 http://demos.kendoui.com/content/web/treeview/mail.png
  
  

. 이제 동일한 2를 가질 수

#TreeView1 .k-sprite { 
    background-image: url("../../content/web/treeview/coloricons-sprite.png"); 
} 

#TreeView2 .k-sprite { 
    background-image: url("../../content/web/treeview/different-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; } 

이 트 리뷰는 비슷하지만 단지 다른 아이콘이해야하는 경우, 더 나은 솔루션 스프라이트 옵션입니다, 가장 간단한 방법은 2 개 개의 다른 이미지를 준비하고 CSS를 같이 표시 할 제공하는 것입니다 하지만 다른 아이콘과 이름 트 리뷰, 예를 들면 :

물론

$("#TreeView1").kendoTreeView({ 
    dataSource: [{ 
     text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [ 
      { 
       text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [ 
        { text: "about.html", spriteCssClass: "html" }, 
        { text: "index.html", spriteCssClass: "html" }, 
        { text: "logo.png", spriteCssClass: "image" } 
       ] 
      }, 
     ] 
    }] 
}); 

당신이 이미지를 그런 당신은 그냥 모든 항목에 대해 각 트 리뷰 dataSourve의 이미지에 대해 서로 다른 URL을 설명하기 위해이 옵션을 선호하는 경우 :

$("#TreeView1").kendoTreeView({ 
    dataSource: [ 
     { 
      text: "Inbox", imageUrl: "../../content/web/treeview/mail.png", 
      items: [ 
       { text: "Read Mail", imageUrl: "../../content/web/treeview/readmail.png" } 
      ] 
     }, 
     { 
      text: "Drafts", imageUrl: "../../content/web/treeview/edit.png" 
     }, 
    ] 
}); 

$("#TreeView2").kendoTreeView({ 
    dataSource: [ 
     { 
      text: "Inbox", imageUrl: "../../content/web/treeview/pdf.png", 
      items: [ 
       { text: "Read Mail", imageUrl: "../../content/web/treeview/jpg.png" } 
      ] 
     }, 
     { 
      text: "Drafts", imageUrl: "../../content/web/treeview/html.png" 
     }, 
    ] 
}); 

012,351을

이 kendoUI 데모를 기반으로합니다 : http://demos.telerik.com/kendo-ui/treeview/images. 나는 그것이 도움이되기를 바랍니다.