How to disable the item of context menu.

5,241 views
Skip to first unread message

Andre Scherbackov

unread,
Jun 16, 2010, 6:28:27 AM6/16/10
to jsTree
I know right way to set the visibility for each node by using this
function

...
"contextmenu" : {
"items" : function (node) {
return {
"paste" : false,
"paste_entry" : {
"label" : "My Label",
"action" : function (obj) {
this.paste(obj);
}
}
}
}
...

How to set "disable" class to this item (not hide, just disable).

Ivan Bozhanov

unread,
Jun 16, 2010, 8:53:47 AM6/16/10
to jstree
I guess I forgot to keep this functionality when creating 1.0 (it was
a from scratch rewrite).
I will enable it now by giving you the ability to specify a class for
the LI node (for example disabled) which you can style yourself (gray
text for example and no icon). That combined with a function that does
nothing will give you what you need I guess :)

I will commit as soon as I enable this.

Cheers,
Ivan

> --
> You received this message because you are subscribed to the Google Groups "jsTree" group.
> To post to this group, send email to jst...@googlegroups.com.
> To unsubscribe from this group, send email to jstree+un...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/jstree?hl=en.
>
>

Niyak

unread,
Jul 7, 2010, 11:17:41 AM7/7/10
to jsTree
Seems like a _disabled attribute has made it to the current version
but I am missing the option of entering a function for that.
What good is a menu entry that's always disabled?

And I would think, rules from "types" like disable_node:false should
have a visible effect in the context menu (or at least the ability to
add this).

ChrisR

unread,
Jul 7, 2010, 11:26:47 AM7/7/10
to jsTree
Hi,

I think, you should set function to entire 'items' property. This
function receives current right-clicked node, so you could enable/
disable/hidden particular menu items depending on node type/name/id,
etc., and/or your own conditions.
Look here: http://groups.google.com/group/jstree/browse_thread/thread/af10cadb45ba4bc9
for the structure of the function.

Best regards,
ChrisRaven

Niyak

unread,
Jul 7, 2010, 11:56:24 AM7/7/10
to jsTree
Right, I did read that in the docs but didn't really consider it,
though it's a possible solution.

It seems a little awkward to do, considering the ease of use in the
older version. And other functionality still accepts both boolean or
function, as well.

ChrisR

unread,
Jul 7, 2010, 12:29:00 PM7/7/10
to jsTree
Yes, it looks a little bit awkward at first glance, but when you are
making some complex menu it leads to easier to mantain and shorter
code. E.g. you don't have to put the same conditions in every item,
but make one condition and set all appriopriate items in it, another
condition - another items, etc.

And in simple cases, you could do something, like:

contextmenu: {
items: function (NODE, TREE_OBJ) {
return {
create: {
label: 'Create',
action: function() {/*...*/},
disabled: 'type1' == NODE.attr('rel')
//...
},
rename: {
label: 'Rename',
action: function() {/*...*/},
disabled: 'type12' == NODE.attr('rel')
//...
},
some_other_action: {
label: 'Some other action',
action: function() {/*...*/},
disabled: 'type3' == NODE.attr('rel')
//...
},
// etc.
}
}

And it will look almost like in 0.9.9. :)

Best regards,
ChrisRaven

ChrisR

unread,
Jul 7, 2010, 12:41:03 PM7/7/10
to jsTree
Of course, all 'disabled' properties, should be prefixed with
underscore (_), so they should look like: _disabled: 'type1' ==
NODE.attr('rel')

Niyak

unread,
Jul 8, 2010, 3:37:24 AM7/8/10
to jsTree
Ok, i am settling with it. I see an advantage when having menu entries
that depend on each other, so you only have to perform the check for
them once.

Now my menu broke because it seems the standard functionality gets
lost when you use a function to generate the menu. Not sure if that is
intended but i guess I'll be able to write my own delete, create and
rename functions. ;)

Anyway, thanks for the help and see you on my next issue while porting
from 0.9.9a to 1.0. :D

PS.: TREE_OBJ in the above example will be undefined, since only the
node is passed anymore.

ChrisR

unread,
Jul 8, 2010, 5:50:38 AM7/8/10
to jsTree
Hi,

Indeed, when you using a function, you will loose the standard
functionality, but it is not a problem, since everything is in the
source code of the tree, so you can set following actions:
for create: function (obj) { this.create(obj); }
for rename: function (obj) { this.rename(obj); }
for remove: function (obj) { this.remove(obj); }
And the same scheme goes to cut, copy, paste :)
I suppose that this is intended, because when you need simple menu,
you don't have to set everything on your own, and when you want
something more advanced, then you are using the function and don't
have to turn off standard items :)

And yes, the TREE_OBJ is undefined, because the function receives only
one argument - my bad ;)

Best regards,
ChrisRaven
Reply all
Reply to author
Forward
0 new messages