javascriptjquerycontextmenujstree

jsTree and Context Menu: modify items


I'm using jsTree 3.0.0 and I need to modify the context in one of the following ways:

I tried several approaches but nothing worked. For example, this returns Uncaught TypeError: Object [object global] has no method 'create' when I click on create.

"contextmenu":{
    "items": function($node) {
        return {
            createItem : {
                 "label" : "Create New Branch",
                 "action" : function(obj) { this.create(obj); alert(obj.text())},
                 "_class" : "class"
            },
            renameItem : {
                 "label" : "Rename Branch",
                 "action" : function(obj) { this.rename(obj);}
            },
            deleteItem : {
                 "label" : "Remove Branch",
                 "action" : function(obj) { this.remove(obj); }
            }
        };
    }
},

If I try to add one item as in the next example, I loose the default menu items:

items : { 
    "create_folder" : {
        "separator_before" : false,
        "separator_after" : false,
        "label" : "Create Folder",
        "action" : function (obj) { alert(1); /* this is the tree, obj is the node */ }
    }
}

Where am I wrong?


Solution

  • Resolved:

    "contextmenu":{         
        "items": function($node) {
            var tree = $("#tree").jstree(true);
            return {
                "Create": {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Create",
                    "action": function (obj) { 
                        $node = tree.create_node($node);
                        tree.edit($node);
                    }
                },
                "Rename": {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Rename",
                    "action": function (obj) { 
                        tree.edit($node);
                    }
                },                         
                "Remove": {
                    "separator_before": false,
                    "separator_after": false,
                    "label": "Remove",
                    "action": function (obj) { 
                        tree.delete_node($node);
                    }
                }
            };
        }
    }