2

I'm using FancyTree for the first time, and I would like define some custom node data, specifically an attribute named "content" in the HTML data used to create the tree:

    <li id="xxxx" data-content="true"  class="folder">

I have an init event-handler written in JavaScript and I want to access my custom data attribute there:

init: function(event, data, flag)
   {
    var tree = $("#tree").fancytree("getTree");
    node = tree.getNodeByKey(key);
    var data = node.data;

In an online tutorial, I saw that my custom attribute would be accessible as node.data.content, but I'm unable to display my custom attribute in an alert box to demonstrate that it was actually defined. How do I access my custom data attribute in my JavaScript function?

Sheldon

Sheldon R.
  • 452
  • 2
  • 7
  • 26
  • Hi, if you could you post your code, html/js, that'd be great – IndieRok Jan 14 '15 at 20:46
  • Didn't realize my HTML wasn't visible, so I've corrected that, IndieRok. I also added a snippet of the event handler. Let me know if you need to see more of the code... – Sheldon R. Jan 14 '15 at 21:01

1 Answers1

7

Ok, so i finally got it working. Your were close to getting your result.

The key variable is a string which represent the 'id' attribute of each LI element in your tree. You will obtain the node with that key. Once the node is obtained, you can retrieve your custom data attribute associated to that node. Since our 'data' variable is an object, containing key/value, you need to call it's 'key' name on the data object to retrieve the value, like so 'data.content'.

JS

$(function () {
    // using default options
    //Caching DOM element
    var $myTree = $("#tree").fancytree();
    // Get the DynaTree object instance
    var tree = $myTree.fancytree("getTree");
    //Set my key
    var key = "id1";
    //Get the node
    var node = tree.getNodeByKey(key);
    //Get the custom data attribute associated to that node
    var data = node.data;
    //data is an object so, data.content will give you the value of the attribute
    alert(data.content);
});

JSFIDDLE

Hope this helps!

IndieRok
  • 1,778
  • 1
  • 14
  • 21
  • 1
    OMG; I was stuck on that all afternoon. You are a rock star, and not just the indie type :) Thanks! – Sheldon R. Jan 14 '15 at 22:09
  • Haha, pleasure was all mine. But I got to admit, their documentation is kind of lacking in depth and a bit disorganized. I had to look for their old (and outdated) documentation page, which was way more comprehensive. I kind of understand why one would feel a bit lost. – IndieRok Jan 15 '15 at 14:53
  • Yeah, there's no one place to go where all the FT functionality is explained. But I'll keep in mind that the older Dynatree documentation is better. I'm about to create a child-node in JavaScript for the first time, so I may need to consult that older doc if it's a better read :) – Sheldon R. Jan 15 '15 at 20:00
  • @SheldonR. Here is the old documentation I had found. [LINK](http://wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree.html). Be careful tho, some methods may have changed or have been removed. The page doesn't specify the version of the plugin, even though I have a feeling it's probably legit, since the page update date specify december 31th 2014. – IndieRok Jan 15 '15 at 20:11
  • Ironically, the DynaTree documentation was one of the top hits for my Google search for "FancyTree addNode". I think they need to break down and include it on the FancyTree page. Thanks for the second assist; you're a FancyTree guru :) – Sheldon R. Jan 15 '15 at 20:35