How to get metadata of JsTree items from contextmenu? - jstree

Question

In jstree , I can right click on a node and select an item from the context menu.
In the code below, I am trying to use the obj object to get the tree item. I can get that using $(obj) however this is just a HTML list item. How do I get metadata (foo) associated with that ?
$(element).jstree(
"data" : { "data" : {"title" : "An item"}, "metadata":{"foo" :"bar"}},
"plugins" : ["themes", "ui", "contextmenu"],
"contextmenu" : {
"items" : function($node) {
return {
"Menu1" : function(obj){
//my menu action
}
};
};
}
);

Answer 1

Here is how the metadata can be accessed.
obj.data().foo

Answer 2

I had the same issue, when trying to fetch the ID of a selected jsTree node.
It can be done, you just need to create your own function to populate the contextmenu, to fetch the relevant values from your JSON data:
jsTree Context Menu selected item?

Answer 3

In arguments of function contextmenu.items you have access of current item data. This dynamically invocable function, fired every time on new right click event on node, See example:
$('#post-tree').jstree({
core: {
data: treeData
},
plugins: ['contextmenu'],
contextmenu: {
items: function (item) {
return {
addPost: {
label: 'Add new Post',
action: function () {
console.log(item.original); // metadata object
}
},
addSubcategory: {
label: 'Add subcategory',
action: function () {
console.log('addSubcategory');
}
},
editCategory: {
label: 'Properties',
action: function () {
console.log('editCategory')
}
},
delete: {
label: 'Delete',
action: function () {
console.log('delete Category');
}
}
};
}
}
});