JSTree context menu not displaying

Question

I am trying to set up a context menu in my javascript project. Here is the code I have for the json data of the tree and the creation of the tree.

let json_data = {
        'core': {
            'data': [
                {
                    'text': 'First',
                    'state': {
                        'opened': false,
                        'selected': false
                    },
                    'children': [
                        {
                            'text': 'First'
                        },
                        {
                            'text': 'Second'
                        },
                        {
                            'text': 'Third'
                        }
                    ]
                },
                {
                    'text': 'Second',
                    'state': {
                        'opened': false,
                        'selected': false
                    },
                    'children': [
                        {
                            'text': 'First'
                        },
                        {
                            'text': 'Second'
                        },
                        {
                            'text': 'Third'
                        }
                    ]
                },
                {
                    'text': 'Third',
                    'state': {
                        'opened': false,
                        'selected': false
                    },
                    'children': [
                        {
                            'text': 'First'
                        },

                    ]
                }
            ]


        },
        'plugins': ['contextmenu'],
        'contextmenu' : {
            'items': this.customMenuOptions
        }

    };
    tree.jstree(json_data).bind("select_node.jstree", function(e, data){});
    console.log(tree[0]);
}

And here is the code I have for customMenuOptions:

customMenuOptions(node) {
        console.log(node);
        let items = {
            'item1': {
                'label': 'item1',
                'action': function(){}
            },
            'item2': {
                'label': 'item2',
                'action': function(){}
            }
        };

        return items;

    }

I know the right click functionality is working because whenever I right click on the any node on the tree, the print statement at the top of customMenuOptions appears in the console; however, the menu does not show up. Any help would be appreciated. Thanks.

Have you looked here? https://stackoverflow.com/questions/4559543/configuring-jstree-right-click-contextmenu-for-different-node-types — IrkenInvader, Jun 21 '18 at 15:53
@IrkenInvader I have, to my understanding, I am doing almost the same thing as the accepted answer on that post. — Sidd Menon, Jun 21 '18 at 15:56
@SiddMenon You'd probably have to share some more specific code for the tree.The snippets you have shared seem alright. — Stephen S, Jun 22 '18 at 06:25
I looked at the elements tab of the console and saw that the context menu element is being created on right click, and deleted when clicked outside of. Only issue is that the element isn't visible. — Sidd Menon, Jun 25 '18 at 15:00

score 2 · Accepted Answer · answered Jun 25 '18 at 16:02

2

Fixed the issue by increasing the z-index of the context menu element, so that it is not hidden behind the rest of the elements.

answered Jun 25 '18 at 16:02

Sidd Menon

856
6
18

JSTree context menu not displaying

1 Answers1