All Components
Components

Components / TreeView

Icon TreeView

You can enhance the meaning of the context by adding an icon to the Button either through the image-url otpion or sprite-css-class attributes.

The following example demonstrates how to create a TreeView with images.

<div id="vueapp" class="vue-app">
    <kendo-treeview>
        <kendo-treeview-item text="Baseball" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png">
            <kendo-treeview-item text="Top News" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png"></kendo-treeview-item>
            <kendo-treeview-item text="Photo Galleries" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/photo.png"></kendo-treeview-item>
            <kendo-treeview-item text="Videos Records" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/video.png"></kendo-treeview-item>
            <kendo-treeview-item text="Radio Records" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/speaker.png"></kendo-treeview-item>
        </kendo-treeview-item>
        <kendo-treeview-item text="Golf" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/golf.png">
            <kendo-treeview-item text="Top News" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png"></kendo-treeview-item>
            <kendo-treeview-item text="Photo Galleries" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/photo.png"></kendo-treeview-item>
            <kendo-treeview-item text="Videos Records" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/video.png"></kendo-treeview-item>
            <kendo-treeview-item text="Radio Records" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/speaker.png"></kendo-treeview-item>
        </kendo-treeview-item>
        <kendo-treeview-item text="Swimming" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/swimming.png">
            <kendo-treeview-item text="Top News" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/star.png"></kendo-treeview-item>
            <kendo-treeview-item text="Photo Galleries" image-url="http://demos.telerik.com/kendo-ui/content/shared/icons/16/photo.png"></kendo-treeview-item>
        </kendo-treeview-item>
    </kendo-treeview>
</div>
Vue.use(TreeViewInstaller);

new Vue({
    el: "#vueapp"
})

The following example demonstrates how to create a TreeView with sprites.

<div id="vueapp" class="vue-app">
    <kendo-treeview id="treeview-sprites">
        <kendo-treeview-item text="Brazil" sprite-css-class="brazilFlag" :items="[
            { text: 'History', spriteCssClass: 'historyIcon' },
            { text: 'Geography', spriteCssClass: 'geographyIcon' }
        ]" ></kendo-treeview-item>
        <kendo-treeview-item text="India" sprite-css-class="indiaFlag" :items="[
            { text: 'History', spriteCssClass: 'historyIcon' },
            { text: 'Geography', spriteCssClass: 'geographyIcon' }
        ]" ></kendo-treeview-item>
        <kendo-treeview-item text="Netherlands" sprite-css-class="netherlandsFlag" :items="[
            { text: 'History', spriteCssClass: 'historyIcon' },
            { text: 'Geography', spriteCssClass: 'geographyIcon' }
        ]" ></kendo-treeview-item>
    </kendo-treeview>
</div>
<style>
    .k-panel {
        -webkit-transform: translatez(0);
    }
    #treeview-sprites .k-sprite {
        background-image: url("https://demos.telerik.com/kendo-ui/content/shared/styles/flags.png");
    }
    .brazilFlag {
        background-position: 0 0;
    }
    .indiaFlag {
        background-position: 0 -32px;
    }
    .netherlandsFlag {
        background-position: 0 -64px;
    }
    .historyIcon {
        background-position: 0 -96px;
    }
    .geographyIcon {
        background-position: 0 -128px;
    }
</style>
Vue.use(TreeViewInstaller);

new Vue({
    el: "#vueapp"
})
In this article