CODEWITHSUNDEEP
javascriptjqueryjstreejstree-dndjstree-search
G.Brown
G.Brown

Reputation: 389

Create Functionality in Context Menu of jsTree not working

New nodes won't be created when 'types' plugin is defined.

Please look at this fiddle. I'm unable to create new Nodes in the tree. http://jsfiddle.net/z8L5r9w3/1/

$('#jstree').jstree({
"core" : {
    "check_callback" : true,
    "data" : [
        { "text" : "Branch 1", "type" : "branch", "children" : [
            { "text" : "leaf 1.1", "type" : "leaf" },
            { "text" : "leaf 1.2", "type" : "leaf" },
            { "text" : "leaf 1.3", "type" : "leaf" }
           ]
        },
        { "text" : "Branch 2", "type" : "branch", "children" : [
            { "text" : "leaf 2.1", "type" : "leaf" },
            { "text" : "leaf 2.2", "type" : "leaf" },
            { "text" : "leaf 2.3", "type" : "leaf" }
           ]
        }
    ]
},
        "types" : {
            "#" : {
                "valid_children" : ["branch"]
            },
            "branch" : {
                "valid_children" : ["leaf"]
            },
            "leaf" : {
                "valid_children" : []
            }
        },
"plugins" : ["types", "dnd", "contextmenu"]});

Upvotes: 4

Views: 801

Answers (2)

Yaroslav Nudnenko
Yaroslav Nudnenko

Reputation: 290

Also, you can override "contextmenu"

    "contextmenu":{
                "items": function () {
                    return {
                        "Create": {
                            "label": "Create",
                            "action": function (data) {
                                var ref = $.jstree.reference(data.reference);
                                sel = ref.get_selected();
                                if(!sel.length) { return false; }
                                sel = sel[0];
                                type = ref.get_type(sel);
                                if (type == "#")
                                    type = "branch";
                                else if (type == "branch")
                                    type = "leaf";
                                else if (type == "leaf")
                                    type = "";
                                sel = ref.create_node(sel, {text: "new "+type, type: type});
                                if(sel) {
                                    ref.edit(sel);
                                }

                            }
                        },
                        "Rename": {
                            "label": "Rename",
                            "action": function (data) {
                                var inst = $.jstree.reference(data.reference);
                                obj = inst.get_node(data.reference);
                                inst.edit(obj);
                            }
                        },
                        "Delete": {
                            "label": "Delete",
                            "action": function (data) {
                                var ref = $.jstree.reference(data.reference),
                                sel = ref.get_selected();
                                if(!sel.length) { return false; }
                                ref.delete_node(sel);

                            }
                        }
                    };
                }
            },

Upvotes: 3

Yaroslav Nudnenko
Yaroslav Nudnenko

Reputation: 290

You have a problem with "types". The "Create" action in the "contextmenu" does not know about the types of "branch" and "leaf" and create new node with "type" : "default". You can see this:

        "types" : {
            "#" : {
                "valid_children" : ["branch", "default"]
            },
            "branch" : {
                "valid_children" : ["leaf", "default"]
            },
            "leaf" : {
                "valid_children" : []
            }
        },

Upvotes: 2

Related Questions