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

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

• javascript
• html
• fancytree

• Hi, if you could you post your code, html/js, that'd be great – IndieRok Commented Jan 14, 2015 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. Commented Jan 14, 2015 at 21:01

1 Answer 1

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!