jsTree and Context Menu: modify items
I’m using jsTree 3.0.0 and I need to modify the context in one of the following ways:
- Change label language for the default items, disable some default items and add new items.
- Rewrite all items and bind to some new items the create, rename and delete function.
I tried several approaches but nothing worked. For example, this returns Uncaught TypeError: Object [object global] has no method 'create' when I click on create.
"contextmenu":{
"items": function($node) {
return {
createItem : {
"label" : "Create New Branch",
"action" : function(obj) { this.create(obj); alert(obj.text())},
"_class" : "class"
},
renameItem : {
"label" : "Rename Branch",
"action" : function(obj) { this.rename(obj);}
},
deleteItem : {
"label" : "Remove Branch",
"action" : function(obj) { this.remove(obj); }
}
};
}
},
If I try to add one item as in the next example, I loose the default menu items:
items : {
"create_folder" : {
"separator_before" : false,
"separator_after" : false,
"label" : "Create Folder",
"action" : function (obj) { alert(1); /* this is the tree, obj is the node */ }
}
}
Where am I wrong?
Resolved:
"contextmenu":{
"items": function($node) {
var tree = $("#tree").jstree(true);
return {
"Create": {
"separator_before": false,
"separator_after": false,
"label": "Create",
"action": function (obj) {
$node = tree.create_node($node);
tree.edit($node);
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.edit($node);
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.delete_node($node);
}
}
};
}
}
for jstree v3.+ (i test 3.2.1) this example work
"contextmenu":{
"items": function () {
return {
"Create": {
"label": "Create",
"action": function (data) {
var ref = $.jstree.reference(data.reference);
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
sel = ref.create_node(sel, {"type":"file"});
if(sel) {
ref.edit(sel);
}
}
},
"Rename": {
"label": "Rename",
"action": function (data) {
var inst = $.jstree.reference(data.reference);
obj = inst.get_node(data.reference);
inst.edit(obj);
}
},
"Delete": {
"label": "Delete",
"action": function (data) {
var ref = $.jstree.reference(data.reference),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
}
}
};
}
},
Updated code for last version
"contextmenu":{
"items": function($node) {
var tree = $("#tree").jstree(true);
return {
"Create": {
"separator_before": false,
"separator_after": false,
"label": "Create",
"action": function (obj) {
$node = tree.jstree('create_node', $node);
tree.jstree('edit', $node);
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.jstree('edit', $node);
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.jstree('delete_node', $node);
}
}
};
}
}
More readable example
var tree = $('#treeDiv').jstree({
"plugins": ["contextmenu"],
"contextmenu": {
"items": function ($node) {
return {
"create": {
"separator_before": false,
"separator_after": false,
"label": "Create",
"action": function (obj) {
// action code here
}
}
};
}
}
});
"contextmenu": {
"items": function ($node) {
var tree = $("#tree").jstree(true);
return {
"Create": {
"separator_before": false,
"separator_after": true,
"label": "Create",
"action": false,
"submenu": {
"File": {
"seperator_before": false,
"seperator_after": false,
"label": "File",
action: function (obj) {
$node = tree.create_node($node, {
text: 'New File',
type: 'file',
icon: 'glyphicon glyphicon-file'
});
tree.deselect_all();
tree.select_node($node);
}
},
"Folder": {
"seperator_before": false,
"seperator_after": false,
"label": "Folder",
action: function (obj) {
$node = tree.create_node($node, {
text: 'New Folder',
type: 'default'
});
tree.deselect_all();
tree.select_node($node);
}
}
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.edit($node);
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.delete_node($node);
}
}
}
}
}
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
