Creating root node on a blank tree w/ button click

[tom daly]

I want to start out with a blank/empty tree, and allow users to create root nodes and sub nodes. 

I could not figure out how to create these root nodes. I've read many of the postings but it usually shows the javascript and not the html they have. Or just one line of whatever functions.. it's never so simple. 

I have it displaying the jstree if i manually enter in 

this html - http://jsfiddle.net/tdiz/k5pUj/1/

<ul>

<li>Root

<ul>

<li>Child</li>

</ul>

</li>

</ul>

What i want it to start blank and create root on click 

http://jsfiddle.net/tdiz/JYaCj/

appreciate any help

[Ivan Bozhanov]

This is what you need in the script tab:
$(function (){
    $("#jstree").jstree({
        "core" : { "check_callback" : true },
      "plugins" : ["wholerow"]
    });
    $("#create-btn").click(function(){
        $("#jstree").jstree("create_node", "#", "Name");
    });
});

[Geo]

Hi Ivan,

I have the same requirement to create the root nodes from scratch, and name the root nodes based on a selected item from a drop-down list in the page. It works fine, without "unique" plugin and "types". When I use either "unique" plugin or "types", I wont be able to create any root nodes. Please find below the code snippet,

$("#jstree_demo").jstree({

       "core" : { "animation" : 0,

       "check_callback" : true },

"themes" : { "stripes" : true },

      "plugins" : ["wholerow", "contextmenu", "dnd", "search", "state", "types", "unique" ] ,

"types" : {

"#" : { "max_children" : -1, "max_depth" : 4, "valid_children" : ["root"] },

"root" : { "icon" : "../css/images/sort_both.png", "valid_children" : ["default"] },

"default" : { "valid_children" : ["default","file"] },

"file" : { "icon" : "glyphicon glyphicon-file", "valid_children" : [] }

}  

   });

   $("#create-btn").click(function(){

       

       $("#jstree_demo").jstree("create_node", "#", $("#ruleCat").val());

   });

Could you please help me to find the issue? Thank you.

[Ivan Bozhanov]

As per your config - only nodes of type "root" are allowed under "#", but I do not see you passing in a type when creating the new node - just a string, so the node you are creating is of the "default" type which is not allowed under "#" - so the operation is prevented. As for unique - you probably have a node with the same name already in the tree.

Use:  $("#jstree_demo").jstree("create_node", "#", { text : $("#ruleCat").val(), type : "root" });

Best regards,
Ivan

[Geo]

Hi Ivan,

Thanks for the reply. Now I am able to assign the "root" type to the root node.

But, I am unable to assign custom types to any child nodes. I have tried to assign "types" to child nodes using below code. But this is blocking the child node creation itself under the root. 

Please have a look into this and kindly let me know how to assign "types" to child nodes. Thank you.

$("#jstree_demo").jstree({

"core" : { "animation" : 0,

"check_callback" : true },

"themes" : { "stripes" : true },

"plugins" : ["wholerow", "contextmenu", "dnd", "search", "state", "types" ]  ,

"types" : {

"#" : { "max_children" : -1, "max_depth" : 4, "valid_children" : ["root"] },

"root" : { "icon" : "../css/images/sort_asc.png", "valid_children" : ["ruleType"] },

"ruleType" : { "icon" : "../css/images/sort_asc.png", "valid_children" : ["thresholdType","treatmentType"] },

"thresholdType" : { "icon" : "../css/images/sort_asc.png", "valid_children" : ["thresholdType"] },

"treatmentType" : { "icon" : "../css/images/sort_asc.png", "valid_children" : ["treatmentType"] }

}  

});

$("#create-btn").click(function(){

$("#jstree_demo").jstree("create_node", "#", { text : $("#ruleCat").val(), type : "root" });

});

Below given is the tree structure I need to create, and under Treatment node, I need to create child nodes as drop-down lists. I am trying to assign different types to all the child nodes, so that I can apply any rules to the child nodes based on their type.

[Ivan Bozhanov]

I do not see the code where you are creating or loading nodes - just your type config. It is the same as with the root node - when creating a node - make sure you have a valid type specified. If you are using the same button to create all kinds of nodes and want to automatically pick the right one - then read the type of the parent and create accordingly. Sorry, I do not see the problem here.

Best regards,
Ivan

[Geo]

Hi Ivan,

I was trying to assign types to child nodes. I thought the below code (in my jsp file) would be handling the assignment of types to child nodes.

"types" : {

"#" : { "max_children" : -1, "max_depth" : 4, "valid_children" : ["root"] },

"root" : { "icon" : "../css/images/sort_asc.png", "valid_children" : ["ruleType"] },

"ruleType" : { "icon" : "../css/images/sort_asc.png", "valid_children" : ["thresholdType","treatmentType"] },

"thresholdType" : { "icon" : "../css/images/sort_asc.png", "valid_children" : ["thresholdType"] },

"treatmentType" : { "icon" : "../css/images/sort_asc.png", "valid_children" : ["treatmentType"] }

} 

Can you please provide the code change required to create and assign a new type to a specific child node?

There are the 3 types which I need to assign to different levels of child nodes - "ruleType", "thresholdType", "treatmentType" - under root node (of "root" type).

So, when I click on the "Create" on context menu of root node, the child should be created with type "ruleType", and on click of the "Create" on context menu of this child node, two child nodes should be created with types "thresholdType"and "treatmentType" respectively. Please let me know how to specify the types for child nodes in this scenario.

The button click functionality (mentioned in the previous post) is only for creating the root node. All the child nodes are created by the context menu "Create".

Thank you.

[Ivan Bozhanov]

You misunderstood the types plugin - it will not automatically assign node types based on depth, or create children automatically - it does exactly the opposite - it prevents the user from creating invalid node type configurations (dragging a folder inside a file for example). The types plugin is meant to prevent the user from interacting with the tree in a certain way.

You the developer are in charge of presenting the user with valid options - so in your case - override the contextmenu create action and create nodes depending on the current selection. In the other thread where you are asking the same question I saw that you have already overridden that function - that is the way to go - just examine the right-clicked node's type and when invoking "create" invoke it with the right type parameter, if the right-clicked node is ot type "root" invoke create_node with a "type" set to "ruleType", if the right-clicked node is of the "ruleType" type - invoke create_node with "type" set to either "thresholdType" or "treatmentType", etc.

Or if you actually need to create multiple nodes at once - read the answer I gave you in the other topic.

Best regards,
Ivan

[Geo]

Thanks Ivan. It worked..I override  the context menu create function to use set_type() API.

inst.create_node(obj, {}, "last", function (new_node) {

this.set_type(new_node, "ruleType");

setTimeout(function () { inst.edit(new_node); },0);

});

Thank you very much for the help..