jsTree contextmenu issue

Question

This should be a really simple question, but I can't seem to find the answer anywhere. I've recently (like today) began using jsTree and I just got my first tree set up. I created an unordered list of just static text:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

My code to do a jsTree looks like this:

$(document).ready(function () {
        $("#demo1").bind("select_node.jstree",
                function(event, data) {
                    //DO SOMETHING WHEN A NODE IS CLICKED
                }).jstree();
});

Then I try to add a context menu. Using the following:

$(document).ready(function () {
        $("#demo1").bind("select_node.jstree",
                function(event, data) {
                    //DO SOMETHING WHEN A NODE IS CLICKED
                }).jstree({plugins: ["contextmenu"], contextmenu: {items: customMenu}});
    });

customMenu is a simple function that returns an object.

When I execute the first code, I get my jsTree and it collapses and expands. When I execute the second one, the area where the jsTree is says "Loading..." and that is all. If I right-click that word, I DO get the menu.

Any suggestions?

if, when I point it to the function customMenu, I add the (), then I get a really strange menu that has: -create -rename -delete -edit --cut --copy --paste --Add Group --delete

I'm not sure I know what's going on. I changed the function name to something different to be sure I wasn't getting a jQuery or jsTree function, but I still get the strange behavior. Any suggestions?

try here :) http://stackoverflow.com/questions/4559543/configuring-jstree-right-click-contextmenu-for-different-node-types/11067303#11067303 — Jean G.T, Jun 16 '12 at 23:17

score 2 · Answer 1 · answered Sep 20 '11 at 15:06

it would be suggested not to handle the contextmenu creation yourself, but rather let jstree do that for you.

so in the initialization code you would write:

$("#demo1").jstree(
{ 
    "plugins" : [ "contextmenu" ]
}

and that would be sufficient to have a functional contextmenu.

score 1 · Answer 2 · answered Jun 06 '13 at 14:12

dont bind the on select method to jstree. Instead create your new menu items as in the code below. This should work fine.

$("#demo1").jstree(
{ 
     "contextmenu":{
         items:{
              "LogicalNameForMenuItem":{
                     label: "DisplayNameForMenuItem",
                     action: function (node) {
                          <--Your code to handle the function goes here-->
                     } 
               }
          }
      },

      "plugins" : [ "contextmenu","crrm","ui" ]

});

This should work.

And if you want to remove the default menu items then set them to false

"contextmenu":{
         items:{
            create:false,
            remove:false,
            ccp:false
         }
}

jsTree contextmenu issue

2 Answers2