Kendo Tree Icons

Question

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.

Answer 1

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:

• Sprites - you provide css class for all images you wanna display. All can be in same image file like here: http://demos.kendoui.com/content/web/treeview/coloricons-sprite.png
• Images - you provide url for each image in single file: http://demos.kendoui.com/content/web/treeview/mail.png
  
  

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.