CODEWITHSUNDEEP
jqueryjstree
Brian Beech
Brian Beech

Reputation: 1065

jsTree contextmenu issue

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?

Upvotes: 3

Views: 2345

Answers (2)

Teja
Teja

Reputation: 1254

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
         }
}

Upvotes: 1

Nir O.
Nir O.

Reputation: 1651

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.

Upvotes: 2

Related Questions