Creating custom contextmenu (overriding)

[Kasim]

Hi,

I am new to jstree and fairly new to jQuery, so please go easy..

I am trying to understand how the events and methods work on the tree instance and for that I have been trying to create a custome context menu with rename and delete.

But somehow I cant figure out how this will be done.

Below is my code:

 

function customMenu(node) {

  var tree = $("#jstree").jstree(true);
   
         var items = {
             renameItem: {
                label             : "Rename",
                action            : function (obj) { //do something },
                _disabled         : true,    
                 icon             : "fa fa-camera-retro",
 
             },
       
            deleteItem: {
                label             : "Delete",
                action            : function (obj) {
                                    tree.delete_node(node);
                                    },
                icon              : "fa fa-trash-o"
           
              }
          };

          return items;
   }
 
$(document).ready(function() {
 
 $(function () {
 
      $('#jstree').jstree({
     
       
 
    "checkbox" : {
 "three_state" : true,
 "whole_node" : true
 },
 
 "contextmenu" : {
 "select_node" : true,
 "show_at_node" : false,
 "items" : customMenu
 },
 
 "plugins" : [ "checkbox", "contextmenu"]
 
 });
 
 
      //event triggered when node is deleted
      $('#jstree').on("delete_node.jstree", function (e, data) {
        console.log(data.selected);
      });

});

 Can someone please help me what code should go in the action part of the 'delete' contextMenu item? 

[Ivan Bozhanov]

Taken from jstree.contextmenu.js:
                    "action"            : function (data) {
                        var inst = $.jstree.reference(data.reference),
                            obj = inst.get_node(data.reference);
                        if(inst.is_selected(obj)) {
                            inst.delete_node(inst.get_selected());
                        }
                        else {
                            inst.delete_node(obj);
                        }
                    }

No need to create closures (as you are doing) - in the example above you can see how to obtain the tree reference.

[Kasim]

Thanks, but when I click on the 'delete' contextmenu option, nothing happens. Am I missing something?

[Ivan Bozhanov]

As said in the docs - by default all changes to the structure are prevented. Set core.check_callback to true in your config to enable all changes.

Best regards,
Ivan

[Kasim]

Thanks for your help! I missed out core.check_callback and now it's working like a charm!