Кендо Дерево Иконы

Question

Как иметь два дерева на той же странице с иконками дифф:

.k-treeview .k-minus { 
    background: url('../images/k-minus.png') center center; 
} 

.k-treeview .k-plus { 
    background: url('../images/k-plus.png') center center; 
} 

Любая помощь будет большим.

Answer 1

Этот вопрос немного неуточнен, но я постараюсь вам помочь.

Прежде всего, для просмотра изображений в TreeView вы должны варианты:

• Спрайты - вы обеспечиваете класс CSS для всех изображений, которые вы хотите отображение. Все может быть в одном файле изображения, как здесь: http://demos.kendoui.com/content/web/treeview/coloricons-sprite.png
• Изображения - вы предоставите URL для каждого изображения в одном файле: http://demos.kendoui.com/content/web/treeview/mail.png
  
  

Предполагая, что вы получили два treeViews в вас сайт с diferrent именами как TreeView1 и TreeView2 , Если это treeViews похожи, но просто нужно иметь различные значки, лучшим решением является вариант спрайтов, самый простой способ подготовить 2 различных изображений и обеспечить CSS, чтобы отобразить его, как:

#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 одинаковых но имя treeViews с различными иконками, например:

$("#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" } 
       ] 
      }, 
     ] 
    }] 
}); 

конечно, если вы предпочитаете изображения опции, которые вы просто должны описывать различные URL для изображения в каждой TreeView dataSourve для всех элементов, например, что:

$("#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" 
     }, 
    ] 
}); 

Я основывался на этом демо kendoUI: http://demos.telerik.com/kendo-ui/treeview/images. Я надеюсь, что это помогает.