How to trigger simple event by right clicking tree node in v3?

[Dan Bramall]

Hi,

I have an event that's triggered on (left) clicking a node in the tree:

$('#jstree').on('activate_node.jstree', function (e, data) {

$('.editing-panel').load('/editor.htm');

});

 This works fine.

However, I'd like to do something different when the node is right-clicked.  I know how to do this with jQuery, but what would the best way be to bind this in jsTree v3?  Just a simple trigger of an alert on right click would be ideal for now.

Thanks folks.

[Ivan Bozhanov]

Just use a normal event - jstree only triggers its own events ... if you want to react to contextmenu clicks, use the contextmenu event:

$('#jstree').on('contextmenu', '.jstree-anchor', function (e) {

alert(1); // you ca easily get the instance using: $('#jstree').jstree(true), and the node using: instance.get_node(e.target);

});
Best regards,
Ivan

[Dan Bramall]

Thanks Ivan.  I must be doing something wrong as that event just isn't firing (I just get the standard context menu but no alert).  My code is very much based on the AJAX demo code, like this:

  $('#jstree').jstree({

"core" : {

"animation" : 0,

"check_callback" : true,

"themes" : { "stripes" : true },

'data' : {

'url' : function (node) {

return node.id === '#' ? '/static/3.0.2/assets/test-root.json' : '/static/3.0.2/assets/test-children.json';

},

'data' : function (node) {

return { 'id' : node.id };

}

}

},

"types" : {

"#" : {

"max_children" : 1, 

"max_depth" : 4, 

"valid_children" : ["root"]

},

"root" : {

"icon" : "/static/3.0.2/assets/images/tree_icon.png",

"valid_children" : ["default"]

},

"default" : {

"valid_children" : ["default","file"]

},

"file" : {

"icon" : "glyphicon glyphicon-file",

"valid_children" : []

}

},

"plugins" : [

"contextmenu", "dnd", "state", "types", "wholerow"

]

});

$('#jstree').on('contextmenu', '.jstree-anchor', function (e) {

alert('1');

});

Sorry if I'm missing something obvious - my JS skills aren't the best admittedly - still very much learning!

[Ivan Bozhanov]

Sorry but it seems to me I am missing something - you already have the contextmenu plugin included? If you have the contextmenu included and you get the standard browser contextmenu that means your browser does not fire the contextmenu event. Try listening for a click, but with the second mouse button - although that is a bit flaky.

If you get the jstree contextmenu (not the standard browser one), just try binding BEFORE creating the instance

Best regards,
Ivan

[Dan Bramall]

Thanks Ivan,

Yes, I have the contextmenu plug-in referenced and it is working, so I'm getting the contextmenu plug-in menu (rather than the standard browser context menu) when I right click a node.  However, I don't want this - I don't want any context menu, I just want an alert to fire when a node is right clicked.

I've tried binding before creating the jsTree instance, like the following:

 
    $('#jstree').on('contextmenu', '.jstree-anchor', function (e) {
      alert('1');
    });

    $('#jstree').jstree({

        "questionmark" : function (node) {
            console.log(node);
        },
        "plugins" : [
            "contextmenu", "dnd", "state", "types", "wholerow", "questionmark"
        ]
    });

I've also tried chaining the binding before creating the instance:

    $('#jstree').on('contextmenu', '.jstree-anchor', function (e) {

      alert('1');

        "questionmark" : function (node) {
            console.log(node); 
        }, 
        "plugins" : [
            "contextmenu", "dnd", "state", "types", "wholerow", "questionmark"
        ]
    });

...but neither of these things works - I just still get the jsTree context menu when I right click, and no alert is fired.

Thanks

[Dan Bramall]

Ah-ha!  The red-herring here was the alert() which doesn't fire - presumably because of the context it's called in.  I changed that to a console.log() and this fires.

So now if I want to stop the jsTree context menu from showing, how can I prevent that?

Thanks.

[Dan Bramall]

Is it also possible to prevent the right click from selecting the node too?  Currently when right-clicked, the 'select_node' event is being triggered, which I need to try to suppress along with the jsTree context menu. 

Thanks.

[Ivan Bozhanov]

In that case you do not need the contextmenu plugin. Remove the contextmenu, add only your code and make sure you preventDefault() so that in browsers that support this the default contextmenu will not be shown. To prevent selection you might have to add stopImmediatePropagation() and also as before - make sure your handler is added before creating the instance.

Best regards,
ivan