This is a migrated thread and some comments may be shown as answers.

Icons on TreeView Node

0 Answers 83 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 2
Bob asked on 13 May 2015, 02:32 PM
I am using Method 2 for binding my data to a flat file as shown here:
Binding to flat data
<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.
All of the examples that I have found show both the data and the icon hard coded and I need to know how to have the icons in the JSON and for the tree to then generate them.
I have tried adding a JSON field called "image" and at a different time one called "icon" - neither seemed to work.
So, how would I set the icons up and show them?

TIA,
Bob Mathis

No answers yet. Maybe you can help?

Tags
TreeView
Asked by
Bob
Top achievements
Rank 2
Share this question
or