jsTree component background menu?

0
votes

In jsTree component available a ContextMenu plugin.

But it's available only when user clicked on specific node.

I need to add context menu by clicking on component's background (to add root nodes, for example).

Is it possible to attach a context menu plugin for background ?

1
jstree

1 Answers

0
votes

Yes you can, but you need to define all actions you need to be available, as the defaults are related to a node, so they won't work (rename, delete, etc).

This will show a menu when the tree container is clicked and will show an option to create a root node:

$('#tree').on('contextmenu.jstree', function (e) {  
    e.preventDefault();
    if($(e.target).is('#tree')) {
        $(document).one("context_show.vakata.jstree", $.proxy(function (e, data) {
            var cls = 'jstree-contextmenu jstree-default-contextmenu';
            $(data.element).addClass(cls);
        }, this));
        $.vakata.context.show($(this), { 'x' : e.pageX, 'y' : e.pageY }, {
            "create" : {
                "separator_before"  : false,
                "separator_after"   : false,
                "_disabled"         : false,
                "label"             : "Create",
                "action"            : function (data) {
                    var inst = $.jstree.reference(e.target);
                    inst.create_node(null, {}, "last", function (new_node) {
                        setTimeout(function () { inst.edit(new_node); },0);
                    });
                }
            }
        });
    }
});