Question

I am working on contextmenu for jstree, and apparently needed a clone functionality in right click menu which will actually be simulation of copy , paste and rename, so that once user right clicks on an item and then clicks on clone, a node is copied (copied and pasted in the tree , and focused with rename highlight so that user could rename it right there.

I tried code below for custom clone menu item, but it doesn’t work

cloneItem: { // The “clone” menu item
label: “Clone”,
action: function (obj)
{
this.copy(obj);
this.paste(obj);
}
}

Any help is very much appreciated.

Answer 1

After research I figured out how this clone could be implemented, the key to do this was as paste goes on parent node of copied node. here is code.

cloneItem: { 
        label: "Clone",             
        action: function (obj) 
        {
            var currentId = this._get_node(obj).attr("id");
            var parentId = this._get_node(obj)[0].firstChild.parentElement.parentNode.parentElement.id;
            $("#TreeDiv").jstree("copy"); 
            $("#TreeDiv").jstree("select_node","#"+parentId);
            $("#TreeDiv").jstree("paste"); 
            $("#TreeDiv").jstree("deselect_node","#"+parentId)
            $("#TreeDiv").jstree("deselect_node", "#"+currentId)
            $("#TreeDiv").jstree("select_node","#copy_"+currentId);
            $("#TreeDiv").jstree("rename");   
        } 

    },

steps to do this are

• copy the current item using .jstree(“copy”);
• select the parent node of copied item using .jstree(“select_node”,”#”+parentId);
• paste the copied item ( its copied over selected item , means parent ) using .jstree(“paste”);
• now deselect both parent and copied element using .jstree(“deselect_node”,”#”+parentId) and .jstree(“deselect_node”, “#”+currentId)
• Before renaming select the copied node, the copied items gets id as copy_, so do this by .jstree(“select_node”,”#copy_”+currentId);
• and the final step to do is by .jstree(“rename”);

I hope it will help someone, who needs clone in jstree.