How to create child nodes dynamically by manipulating the array ? about treant-js HOT 13 OPEN

OK, I clearly haven't found the time yet, but it's still on my todo to build out some samples with things like this.

from treant-js.

Did you figure out how to do this ?

from treant-js.

Did you figure out how to do this ?

from treant-js.

I'll see if I can find some time this weekend to share an example that shows how to add child nodes; however it's generally not done by manipulating the array directly.

from treant-js.

Thanks @dlgoodchild , I am using this amazing library now, can you please give me some tip how to do that? by recreating the chart everytime the data is changed? but the size / position of the chart could be changed

from treant-js.

Hi guys this is how I got it to work. Thanks dlgoodchild for for keeping this code up to date.

var chart = new Treant(simple_chart_config, null, $); // initialises the tree when the page loads
var $oNodes = $('.Treant .node');
$('body').on('click', '.Treant .node', function() {
var $oNode = $(this);
$oNodes.removeClass( 'selected' );
$oNode.addClass( 'selected' );
let node = $oNode.data( 'treenode' );
});

//gets an array with data that you want to dynamically load to the tree
$.ajax({
url :'',
method : 'POST', // form submit method get/post
data : {},
ContentType : 'application/json',
dataType: 'json',
success: function(data){

$.each(data, function (i, node) {
var hid = node.id // you must have a unique id in each element of the json array
var node_info = $(node.parent).data('treenode'); // assigns data to each node foreach element in the json array
var detail = { // create the actual node with the element information
'text': {'name': data.name}, //each name in the json array you received
HTMLid: hid, // assigns an id used to for connecting the nodes
};
chart.tree.addNode(node_info, detail); // loads the data into and adds to the tree dynamically
}
});
},
});
})

from treant-js.

@chaddwick25 I'm trying to wrap my head around your solution, to no avail. Can you upload a working example to JSFiddle or something? Also, is there a way to add and remove nodes on the tree and have the tree change? (Without having to do any XMLHttpRequest requests)

from treant-js.

@n8jadams I dont know how to do it without using XMLHttpRequest requests. Sorry

from treant-js.

@n8jadams Which part are you having difficulty understanding?

from treant-js.

@chaddwick25 Can you show an example of a json file (with the array that's dynamically loaded) that is read in by the AJAX request?

from treant-js.

 {
"data":{
    "chart":{
        "container": "#viz-jig-chart",

        "connectors":{
            "type": "step"
        },

        "node":{
            "collapsable":true,
            "HTMLclass":"nodeDefault"
        }
    },

    "nodeStructure":{
        "text": {
            "name": "Main Viz-Jig Progress"
        },
        "HTMLid": "root",

        "children": [
            {
                "text": { 
                    "name": "First child" 
                },
                "HTMLid": "1"
            },
            {
                "text": { 
                    "name": "Second child" 
                },
                "HTMLid": "2"
            }
        ]
    }

}

}

from treant-js.

the same data you would use to create an initial node, you'd use to add to the tree. the key things from my last post are:
init the tree and store it.
var chart = new Treant(simple_chart_config, null, $);
call the tree and using the property add the node.
chart.tree.addNode(node_info, detail);
define all existing and new nodes in the tree
var $oNodes = $('.Treant .node');

weather you choose to do an ajax call or not, you need to call this: chart.tree.addNode(node_info, detail);

from treant-js.

The solution I went with was an internal model of the tree that I convert to a treant-format structure and then destroy and rebuild the tree with that treant structure representation of MY tree.

As treant manipulates the model it is sent, this was a mess until I created a 'COPY' of the data by serialising and deserialising the objects to/from JSON. That way you add/edit/move/remove nodes in your internal structure, then build a treant-alike structure and send THAT to treant.

I have code, but it is currently proprietary (and badly written undoubtedly).

from treant-js.