Hi,
I am implementing RadTreeview Context menu. It working fine when user right click on it.. but I wanted to display the context menu when user leftclick on it..
Can you please provide some code related to displaying contextmenu when user leftclick on the RadTreeview..?
I am implementing RadTreeview Context menu. It working fine when user right click on it.. but I wanted to display the context menu when user leftclick on it..
Can you please provide some code related to displaying contextmenu when user leftclick on the RadTreeview..?
7 Answers, 1 is accepted
0

Shinu
Top achievements
Rank 2
answered on 17 Jun 2011, 09:53 AM
Hello Venkat,
You can achieve this by calling the the show method explicitly OnClientNodeClicking event. Here is the code that I tried.
Javascript:
Thanks,
Shinu.
You can achieve this by calling the the show method explicitly OnClientNodeClicking event. Here is the code that I tried.
Javascript:
function
OnClientNodeClicking(sender, args)
{
var
e=args.get_domEvent();
var
menu = $find(
"<%=menu1.ClientID %>"
);
if
((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))
{
menu.show(e);
}
$telerik.cancelRawEvent(e);
}
Thanks,
Shinu.
0

Venkat
Top achievements
Rank 1
answered on 17 Jun 2011, 11:22 AM
HI Shinu,
Thanks for the Reply,
the code doesn't work for me Shinu....Eventhough After put ur code...Right Click is working fine...but left click....Below mentioned my script sunctions for the RadTreeview
Plz help me out......
function onClientContextMenuShowing(sender, args) {
var treeNode = args.get_node();
treeNode.set_selected(true);
//enable/disable menu items
setMenuItemsState(args.get_menu().get_items(), treeNode);
}
function onClientContextMenuItemClicking(sender, args) {
var menuItem = args.get_menuItem();
var treeNode = args.get_node();
menuItem.get_menu().hide();
switch (menuItem.get_value()) {
case "Create":
break;
case "View":
//treeNode.startEdit();
break;
case "Edit":
break;
case "Delete":
break;
case "Search":
// var result = confirm("Are you sure you want to delete the item: " + treeNode.get_text());
// args.set_cancel(!result);
break;
}
}
//this method disables the appropriate context menu items
function setMenuItemsState(menuItems, treeNode) {
for (var i = 0; i < menuItems.get_count(); i++) {
var menuItem = menuItems.getItem(i);
switch (menuItem.get_value()) {
case "Create":
formatMenuItem(menuItem, treeNode, 'Create'); // "{0}"
break;
case "View":
formatMenuItem(menuItem, treeNode, 'View');
break;
case "Edit":
formatMenuItem(menuItem, treeNode, 'Edit');
break;
case "Delete":
formatMenuItem(menuItem, treeNode, 'Delete');
// if (treeNode.get_parent() == treeNode.get_treeView()) {
// menuItem.set_enabled(false);
// }
// else {
// menuItem.set_enabled(true);
// }
break;
case "Search":
formatMenuItem(menuItem, treeNode, 'Search');
// var enabled = hasNodeMails(treeNode);
// menuItem.set_enabled(enabled != null);
break;
}
}
}
//formats the Text of the menu item
function formatMenuItem(menuItem, treeNode, formatString) {
var nodeValue = treeNode.get_value();
if (nodeValue && nodeValue.indexOf("") == 0) {
menuItem.set_enabled(false);
}
else {
menuItem.set_enabled(true);
}
var newText = String.format(formatString, extractTitleWithoutMails(treeNode));
menuItem.set_text(newText);
}
//checks if the text contains (digit)
function hasNodeMails(treeNode) {
return treeNode.get_text().match(/\([\d]+\)/ig);
}
//removes the brackets with the numbers,e.g. Inbox (30)
function extractTitleWithoutMails(treeNode) {
return treeNode.get_text().replace(/\s*\([\d]+\)\s*/ig, "");
}
function OnClientNodeClicking(sender, e) {
var e = args.get_domEvent();
var menu = $find("<%=RadTreeViewContextMenu1.ClientID %>");
if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {
menu.show(e);
}
$telerik.cancelRawEvent(e);
}
Thanks for the Reply,
the code doesn't work for me Shinu....Eventhough After put ur code...Right Click is working fine...but left click....Below mentioned my script sunctions for the RadTreeview
Plz help me out......
function onClientContextMenuShowing(sender, args) {
var treeNode = args.get_node();
treeNode.set_selected(true);
//enable/disable menu items
setMenuItemsState(args.get_menu().get_items(), treeNode);
}
function onClientContextMenuItemClicking(sender, args) {
var menuItem = args.get_menuItem();
var treeNode = args.get_node();
menuItem.get_menu().hide();
switch (menuItem.get_value()) {
case "Create":
break;
case "View":
//treeNode.startEdit();
break;
case "Edit":
break;
case "Delete":
break;
case "Search":
// var result = confirm("Are you sure you want to delete the item: " + treeNode.get_text());
// args.set_cancel(!result);
break;
}
}
//this method disables the appropriate context menu items
function setMenuItemsState(menuItems, treeNode) {
for (var i = 0; i < menuItems.get_count(); i++) {
var menuItem = menuItems.getItem(i);
switch (menuItem.get_value()) {
case "Create":
formatMenuItem(menuItem, treeNode, 'Create'); // "{0}"
break;
case "View":
formatMenuItem(menuItem, treeNode, 'View');
break;
case "Edit":
formatMenuItem(menuItem, treeNode, 'Edit');
break;
case "Delete":
formatMenuItem(menuItem, treeNode, 'Delete');
// if (treeNode.get_parent() == treeNode.get_treeView()) {
// menuItem.set_enabled(false);
// }
// else {
// menuItem.set_enabled(true);
// }
break;
case "Search":
formatMenuItem(menuItem, treeNode, 'Search');
// var enabled = hasNodeMails(treeNode);
// menuItem.set_enabled(enabled != null);
break;
}
}
}
//formats the Text of the menu item
function formatMenuItem(menuItem, treeNode, formatString) {
var nodeValue = treeNode.get_value();
if (nodeValue && nodeValue.indexOf("") == 0) {
menuItem.set_enabled(false);
}
else {
menuItem.set_enabled(true);
}
var newText = String.format(formatString, extractTitleWithoutMails(treeNode));
menuItem.set_text(newText);
}
//checks if the text contains (digit)
function hasNodeMails(treeNode) {
return treeNode.get_text().match(/\([\d]+\)/ig);
}
//removes the brackets with the numbers,e.g. Inbox (30)
function extractTitleWithoutMails(treeNode) {
return treeNode.get_text().replace(/\s*\([\d]+\)\s*/ig, "");
}
function OnClientNodeClicking(sender, e) {
var e = args.get_domEvent();
var menu = $find("<%=RadTreeViewContextMenu1.ClientID %>");
if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {
menu.show(e);
}
$telerik.cancelRawEvent(e);
}
0

Venkat
Top achievements
Rank 1
answered on 17 Jun 2011, 02:14 PM
Hi Shinu,
Can you please send sample code project which is related to "Opening Contextmenu when user left click on the node" or send me URL of the page....
Regards,
Venkat....
Can you please send sample code project which is related to "Opening Contextmenu when user left click on the node" or send me URL of the page....
Regards,
Venkat....
0
Hi Venkat,
I have prepared a sample for you:
- markup declaration of the TreeView and its internal ContextMenu:
- JavaScript event handlers:
Regards,
Nikolay Tsenkov
the Telerik team
I have prepared a sample for you:
- markup declaration of the TreeView and its internal ContextMenu:
<
telerik:RadTreeView
runat
=
"server"
ID
=
"RadTreeView1"
OnClientContextMenuShowing
=
"onContextMenuShowing"
OnClientNodeClicking
=
"onNodeClicking"
>
<
ContextMenus
>
<
telerik:RadTreeViewContextMenu
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"ContextMenuItem1"
/>
</
Items
>
</
telerik:RadTreeViewContextMenu
>
</
ContextMenus
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"RadTreeNode1"
/>
</
Nodes
>
</
telerik:RadTreeView
>
function
onContextMenuShowing(sender, args) {
var
domEvent = args.get_domEvent();
if
(domEvent.type ===
"contextmenu"
) {
$telerik.cancelRawEvent(domEvent);
args.set_cancel(
true
);
}
}
function
onNodeClicking(sender, args) {
var
domEvent = args.get_domEvent();
var
menu = sender.get_contextMenus()[0];
args.set_cancel(
true
);
menu.show(domEvent);
}
Regards,
Nikolay Tsenkov
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0

James
Top achievements
Rank 1
answered on 06 Nov 2012, 09:56 AM
This will only work if the context menu is the same for each node level. Also if there is changeable text within the context menu such as: "edit [ node name]", "add [ node name]" the text will not change to the node name and will stay as "[ node name ]" Im guessing in the majority of cases people will have a different context menu for each level of their treeview. Is there a fix for this?
0
Hello James,
You can try opening the context menu as in the code below:
Hope this will be helpful.
Regards,
Plamen
the Telerik team
You can try opening the context menu as in the code below:
function
onNodeClicking(sender, args) {
var
domEvent = args.get_domEvent(),
node = args.get_node(),
menu = node.get_contextMenu();
sender.showNodeContextMenu(node, domEvent);
args.set_cancel(
true
);
}
Hope this will be helpful.
Regards,
Plamen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

James
Top achievements
Rank 1
answered on 06 Nov 2012, 10:53 AM
Brilliant code!