Tukukkk

I am using Fancy tree to populate the tree, for understanding the code is shown

 var treeData = [{"title":"image_test","folder":true,"children":[{"title":"images5","folder":true,"children":[{"title":"img_01.png","children":},{"title":"img_02.png","children":},{"title":"img_03.png","children":},{"title":"img_04.png","children":},{"title":"img_05.png","children":},{"title":"img_06.png","children":},{"title":"img_07.png","children":}]},{"title":"images4","folder":true,"children":[{"title":"img_01.png","children":},{"title":"img_02.png","children":},{"title":"img_03.png","children":},{"title":"img_04.png","children":},{"title":"img_05.png","children":},{"title":"img_06.png","children":},{"title":"img_07.png","children":}]},{"title":"images3","folder":true,"children":[{"title":"img_01.png","children":},{"title":"img_02.png","children":},{"title":"img_03.png","children":},{"title":"img_04.png","children":},{"title":"img_05.png","children":},{"title":"img_06.png","children":},{"title":"img_07.png","children":}]},{"title":"images2","folder":true,"children":[{"title":"img_01.png","children":},{"title":"img_02.png","children":},{"title":"img_03.png","children":},{"title":"img_04.png","children":},{"title":"img_05.png","children":},{"title":"img_06.png","children":},{"title":"img_07.png","children":}]},{"title":"images1","folder":true,"children":[{"title":"img_01.png","children":},{"title":"img_02.png","children":},{"title":"img_03.png","children":},{"title":"img_04.png","children":},{"title":"img_05.png","children":},{"title":"img_06.png","children":},{"title":"img_07.png","children":}]}]}];





  $(function(){

    $("#tree3").fancytree({

//      extensions: ["select"],

      checkbox: true,

      selectMode: 3,

      source: treeData,

      select: function(event, data) {

        // Get a list of all selected nodes, and convert to a key array:

        var selKeys = $.map(data.tree.getSelectedNodes(), function(node){

          return node.key;

        });

        $("#echoSelection3").text(selKeys.join(", "));



        // Get a list of all selected TOP nodes

        var selRootNodes = data.tree.getSelectedNodes(true);

        // ... and convert to a key array:

        var selRootKeys = $.map(selRootNodes, function(node){

          return node.key;

        });

        $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));

        $("#echoSelectionRoots3").text(selRootNodes.join(", "));

      },

      dblclick: function(event, data) {

        data.node.toggleSelected();

      },

      keydown: function(event, data) {

        if( event.which === 32 ) {

          data.node.toggleSelected();

          return false;

        }

      },

                // The following options are only required, if we have more than one tree on one page:

    //              initId: "treeData",

                cookieId: "fancytree-Cb3",

                idPrefix: "fancytree-Cb3-"

    });

  });

The div used is tree3.

<div id="tree3"></div>

            <div>Selected keys: <span id="echoSelection3">-</span></div>

            <div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>

            <div>Selected root nodes: <span id="echoSelectionRoots3">-</span></div></div>

Now i want that whenever the user checks the childnode the name of the parent node until the root node is also shown for this i have used

var selRootNodes = data.tree.getSelectedNodes(true);

but was not able to get the result in echoselection as childnode and then until root node

Actually I want to send the selection to the server so that they are saved since they are file paths.

Since I am using population of tree first time so kindly bear with me. If there is any other good option kindly provide.

P.S; I want to send the tree path to server in the form of directory address /abc/acv/ac/xyz.png

After searching and looking deep into the code i found the solution :

 $(function(){



    var tree3 = $("#tree3").fancytree({

      checkbox: true,

      selectMode: 3,

      source: $.ajax({

         url: "/getlist",

         dataType: "json"

      }),

      select: function(event, data) {



         // Get a list of all selected nodes, and convert to a key array:

         var selKeys =

            $.map(data.tree.getSelectedNodes(), function(node) {

               if(node.key != 0){

                  return node.key;

               }

            });



         var rootstructures =

            $.map(selKeys, function(item){

               var tempnode = data.tree.getNodeByKey(item);

               var tempstructure = ;

               tempstructure.push(data.tree.getNodeByKey(item).title);  

               while(tempnode.getParent().getParent()){

                  tempstructure.push(tempnode.getParent().title);

                  tempnode = tempnode.getParent();

               }

               tempstructure.reverse();

               return tempstructure.join('/');

            });



      // WRITE DEBUG OUTPUT TO DIVS



         $("#echoSelectionRoots4").text(rootstructures);

         $("#echoSelection3").text(selKeys.join(", "));



         // Get a list of all selected TOP nodes

         var selRootNodes = data.tree.getSelectedNodes(true);

         // ... and convert to a key array:

         var selRootKeys = $.map(selRootNodes, function(node){

            return node.key;

         });

         $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));

         $("#echoSelectionRoots3").text(selRootNodes.join(", "));



      // -----------------



     },

   });

});

This implementation works and now on selection the path till root node is populated on the echoSelectionRoots4 object.

Example Output : /image_test/image5/img_01.png, /image_test/image5/img_02.png etc