Jstree context menu supress changed event on select_node right click

Question

Im trying to find a way I can suppress the changedevent in jstree when loading a dynamic context menu (right click). I'm aware that you can suppress the select_node event in the context menu but I need to get the node id of the node that I am right clicking on. (and therefore need to use the select_node). I know that you can suppress that changed event when calling select_node regularly, but I'm not sure how to do it when right clicking. I tried the following with the context menu select_node, but it did not work:

$(function () {
    $('#myTree').jstree({
        "core": {
            "themes": {
                "variant": "small",
                "icons": false
            }
        },
        "contextmenu": {
            "items": reportMenu(node),      //builds context menu based on selected node
        },
        "plugins": ["contextmenu", "changed"]
    });
});
$("#myTree").bind('select_node.jstree', function (event, data) {
// Does not work, changed event still fires.
    $("#myTree").jstree().select_node(data.node.id, true);
});

I'm looking for one of the possible alternatives:

1. How can I suppress the changedevent when the context menu calls select_node?
2. How can I get the id of the node I am right clicking on without calling the select_node event (i.e. If I set my contextmenu to 'select_node': false, how can I capture the select node)?

Answer 1

Finally, I think you can get what you want changing your code a little.

Check demo - codepen.

$('#myTree')
    .jstree({
        'core': {
            'data': ...
        },
        'plugins': ["contextmenu"],
        'contextmenu': {
            'select_node': false,
            'items': reportMenu
        }
    });

function reportMenu(node) {
    // access node as: node.id);
    // build your menu depending on node id
    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); }
        }
    };
}