fancytree - Update the data of a child node and send it back

Question

I am trying to implement Fancy Tree which displays data in tree structure as well as stores the updated child data. I need it in the request, to update in database.

My Fancy tree has 3 levels. 3rd level has child with additional JSON Key-Value pairs. It looks like below :

                   Color        Height      Comments  
Category-1
    Plants1                         
        Lily        White       5           test-lily
        Hibiscus    Yellow      8           test
    Animals1
        Rabbit      White       20          test-some-comments
        Squirrel    Brown       3           some-other-comments
        ...
Category-2          
    Plants2
        Jasmine     White       5           test-jasmine
        Hibiscus    Yellow      8           test
    Animals2
        Cat         White       15          test-some-comments
        Dog         Brown       12          some-other-comments
        ...
 ...

Color, Height , Comments are editable text boxes. User can

• Update any of the editable data.
• Add a new plant/animal and assign new color, height, comments data.

I should be able to apply the new data to the node (update the node). I see that on UI new data is getting displayed but when I inspect element - value is not updated??

I should be able to take the entire fancy tree data and send it in request.

I tried auto selecting all nodes and getting selected nodes, I only get the titles (Lily/Rabbit) , I do not get the updated color, height and comments.

I am not sure how to trigger edit (modify) on a key-value pair inside a child.

Also, when I move the children (in level - 3) - Is there a way to auto-correct the Index Hierarchy?

Any help is greatly appreciated.

Highlighting questions again :

• Update the Key-Value data in the child node
• Read the entire fancytree with new data and send it in request
• Auto-correct Index Hierarchy when moved up/down or moved under different parent

Answer 1

I was able to implement a solution which works the way I expected.

Here is my solution :

Whenever user input's a color, implement a onChange method on color textbox to set the node data to user input My HTML Table had below tds

     <td width="150px"><input type="text" size='30' onChange="updateNode(this, 'color');"/></td>
     <td width="150px"><input type="text" size='30' onChange="updateNode(this, 'height');"/></td>
     <td width="150px"><input type="text" size='30' onChange="updateNode(this, 'comments');"/></td>

Here is the updateNode function

  function updateNode(cur, key)
  {
      var val = document.getElementById(cur.id).value; 
      var tree = $.ui.fancytree.getTree("#tree");
      var node = tree.getActiveNode();
      
      if(key === "color")
      {
          node.data.color= val;
      }
      else if(key === "height")
      {
          node.data.height = val;
      }
      // else and so on...
      return false;
      
  }

In fancytree renderColumns method - add id and value attributes to each input based on IndexHierarchy

this is how you do it

 $tdList.eq(2).find("input").attr("id","color-"+node.getIndexHier());
 $tdList.eq(2).find("input").attr("value",node.data.color);
 $tdList.eq(3).find("input").attr("id","height-"+node.getIndexHier());
 $tdList.eq(3).find("input").attr("value",node.data.height);
 $tdList.eq(4).find("input").attr("id","comments-"+node.getIndexHier());
 $tdList.eq(4).find("input").attr("value",node.data.comments);

Now, when user clicks on "SAVE"

$("#save").click(function(){
     var tree = $.ui.fancytree.getTree("#tree");
     var rtNode = tree.getRootNode();
     //var nodeList = tree.getAllNodes(); //My custom implementation method
     tree.expandAll(); //you have to do this to be able to read all nodes
     var seq = 0;
     var categoryName = "";
     var subCategoryName = ""; //Plants, Animals etc.,
     var jsonArray = new Array();
     var categoryNodes = rtNode.getChildren();
     for(var i=0; i< categoryNodes.length; i++)
     {
        categoryName =categoryNodes[i].title;
        var subCategoryNodes = categoryNodes[i].getChildren();
        if(!subCategoryNodes)
        {
            //error if at least one child is mandatory
        }
        for(var j=0; j < subCategoryNodes.length; j++)
        {
            seq++;
            subCategoryName = subCategoryNodes[j].title;
            var sCtgryChildren = subCategoryNodes[j].getChildren();                 
            if(!sCtgryChildren)
            {
            //error if at least one child is mandatory
            }
            for(var k=0; k < sCtgryChildren.length; k++)
            {
                var ind = sCtgryChildren[k].getIndexHier();
                var subCategoryChildName = sCtgryChildren[k].title;
                var color = sCtgryChildren[k].data.color;//document.getElementById("color-"+ind).value; - this is another way
                var height = document.getElementById("height-"+ind).value;
                var comments = document.getElementById("comments-"+ind).value;
                var jsonBean = new jsonBeanJO(seq, categoryName, subCategoryName, color, height, comments); // define your own JSON bean
                jsonArray.push(jsonBean);
            }
        }
     }          
      alert(JSON.stringify(jsonArray));
      return false; // test in UI and remove when you have expected data
      // to send back in request
      document.getElementById('data').value = JSON.stringify(jsonArray);
      document.myform.submit();
});

Lastly, to auto update the Index Hierarchy when you move the node up or down, just call node render in modifyChild

 modifyChild: function(event, data) 
 {
    data.node.render(true); //This statement made all the difference
    data.tree.info(event.type, data);
 },