This is a migrated thread and some comments may be shown as answers.

RadTreeview ContextMenu When User LeftClick on it

7 Answers 211 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Venkat
Top achievements
Rank 1
Venkat asked on 16 Jun 2011, 03:10 PM
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..?

7 Answers, 1 is accepted

Sort by
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:
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);
        } 
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....
0
Nikolay Tsenkov
Telerik team
answered on 21 Jun 2011, 12:06 PM
Hi Venkat,

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>
 - JavaScript event handlers:
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
Plamen
Telerik team
answered on 06 Nov 2012, 10:39 AM
Hello James,

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! 
Tags
TreeView
Asked by
Venkat
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Venkat
Top achievements
Rank 1
Nikolay Tsenkov
Telerik team
James
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or