Rename Node Using jsTree

In this blog, you will learn how to rename a 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 

<div id="jsTreeExample"></div>

<script>
    $(document).ready(function () {
        fnLoadJsTree()
    })
    function fnLoadJsTree() {
        var treeDataSource = [
            { id: 'fields', parent: '#', text: 'Fields', type: 'folder' },
            { id: '1', parent: 'fields', text: 'Field1', type: 'file' },
            { id: '2', parent: 'fields', text: 'Field2', type: 'file'},
            { id: '3', parent: 'fields', text: 'Field3', type: 'file' },
            { id: '4', parent: 'fields', text: 'Field3', type: 'file' },
            { id: '5', parent: 'fields', text: 'Field3', type: 'file'}
        ]
        //jsTree instance
        $('#jsTreeExample').jstree({
            "core": {
                "data": treeDataSource
            },
            "types": {
                "folder": {
                    "icon": "fa fa-folder"
                },
                "file": {
                    "icon": "fa fa-file"
                }
            },
            "plugins": ["types"],
        }).bind('ready.jstree', function (e, data) {
            $('#jsTreeExample').jstree('open_all')
        })
    }

</script>

 

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.

"core": {
               "check_callback": true,
               "data": treeDataSource
           },

Add context menu plugin to jsTree.

"plugins": ["types","contextmenu"]

Once we added the above two changes, then we can able to do the CRUD functionalities to the nodes.

 

 

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. 

.bind("dblclick.jstree", function (event) {
    //your code to make the mode to edit mode
})

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.

.bind("rename_node.jstree", function (event) {
    //your code to save the new text to the jstree datasource
})
//jsTree instance
        $('#jsTreeExample').jstree({
            "core": {
                "check_callback": true,
                "data": treeDataSource
            },
            "types": {
                "folder": {
                    "icon": "fa fa-folder"
                },
                "file": {
                    "icon": "fa fa-file"
                }
            },
            "plugins": ["types", "contextmenu"],
        }).bind('ready.jstree', function (e, data) {
            $('#jsTreeExample').jstree('open_all')
        }).bind("dblclick.jstree", function (event) {
            var jstree = $('#jsTreeExample').jstree(true);
            var selectedNode = $('#jsTreeExample').jstree('get_selected', true);
            if (selectedNode && selectedNode.length > 0 && selectedNode[0].id != "0") {
                jstree.edit(selectedNode[0]);
            }
        }).bind("rename_node.jstree", function (e, data) {
            if (data.node.text && data.text != data.old) {
                 //code to update the new  name to the datasource
            }
        })

 

Summary

 

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