CODEWITHSUNDEEP
javascriptjquery
sameer Ahmed
sameer Ahmed

Reputation: 597

How to Create root node in jsTree (version 3.2.1)

I am using a JsTree (J query plugin for create folder hierarchy),Actually i want to create a parent node by using "create_node" method. I tried below solution but not generated any parent node or root node,Kindly help me for create root node in JsTree.

$('#CountainerTree').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });

function CreateRootFolder(){
$("#CountainerTree").jstree('create_node', '#', {'id' : 'myId', 'text' : 'My Text'}, 'last');
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>




<button id="btnCreateNewRoot" onclick="CreateRootFolder()">Creat Root Folder</button>

<div id="divJsTreeParent" class="col-md-12 col-sm-12 col-xs-12">
                <div id="CountainerTree" class="">

                </div>
            </div>

Upvotes: 0

Views: 582

Answers (1)

charlietfl
charlietfl

Reputation: 171679

You need to add "check_callback": true, to the core option.

I am not sure what this is for exactly but makes it work 

$('#CountainerTree').jstree({ 'core' : {
    "check_callback": true,
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });

function CreateRootFolder(){
$("#CountainerTree").jstree('create_node', '#', {'id' : 'myId', 'text' : 'My Text'}, 'last');
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>




<button id="btnCreateNewRoot" onclick="CreateRootFolder()">Creat Root Folder</button>

<div id="divJsTreeParent" class="col-md-12 col-sm-12 col-xs-12">
  <div id="CountainerTree" class="">

  </div>
</div>

Upvotes: 1

Related Questions