Associating icons with labels in TreeView

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.

How to do it…

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...