I use 'contextmenu' and 'types' plugin in jstree and want to define different contextmenu according to the 'types', like this:

$("#tree").jstree({
    "plugins" : [ "themes", "json_data", "ui", "contextmenu", "types" ],
    "themes" : {
        "url" : "css/jstree/themes/classic/style.css",
        "theme" : "classic",
        "icons" : false
    },
    "json_data" : { "data" : data },
    "types": {
        "types": {
            "leaf": { "contextmenu" : { items : contextMenu } }
        }
    }
});

but it doesn't work, it displays the same contextmenu for all nodes, no specified one as I defined for 'leaf' nodes. Is it because cannot define contextmenu in type? Then how to achieve this easily.

I use 'contextmenu' and 'types' plugin in jstree and want to define different contextmenu according to the 'types', like this:

$("#tree").jstree({
    "plugins" : [ "themes", "json_data", "ui", "contextmenu", "types" ],
    "themes" : {
        "url" : "css/jstree/themes/classic/style.css",
        "theme" : "classic",
        "icons" : false
    },
    "json_data" : { "data" : data },
    "types": {
        "types": {
            "leaf": { "contextmenu" : { items : contextMenu } }
        }
    }
});

but it doesn't work, it displays the same contextmenu for all nodes, no specified one as I defined for 'leaf' nodes. Is it because cannot define contextmenu in type? Then how to achieve this easily.

• javascript
• jstree

Share Improve this question Follow asked Mar 9, 2012 at 2:14 denceydencey 1,0611717 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You have to define the context menu in the context menu plugin section. I think the best way at the moment is to define all items for all nodes and then delete items according to the node type, or even better - define a function that returns the context menu according to the node. i.e, this is how you'd usually define the contextmenu without a function:

    "contextmenu" : {
        items: {
            "some_action" : {
                "label" : "Do something",
                "action"            : function (obj) { this.do_action(obj); },
                "_disabled"         : function (obj) { 
                    // here you can decide if you want to show the item but disable it
                }
            };
            // define more items
        };
         if (data.rslt.o.attr("rel") == "no_action") {
            delete items.some_action;
        }
    return items;
}