Icons on TreeView Node

1 posts, 0 answers
  1. Bob
    Bob avatar
    24 posts
    Member since:
    Dec 2014

    Posted 13 May 2015 Link to this post

    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
Back to Top