Icons on TreeView Node

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


  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 15 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bob
    Bob avatar
    24 posts
    Member since:
    Dec 2014

    Posted 15 May 2015 in reply to Daniel Link to this post

    Thank you so much, that got it for me.

     

    Bob

Back to Top