How to show parent and child in a separate div in Jquery fancy tree?

0
votes

I am using Jquery Fancy Tree version 2.3.0. I need to show the sub-menu items of the parents, on clicking a parent node in a separate div

Scenario:

On loading the page, the Parent Items will be listed in div. On clicking any of the parent item, I need to load the child items in another div. How could I achieve this?

1
jqueryfancytree

1 Answers

1
votes

You can achieve this by using 2 trees and re-loading the child tree on the activate method of the parent tree.

<script type="text/javascript">
$(function() {
    // Create your parent tree, set activate method to create child tree when 
    // parent node is selected
    $("#tree").fancytree({
        activate: function(event, data) {
            // Use key of selected parent node to load child tree
            createChildTree(data.node.key);
        }
    });

    // Create empty child tree
    $("#tree2").fancytree();
});

function createChildTree(key) {
    // Remove current child tree (allows new tree to be created using key from 
    // selected parent)
    $("#tree2").fancytree("destroy");

    // Create new child tree using key from selected parent
    $("#tree2").fancytree({
        source: {
            url: "/source/url",
            data: { "key": key }
        }
    });
}
</script>

<div id="tree"></div>
<div id="tree2"></div>