Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Menu / Popup Menu

Landscape Hover this image to display the popup menu
Landscape Left-click this image to display the popup menu
Display the popup menu at specific coordinates

Note: To run in Opera Browser RadContextMenu needs right-clicks allowed. This is done by using "Tools -> Preferences -> Advanced -> JavaScript options -> Allow script to receive right clicks". In addition, because of browser limitations, on right-click both RadContextMenu and the standard browser context menu are displayed. A workaround to the latter is using the ESC key to hide the default browser context menu.


  • The purpose of this example is to demostrate how flexibly the context menu can be used.

    The example above shows how to show the context menu upon mouseover and mouseclick on different HTML DOM elements. In addition, the context menu uses custom coordinates to display at a specific position.

    You should use the showAt method of the context menu client-side object to show the menu at a pre-defined position, like: 

        var contextMenu = $find("<%= RadContextMenu1.ClientID %>");
    var x = parseInt($get("contextX").value);
    var y = parseInt($get("contextY").value);
    contextMenu.showAt(x, y);

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Menu.PopupMenu.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:headtag id="Headtag1" runat="server"/>
        
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
            <telerik:RadScriptManager ID="ScriptManager1" runat="server"></telerik:RadScriptManager>
            <qsf:header id="Header1" runat="server" NavigationLanguage="C#"/>
            
            <div id="qsfexWrapper">
                <Telerik:RadContextMenu id="RadContextMenu1" runat="server"
             EnableRoundedCorners="true" EnableShadows="true">
                    <Items>
                        <Telerik:RadMenuItem Text="Trees" />
                        <Telerik:RadMenuItem Text="Sunset" />
                        <Telerik:RadMenuItem Text="Mountains" />
                    </Items>
                </Telerik:RadContextMenu>
                
                <fieldset id="qsfexLeftImage">
                    <img src="Images/landscape.gif" onmouseover="showMenu(event)" alt="Landscape" width="207" height="139" />
                    <span class="legend">Hover this image to display the popup menu</span>
                </fieldset>
                <fieldset id="qsfexRightImage">
                    <img src="Images/landscape.gif" onclick="showMenu(event)" alt="Landscape" width="207" height="139" />
                    <span class="legend">Left-click this image to display the popup menu</span>
                </fieldset>
                
                <fieldset id="qsfexSpecificCoordinates">
                    <legend>Display the popup menu at specific coordinates</legend>
                    <dl>
                        <dt><label for="contextX">X:</label></dt>
                        <dd><input type="text" id="contextX" value="100" /></dd>
                        <dt><label for="contextY">Y:</label></dt>
                        <dd><input type="text" id="contextY" value="100" /></dd>
                        <dt></dt>
                        <dd><input type="button" class="qsfexButton" onclick="showMenuAt(event)" value="show at" /></dd>
                    </dl>
                </fieldset>
                
                <p class="qsfexNote">
                    <strong>Note:</strong> To run in Opera Browser <strong>RadContextMenu</strong>
                    needs right-clicks allowed. This is done by using <em>"Tools -> Preferences -> Advanced -> JavaScript
                    options -> Allow script to receive right clicks"</em>. In addition, because of browser limitations,
                    on right-click both <strong>RadContextMenu</strong> and the standard browser context menu are
                    displayed. A workaround to the latter is using the ESC key to hide the default browser context menu.
                </p>
            </div>
            
            <qsf:footer id="Footer1" runat="server"/>
        </form>
        
        <script type="text/javascript">
        //<![CDATA[
            function showMenuAt(e)
            {
                var contextMenu = $find("<%= RadContextMenu1.ClientID %>");
                var x = parseInt($get("contextX").value);
                var y = parseInt($get("contextY").value);
                
                if (isNaN(x) || isNaN(y))
                {
                    alert ("Please provide valid integer coordinates");
                    return;
                }

                contextMenu.showAt(x, y);

                $telerik.cancelRawEvent(e);
            }

            function showMenu(e)
            {
                var contextMenu = $find("<%= RadContextMenu1.ClientID %>");
                
                if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))
                {
                    contextMenu.show(e);
                }
                
                $telerik.cancelRawEvent(e);
            }
        //]]>
        </script>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451