RadTreeview ContextMenu When User LeftClick on it

8 posts, 0 answers
  1. Venkat
    Venkat avatar
    3 posts
    Member since:
    Apr 2011

    Posted 16 Jun 2011 Link to this post

    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..?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Jun 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Venkat
    Venkat avatar
    3 posts
    Member since:
    Apr 2011

    Posted 17 Jun 2011 Link to this post

    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);
            } 
  5. Venkat
    Venkat avatar
    3 posts
    Member since:
    Apr 2011

    Posted 17 Jun 2011 Link to this post

    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....
  6. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 21 Jun 2011 Link to this post

    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.

  7. James
    James avatar
    20 posts
    Member since:
    Jan 2012

    Posted 06 Nov 2012 Link to this post

    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?
  8. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 06 Nov 2012 Link to this post

    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.
  9. James
    James avatar
    20 posts
    Member since:
    Jan 2012

    Posted 06 Nov 2012 Link to this post

    Brilliant code! 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017