Creating dynamically parent elements

Dear dhtmlx community,

I’m facing a problem while inserting a parent item dynamically, by script.
My wish is to add an element inside a tree, which is a parent : with folder image and +/- icons to expand/collapse. All I can get is inserting a child element…

I’ve tried using this from [url]Start DHTMLX Docs

tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD");

But i don’t think the “CHILD” option works like i thought (render the inserted node as having children below) : it changes nothing whether i use it or not. What is this “CHILD” option doing exactly ?

I’ve also tried this from [url]http://docs.dhtmlx.com/doku.php?id=dhtmlxtree:api_method_dhtmlxtreeobject_insertnewnext[/url], which is the same function but with different parameters (same doc, same function, different definition btw)

tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"", true);

Same behavior as above : i always get a child element, whether using the children node flag or not.

Is there anything i’m doing wrong ? How can I do this ?
Thanks in advance,

I have a simmilar problem in a tree element.
I want to create root items manualy (using javascript insertNewChild()). And than connect the child items from a mysql database (using setXMLAutoLoading()).
Like that:

-Item1 (Manualy)
-Load1 (from mysql)
-Load1_1 (from mysql)
-Load1_2 (from mysql)
-Item2 (Manualy)
-Load2 (from mysql)
-Load2_1 (from mysql)
-Load2_2 (from mysql)
-Item3 (Manualy)

Anyone knows how can i do that?

@Rui Costa :

The items you are creating manually, are they look like parents elements ? (+/- icons and folder image ?). If so, how do you create them ?

Assuming they are parents, i would do something like this (not tested, handwrited code):

// set a callback function when clicking on "+" icon to expand parent
tree.attachEvent("onOpenStart", getSubElements );

function getSubElements(id)
{
  // ajax call that returns JSON data, using jQuery
  // browse JSON data to insert children manually
  $.ajax({
	url: 'ajax.php?getsubelementsof=' + id,
	dataType: 'json',
	type: 'get'
	})
	.done(function(data){			
		$.each( data, function(i,item){
			tree.insertNewChild(id, item.id, item.name,0,0,0,0,"");
		})
	})
	.fail(function(){
		alert('An error has occured while getting sub elements of '+ id +'.');
	});
}

Your ajax.php should send your children data in JSON format like this :

[
 { "id": "1_1", "name": "Load1_1" },
 { "id": "1_2", "name": "Load1_2" },
 ...
 { "id": "1_n", "name": "Load1_n" }
]

If one of children needs to be a parent (that also contains children), you’re facing the same problem than me : the tree.insertNewChild() or tree.insertNewNext() always displaying element as a child : no +/- icons to click so no data to get through the same process.

Hope it helps,

Hello,

I’m still on this issue.
If the community doesn’t know how to do, maybe someone from dhtmlx staff can help me ?
I don’t think we need a feature from PRO version for this, but I got the entreprise suite if actually needed.

Thanks in advance.

Hello,

ddimanche,

My wish is to add an element inside a tree, which is a parent : with folder image and +/- icons to expand/collapse. All I can get is inserting a child element…

child attribute only works in trees with dynamic loading - if setXMLAutoLoading is called:

dhtmlxTree/samples/12_loading_processing_data/13_tree_dyn_loading.html

Here is the example:

tree.setXMLAutoLoading(“someUrl”);

tree.insertNewNext(1,2,“New Node 2”,0,0,0,0,“CHILD”);

If you open such an item without child nodes, the + sign will disappear. Therefore, you need to set event handlers that will add child nodes after a node is clicked.

Rui Costa

I want to create root items manualy (using javascript insertNewChild()). And than connect the child items from a mysql database (using setXMLAutoLoading()).

it is possible. The root nodes will be created using insertNewNext, insertNewChild methods with CHILD option. For their child nodes will be called script defined in setXMLAutoLoading.

The approach is the same as in dhtmlxTree/samples/12_loading_processing_data/13_tree_dyn_loading.html . However, instead of loadXML method you need to call insertNewNext/insertNewChild. Note that these methods should be called after setXMLAutoLoading.

Hello Alexandra,

Thanks for your reply.
Is there any other way to create a node as a parent element, without using setXMLAutoLoading ?
Because I can’t generate the data in XML format, it’s sent back from a third party app, in JSON format.

Of course I will need to use an event handler that will add childs after a node is clicked, as I wrote to Rui Costa above :

// set a callback function when clicking on "+" icon to expand parent
tree.attachEvent("onOpenStart", getSubElements );

function getSubElements(id)
{
  // ajax call that returns JSON data, using jQuery
  // browse JSON data to insert children manually
  $.ajax({
   url: 'ajax.php?getsubelementsof=' + id,
   dataType: 'json',
   type: 'get'
   })
   .done(function(data){         
      $.each( data, function(i,item){
        if( item.hasChild == 1 )
        { // insert as node folder
            // HERE CODE I NEED TO INSERT A NODE FOLDER, WITH +/- ICONS
        }
        else
        { // insert as leaf
           tree.insertNewChild(id, item.id, item.name,0,0,0,0,"");
        }
      })
   })
   .fail(function(){
      alert('An error has occured while getting sub elements of '+ id +'.');
   });
}

Thank you.

Hello,

Dynamic loading is possible with JSON data as well as xml. Please see the sample:

dhtmlxTree/samples/11_json_support/01_pro_dyn_loading_json.html

Also in case of PRO edition you can set function as “autoloading” handler:

[code]tree.setXMLAutoLoadingBehaviour(“function”);
tree.setXMLAutoLoading(loadChildItems);

function loadChildItems(parentId){
//your code here
}[/code]
loadChildItems function will be called when an item with “child” attribute opens for the first time.

Hello Alexandra,

I didn’t take care about this setXMLxxx function set, because i’m not working with XML…
But this is what I was looking for, thank you very much, it’s working :slight_smile: