Post
Ask Question

Rename Node Using jsTree

Introduction

 
Hello all!
 
I am going the explain how we can edit and rename the nodes using the jsTree plugin. 
 
Please read the introduction post of jsTree if you haven't already read it.
 
Basically there are few ways to achieve the rename functionality in jsTree. We are going to see two basic things.
 
Load jsTree 
  1. <div id="jsTreeExample"></div>    
  2.   
  3. <script>    
  4.     $(document).ready(function () {    
  5.         fnLoadJsTree()    
  6.     })    
  7.     function fnLoadJsTree() {    
  8.         var treeDataSource = [    
  9.             { id: 'fields', parent: '#', text: 'Fields', type: 'folder' },    
  10.             { id: '1', parent: 'fields', text: 'Field1', type: 'file' },    
  11.             { id: '2', parent: 'fields', text: 'Field2', type: 'file'},    
  12.             { id: '3', parent: 'fields', text: 'Field3', type: 'file' },    
  13.             { id: '4', parent: 'fields', text: 'Field3', type: 'file' },    
  14.             { id: '5', parent: 'fields', text: 'Field3', type: 'file'}    
  15.         ]    
  16.         //jsTree instance    
  17.         $('#jsTreeExample').jstree({    
  18.             "core": {    
  19.                 "data": treeDataSource    
  20.             },    
  21.             "types": {    
  22.                 "folder": {    
  23.                     "icon": "fa fa-folder"    
  24.                 },    
  25.                 "file": {    
  26.                     "icon": "fa fa-file"    
  27.                 }    
  28.             },    
  29.             "plugins": ["types"],    
  30.         }).bind('ready.jstree', function (e, data) {    
  31.             $('#jsTreeExample').jstree('open_all')    
  32.         })    
  33.     }    
  34.     
  35. </script>   
Rename Node using jsTree
 
Method 1
 
Not only RENAME, either to CREATE/ DELETE/ EDIT (CUT/ COPY/ PASTE) and all we have the default method in jsTree using the contextmenu plugin.
 
Please note that by default the changes to the tree are prevented. To enable them, set 'check_callback' to true.
  1. "core": {      
  2.                "check_callback": true,    
  3.                "data": treeDataSource      
  4.            },    
Add context menu plugin to jsTree.
  1. "plugins": ["types","contextmenu"]  
Once we added the above two changes, then we can able to do the CRUD functionalities to the nodes.
 
Rename Node using jsTree
 
Method 2
 
This may be based on the project requirement that the user should be able to double click the node and rename it.
 
For this method, there's no need for the contextmenu plugin.
 
Step 1
 
Bind a double click event to the jsTree instance. 
  1. .bind("dblclick.jstree", function (event) {    
  2.     //your code to make the mode to edit mode    
  3. })    
Step 2
 
Once it is in edit mode, the node will appear as a textbox. Users can change the text and click anywhere outside the tree. Then the rename event will get triggered.
  1. .bind("rename_node.jstree", function (event) {      
  2.     //your code to save the new text to the jstree datasource     
  3. })     
  4. //jsTree instance    
  5.         $('#jsTreeExample').jstree({    
  6.             "core": {    
  7.                 "check_callback": true,    
  8.                 "data": treeDataSource    
  9.             },    
  10.             "types": {    
  11.                 "folder": {    
  12.                     "icon": "fa fa-folder"    
  13.                 },    
  14.                 "file": {    
  15.                     "icon": "fa fa-file"    
  16.                 }    
  17.             },    
  18.             "plugins": ["types", "contextmenu"],    
  19.         }).bind('ready.jstree', function (e, data) {    
  20.             $('#jsTreeExample').jstree('open_all')    
  21.         }).bind("dblclick.jstree", function (event) {    
  22.             var jstree = $('#jsTreeExample').jstree(true);    
  23.             var selectedNode = $('#jsTreeExample').jstree('get_selected', true);    
  24.             if (selectedNode && selectedNode.length > 0 && selectedNode[0].id != "0") {    
  25.                 jstree.edit(selectedNode[0]);    
  26.             }    
  27.         }).bind("rename_node.jstree", function (e, data) {    
  28.             if (data.node.text && data.text != data.old) {    
  29.                  //code to update the new  name to the datasource    
  30.             }    
  31.         })   
Rename Node using jsTree
 

Summary

 
In this blog, we have seen how to rename a node in jsTree. I hope you all liked this.