How to have two trees on the same page with diff icons:
.k-treeview .k-minus {
background: url('../images/k-minus.png') center center;
}
.k-treeview .k-plus {
background: url('../images/k-plus.png') center center;
}
Any help would be great.
This question is a little bit unspecified but I'll try to help you.
First off all, to display images in treeView you have to options:
Assuming you got two treeViews in you site with diferrent names like TreeView1
and TreeView2
. If this treeViews are similar but just need to have different icons, better solution is sprites option, the simplest way is to prepare 2 different images and provide css to display it, like:
#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; }
Now you can have 2 identical but name treeViews with different icons, eg:
$("#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" }
]
},
]
}]
});
Of course if you prefer images options you just have to describe different url for image in each treeView dataSourve for all items, like that:
$("#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"
},
]
});
I based on this kendoUI demo: http://demos.telerik.com/kendo-ui/treeview/images. I hope it helps.