Similar to associating a checkbox with every node in the TreeView widget, an image or an icon can be associated with a node in the tree. This icon would be displayed before the node name.
Let's first reference the sprite sheet and add CSS classes to the page:
<style type="text/css">
#treeView .k-sprite {
background-image:
url('../../examples/content/web/treeview/coloricons-sprite.png');
}
.folder {
background-position: 0 0
}
.pdf {
background-position: 0 -32px;
}
.image {
background-position: 0 -64px;
}
.html {
background-position: 0 -48px;
}
</style>The next step would be to associate nodes in the tree with the previously mentioned CSS classes. This can be done by adding a spriteCssClass property for each object in the DataSource collection:
$('#treeView').kendoTreeView({
dataSource: [{
text: "Directory1",
spriteCssClass: "folder",
items: [
{ text: "File1...