How to add custom menu items to context menu

3,926 views
Skip to first unread message

Jayashree

unread,
Jun 2, 2010, 1:52:03 AM6/2/10
to jsTree
Hello,

1) I want to add my own custom menu to context menu i.e. Create root.
I tried this: It gives "undefined" as menu text in context menu but
works (displays editable text box at root to create root level node).
Can you please tell me what's wrong?
2) Context menu width is also very big (entire page), how to make it
precise to menu item text?

$("#divJsTreeDemo").jstree({
json_data: {
async: false,
ajax: {
async: false,
url: '<%= Url.Action("GetLocationPopupData") %>',
dataType: "json",
type: 'GET'
},
"progressive_render": true
},
ui: {
select_limit: 1
},
contextmenu: {
items: {
rename: false,
remove: false,
ccp: false,
create: {
label: "Create Child",
action: function (obj)
{ this.create(obj); },
seperator_after : false,
seperator_before : false
},
create_root: {
lable: "Create root",
action: function (obj) { $
("#divJsTreeDemo").jstree("create", -1); },
seperator_after: false,
seperator_before: false
}
} // end items
},
plugins: ["themes", "json_data", "ui", "types", "crrm",
"contextmenu"]
});

Regards,
Jayashree

Ivan Bozhanov

unread,
Jun 2, 2010, 2:44:26 AM6/2/10
to jstree
Hi,

Just use label instead of lable :)
As fr the width - what browser is this happening in - can you send me
a copy of the files, or point me to an online demo?

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.
>
>

Jayashree

unread,
Jun 2, 2010, 4:45:38 AM6/2/10
to jsTree
Oops, such a silly mistake. I am using IE7. I don't know if you can
hit this URL:

http://localhost:2966/Admin/Home/Test

How do I send you the file or screenshot?

Jayashree
> > For more options, visit this group athttp://groups.google.com/group/jstree?hl=en.- Hide quoted text -
>
> - Show quoted text -

Ivan Bozhanov

unread,
Jun 2, 2010, 4:58:56 AM6/2/10
to jstree
Hi, I cannot see the address (its localhost - meaning your computer),
but I have reproduced the bug and I am removing it now. I will write
again when it is ready.
Cheers,
Ivan

Ivan Bozhanov

unread,
Jun 2, 2010, 5:28:35 AM6/2/10
to jstree
Hi,

I just fixed the issue - I will commit in a few minutes.

Cheers,
Ivan

Jayashree

unread,
Jun 2, 2010, 6:02:55 AM6/2/10
to jsTree
Thanks Ivan.
I have one more question about configuration for context menu. Does
the code create menu items as per sequence given in configuration? I
have this:

contextmenu: {
items: {
ccp: false,
create: {
label: "Create Child Location",
......
},
create_root: {
label: "Create Root Location",
.....
},
rename: {
label: "Rename Location",
action: function (obj) { this.rename(obj); },
seperator_after: false,
seperator_before: true
},
remove: {
label: "Delete Location",
action: function (obj) { this.remove(obj); },
seperator_after: false,
seperator_before: false
}

} // end items
},

I thought I will see create lcacations separated by separator and then
Rename, Delete. But what is see is:
Create Child Location, Seperator, Rename Location, Delete Location,
Create Root Location


Regardsd,
Jayashree


On Jun 2, 2:28 pm, Ivan Bozhanov <ivan.bozha...@gmail.com> wrote:
> Hi,
>
> I just fixed the issue - I will commit in a few minutes.
>
> Cheers,
> Ivan
>
>
>
> On Wed, Jun 2, 2010 at 11:58, Ivan Bozhanov <ivan.bozha...@gmail.com> wrote:
> > Hi, I cannot see the address (its localhost - meaning your computer),
> > but I have reproduced the bug and I am removing it now. I will write
> > again when it is ready.
> > Cheers,
> > Ivan
>
> >>> > For more options, visit this group athttp://groups.google.com/group/jstree?hl=en.-Hide quoted text -

Ivan Bozhanov

unread,
Jun 2, 2010, 6:53:47 AM6/2/10
to jstree
Hmmm :) very interesting ... it is because the defaults already have a
place ... Sorry about that, I can only recommend that you either not
use names that are already used (rename, remove) and set them to false
and use your own (myrename, myremove, or something else of course) OR
you can set items to a function:

items : function (node) { return { ... and the object here is the
same, you can lose the 'false' parts too ...} }

Cheers,
Ivan

Jayashree

unread,
Jun 2, 2010, 7:43:54 AM6/2/10
to jsTree
Thanks Ivan,

I encountered with one more issue when I put the code inside jquery
popup window. I initially thought context menu was not displayed. When
I closed the dialog, it was shown in background, still visible even if
popup window was closed. Some issue with z-order while displaying
context menu. Now it was still available even if no parent. If any
menu item is clicked, nothing happens. But next time when popup window
is displayed, it was throwing some java script errors in jquery.js
function
ready: function( fn ) {
....
fn.call( document, jQuery );
...
}

I guess, you can fix z-order problem :)
Is it possible to resolve second issue of orphan context menu? Then
subsequent java script error will automatically get resolved.

I hope I am not troubling you by adding more and more issue. I must
appreciate your prompt responses. Thank you so much for your help.

Regards,
Jayashree
> >> >>> > For more options, visit this group athttp://groups.google.com/group/jstree?hl=en.-Hidequoted text -

Ivan Bozhanov

unread,
Jun 2, 2010, 7:51:10 AM6/2/10
to jstree
Hi again,

Please - keep the reports coming - this is really helping me - this
way we all will get a better 1.0 final :)
As for the dialog problem - I guess the tree should be destroyed when
the dialog is closed - I believe that is causing the issue.
Try destroying it onclose.

Cheers,
Ivan

Jayashree

unread,
Jun 2, 2010, 8:05:35 AM6/2/10
to jsTree
I tried that. I have a function which gets called before dialog is
getting closed.
I tried putting:

if (jQuery.jstree._reference($('#divJsTreeDemo'))) {
jQuery.jstree._reference($
('#divJsTreeDemo')).destroy();
}

still it was showing the context menu window.

Jayashree
> >> >> >>> > For more options, visit this group athttp://groups.google.com/group/jstree?hl=en.-Hidequotedtext -

Ivan Bozhanov

unread,
Jun 2, 2010, 8:13:25 AM6/2/10
to jstree
Yes, I am fixing that right now :) Just a few minutes and I will commit :)

Cheers,
Ivan

Jayashree

unread,
Jun 3, 2010, 1:25:01 AM6/3/10
to jsTree
Yes, destroying tree is destoying the context menu as well. Thanks.

Z-order fix by felip is till missing in jquery.jstree.js for context
menu (.css({ "visibility" : "visible", "z-index" : "9999999" }))

Jayashree
> >> > To unsubscribe from this group, send email to- Hide quoted text -
>
> - Show quoted text -...
>
> read more »

Ivan Bozhanov

unread,
Jun 3, 2010, 3:42:57 AM6/3/10
to jstree
Hi, it is added in another place - the CSS - but I just found out I
skipped a zero - I will commit in a few minutes :)

Cheers,
Ivan

Reply all
Reply to author
Forward
0 new messages