can i add data dynamically

[Geethikamanat]

how can i add data dynamically fromdatabase??

[jainishtesting]

Yes, i am also want to know if you can provide example in which data can be bind using for loop.

[dlgoodchild]

Adding data from a database is not the job of this library. You need to build a backend process, say in PHP, that obtains the data and then generates the JSON structure to be applied on initialisation.

Adding data after initial render is not currently a feature of this library. It may be in the near future, but that would be a much slower way to build your tree than to use the initialisation structure.

[jainishtesting]

i think you misunderstood, let me explain in detail. I am using following code for generating tree :
new Treant(chart_config)
so here, chart_config is containing all data. so when i am changing chart_confing's data and recall that same function, then it is not working in just displaying one node only.

[dlgoodchild]

Inside Treant class, the config is copied. So if you edit chart_config you would have to destroy that tree completely and create a new instance.

[jainishtesting]

Please Can you give me example ?

[jainishtesting]

I am facing issue same as this issue : #23
Can you please tell me how to achieve this ?

[julianzb-dev]

<?php

 $arrayData = array(
     array(
         'name' => 'dlgoodchild',
         'type' => 'master',
         'location' => 'Zaragoza'
     ),
     array(
         'name' => 'jzapata',
         'type' => 'poor kid from africa',
         'location' => 'africa'
     )
     ...
 );

?>

// AN EMPTY JAVASCRIPT ARRAY
var childrenArrayObject = [];

// INIT FOREACH
<?php foreach ($arrayData as $key => $data): ?>

// FOR EACH CYCLE ... CREATE A JAVASCRIPT OBJECT
var tmpChild = {
        // We can use the text object to set custom attributes
        text: {
            name: '<?php echo $data['name']; ?>',
            customAttributeType : '<?php echo $data['type']; ?>',
            customAttributeLocation : '<?php echo $data['location']; ?>'
        },
        // IF YOU DON'T USE innerHTML attribute, all text object will be displayed in a <p> tag
        innerHTML : '<p>Information that I want to show</p>'
    }

//  ADD OBJECT TO OUR ARRAY
childrenArrayObject.push(tmpChild);

// END FOREACH
<?php endforeach; ?>

// SETUP CHART CONFIG
var chart_config = {
            chart: {
                container: "#idOfContainer",
                callback : {
                    onTreeLoaded: function () {

                        var $oNodes = $( '.Treant .node' );

                        $oNodes.on('click', function (oEvent) {

                                    var $oNode = $(this);
                                    var oMeta = $oNode.data('treenode');

                                    // GET ORIGINAL VALUE OF AN ATTRIBUTE
                                    console.log(oMeta.text.customAttributeType );

                                    // SET NEW VALUE TO AN ATTRIBUTE
                                    oMeta.text.customAttributeType = 'The new type value';

                                    // AFTER THIS THE NEW VALUE IS IN DOM
                                    console.log(oMeta.text.customAttributeType );

                            }
                        );

                    }
                }
            },                
            nodeStructure: {
                innerHTML : '<p>The main node</p>'
                children: childrenArrayObject
            }
};

new Treant(chart_config, null, $);

[jainishtesting]

Yes, i am able to create dynamic tree at 1st time. but can not effect tree when i change data. As i know i need to destroy it first but still not able to load tree on second time.

[julianzb-dev]

You need to add new nodes dynamically or only change HTML code in a node?

[jainishtesting]

i am generating new "chart_config" and then called this : new Treant(chart_config, null, $);

[dlgoodchild]

In the latest version of Treant I've added a public addNode method, here's an example I've lifted out of an R&D project I'm working on:

var oNewNodeDef = {
    'text': {
        'name': oEvent.response.data.description
    },
    'meta': {
        'id': oEvent.response.data.id,
        'parent_id': oEvent.response.data.parent_node_id,
        'group_id': oEvent.response.data.node_group_id
    },
    'collapsable': true,
    'position': 1 // can be left, right, center or a numeric position
};
var oNewNode = oTree.addNode( $oNode.data( 'treenode' ).parent(), oNewNodeDef );

[julianzb-dev]

• "Inside Treant class, the config is copied. So if you edit chart_config you would have to destroy that tree completely and create a new instance."
• Please Can you give me example ?

var my_chart = new Treant(chart_config, null, $);

my_chart.destroy()

my_chart = new Treant(THE_NEW_chart_config, null, $);

[jainishtesting]

I have uploaded my code here:
http://jainishj003-001-site1.atempurl.com/Custom/
Please check it.
And press on view Tree. it is breaking tree.

[julianzb-dev]

@jainishtesting I can't access to this site ( http://jainishj003-001-site1.atempurl.com/Custom/ ) I need an user and password affter press "ADD" link (Submit event).

[jainishtesting]

i am able to access . Can you try this one ?
http://jainishj003-001-site1.atempurl.com/Custom/index.html

and if you don't mind can you contact me on [email protected] ?

[sunshinecool]

Is this feature implemented fully? ie can we add nodes dynamically and render them?

[dlgoodchild]

The addNode method is there and works? are you having issues? Not really sure how to answer this.

[jainishtesting]

issue is not solved yet. @sunshinecool . And @dlgoodchild - addNode is different thing. i have requested solution for other issue.

[dlgoodchild]

@jainishtesting make a request specific to your issue with code, not an inaccessible link. The OP's question is irrelevant, because this isn't connected to a database, and there is no data binding, that is something that has to be done outside of this library.

This library, builds a tree from data that you compose and provide to it. You can dynamically add more nodes using addNode, which could come from a database. Beyond that, it's outside of the scope of this library.

[qtttttttttting]

Similarly, can i remove nodes dynamically?

[muhalihusein]

Yes, you can.
I use VB to make MVC program in ASP.net. The controller will pass the ienumerable of self referencing table. Then I convert the passed model into javascript array in view. After that, create the objects based on the javascript array. The created javasccript objects is based on model which passede by controller. So you can easily delete, modify and add object.
But I was forced to use eval().

The controller

Namespace Controllers
Public Class TablesController
Inherits System.Web.Mvc.Controller

    Private db As New Trial31Context

    ' GET: Tables
    Function Index() As ActionResult
        Dim tables = db.Tables.Include(Function(t) t.table)
        Return View(tables.ToList())
    End Function

etc.etc.

The view file

@ModelType IEnumerable(Of Trial31.Models.Table)
@code
ViewData("Title") = "Index"
End Code

<title> Basic example </title> @Styles.Render("~/Content/Trial31.css") @Styles.Render("~/Content/Treant.css")

Index

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(Function(model) model.table.name)
        </th>
        <th>
            @Html.DisplayNameFor(Function(model) model.name)
        </th>
        <th>
            @Html.DisplayNameFor(Function(model) model.quantity)
        </th>
        <th></th>
    </tr>

    @For Each item In Model
        @<tr>
            <td>
                @Html.DisplayFor(Function(modelItem) item.table.name)
            </td>
            <td>
                @Html.DisplayFor(Function(modelItem) item.name)
            </td>
            <td>
                @Html.DisplayFor(Function(modelItem) item.quantity)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", New With {.id = item.id}) |
                @Html.ActionLink("Details", "Details", New With {.id = item.id}) |
                @Html.ActionLink("Delete", "Delete", New With {.id = item.id})
            </td>
        </tr>
    Next

</table>
<script>
    var jModel = @Html.Raw(Json.Encode(Model));
</script>
<div class="chart" id="basic-example"></div>

@Scripts.Render("~/Scripts/raphael.js")
@Scripts.Render("~/Scripts/Treant.js")
@Scripts.Render("~/Scripts/Data.js")

<script>
    new Treant(chart_Config);
</script>

the js file to construct chart_config

var chart_Config = new Array(jModel.length + 1);
var nodes = new Array(jModel.length);
var config = {
container: "#basic-example",
connectors: {
type: 'bCurve'
},
node: {
HTMLclass: 'nodeExample1',
collapsable: true
}
};

chart_Config[0] = config;

for (k = 0; k < jModel.length; k++) {
var varname = jModel[k]["id"];
eval('var ' + varname + '= new Object()');
eval(varname + '.text = new Object();');
eval(varname + '.text.id = jModel[k]["id"];');
eval(varname + '.text.name = jModel[k]["name"];');
if (jModel[k]["parent"] == null) {
eval(varname + '.text.parent = "null"');
} else {
eval(varname + '.text.parent = jModel[k]["parent"];');
}
eval(varname + '.text.quantity = jModel[k]["quantity"];');
eval('chart_Config[k+1] = ' + varname + ';');
};

var check_table = new Array();

for (j = 1; j < chart_Config.length; j++) {
if (chart_Config[j]["text"]["parent"] != "null") {
for (i = 1; i < chart_Config.length; i++) {
if (chart_Config[j]["text"]["parent"] == chart_Config[i]["text"]["id"]) {
chart_Config[j]["parent"] = chart_Config[i];
};
};
};
};