Icons on TreeView Node

[Bob]

I am using Method 2 for binding my data to a flat file as shown here:
Binding to a Flat Table

<div id="tree"></div>
<script>
var flatData = [
  { id: 1, parent: null, text: "Item 1" },
  { id: 2, parent: null, text: "Item 2" },
  { id: 3, parent: null, text: "Item 3" },
  { id: 4, parent: null, text: "Item 4" },
  { id: 5, parent: 1, text: "Item 1.1" },
  { id: 6, parent: 1, text: "Item 1.2" },
  { id: 7, parent: 1, text: "Item 1.3" },
  { id: 8, parent: 3, text: "Item 3.1" },
  { id: 9, parent: 3, text: "Item 3.2" },
  { id: 10, parent: 5, text: "Item 1.1.1" },
  { id: 11, parent: 5, text: "Item 1.1.2" },
  { id: 12, parent: 5, text: "Item 1.1.3" }
];

// tree for visualizing data
$("#tree").kendoTreeView({
  dataSource: {
    transport: {
      read: function(options) {
        var id = options.data.id || null;

        options.success($.grep(flatData, function(x) {
          return x.parent == id;
        }));
      }
    },
    schema: {
      model: {
        id: "id",
        hasChildren: function(x) {
          var id = x.id;

          for (var i = 0; i < flatData.length; i++) {
            if (flatData[i].parent == id) {
              return true;
            }
          }
          return false;
        }
      }
    }
  }
})
</script>

Now, however, I need to add some icons to differentiate the kind of file (Folder, excel, PDF, etc)

I have found a series of icons that I think would work would work at:
jQuery icons styling example
I just am not sure how to add the desired icons (or their references) into the JSON or set the TreeView up to show them.

What I have found only shows how to hard code the data and the associated images. I need to get this all into the JSON for my app.

I have tried adding another JSON field called "image", but that does not seem to work.

So, how would I set it up and show it?

TIA,
Bob Mathis

[Daniel]

Hi,

If you wish to use the icons then you should either add a field with name spriteCssClass(live demo) or specify the field name with the dataSpriteCssClassField option. Image URLs can be set to the imageUrl field or to the field specified with the dataImageUrlField option.

Regards,
Daniel
Telerik

[Bob]

Thank you so much, that got it for me.

 

Bob