How to manage the contextmenu of jsTree as per the file and folder

contextmenujstree

I have stuck to manage the contextmenu after the right click . Actually I need to display some item of contextmenu for folder and some item of contextmenu for folder.

On click of folder context menu will look like :

create

remove

rename

new

On click of file context menu will look like :

create

remove

rename

Is there any way to manage this menu after click . I have look into documentation and other blog , but not getting useful content .

Can you please guide me some thing so that I can implement like that .

Thanks in advance

Best Answer

Hello ,

Thanks for take a look, but I got the way to make it Please take a look on below :

$('#detail_dir_container').jstree({
      "json_data" : {
        "ajax" : { 
          "url" : ''
        }
      },
      "contextmenu" : {
              "items": function(node){
                    if(node.attr('type') == 'file' )
                    {
                      return {
                        create : true,
                        rename : true,
                        remove : true
                     }
                  }
                  else
                  {
                    return {
                      create : true,
                      rename : true,
                      remove : true,
                      new    : true,
                    }
                  }
        }
    });



Thanks

Related Solutions

Jquery – Configuring jstree right-click contextmenu for different node types

The contextmenu plugin already has support for this. From the documentation you linked to:

items: Expects an object or a function, which should return an object. If a function is used it fired in the tree's context and receives one argument - the node that was right clicked.

So rather than give contextmenu a hard-coded object to work with, you can supply the following function. It checks the element that was clicked for a class named "folder", and removes the "delete" menu item by deleting it from the object:

function customMenu(node) {
    // The default set of all items
    var items = {
        renameItem: { // The "rename" menu item
            label: "Rename",
            action: function () {...}
        },
        deleteItem: { // The "delete" menu item
            label: "Delete",
            action: function () {...}
        }
    };

    if ($(node).hasClass("folder")) {
        // Delete the "delete" menu item
        delete items.deleteItem;
    }

    return items;
}

Note that the above will hide the delete option completely, but the plugin also allows you to show an item while disabling its behaviour, by adding _disabled: true to the relevant item. In this case you can use items.deleteItem._disabled = true within the if statement instead.

Should be obvious, but remember to initialise the plugin with the customMenu function instead of what you had previously:

$("#tree").jstree({plugins: ["contextmenu"], contextmenu: {items: customMenu}});
//                                                                    ^
// ___________________________________________________________________|

Edit: If you don't want the menu to be recreated on every right-click, you can put the logic in the action handler for the delete menu item itself.

"label": "Delete",
"action": function (obj) {
    if ($(this._get_node(obj)).hasClass("folder") return; // cancel action
}

Edit again: After looking at the jsTree source code, it looks like the contextmenu is being re-created every time it is shown anyway (see the show() and parse() functions), so I don't see a problem with my first solution.

However, I do like the notation you are suggesting, with a function as the value for _disabled. A potential path to explore is to wrap their parse() function with your own one that evaluates the function at disabled: function () {...} and stores the result in _disabled, before calling the original parse().

It won't be difficult either to modify their source code directly. Line 2867 of version 1.0-rc1 is the relevant one:

str += "<li class='" + (val._class || "") + (val._disabled ? " jstree-contextmenu-disabled " : "") + "'><ins ";

You can simply add a line before this one that checks $.isFunction(val._disabled), and if so, val._disabled = val._disabled(). Then submit it to the creators as a patch :)

Jquery – jstree contextmenu create file/folder function

solved it ;) the code to specify the type of node to create is:

this.create(obj, "last", {"attr" : {"rel" : "default"}});

so now the code for the contextmenu plugin looks like this:

        "contextmenu" : {
        items : { // Could be a function that should return an object like this one
            "create" : {
                "separator_before"  : false,
                "separator_after"   : true,
                "label"             : "Create",
                "action"            : false,
                "submenu" :{
                    "create_file" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "File",
                        action : function (obj) {
                            this.create(obj, "last", {"attr" : {"rel" : "default"}});
                        }
                    },
                    "create_folder" : {
                        "seperator_before" : false,
                        "seperator_after" : false,
                        "label" : "Folder",
                        action : function (obj) {                               
                            this.create(obj, "last", {"attr" : { "rel" : "folder"}});
                        }
                    }
                }
            }
        }
    },

For any noobs - if you look at the code posted in the posted question you should be able to see where this goes.

Best Answer

Related Solutions

Jquery – Configuring jstree right-click contextmenu for different node types

Jquery – jstree contextmenu create file/folder function

Related Topic