New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Popup Menu

  • Realistic
  • Sepia Effect
  • Halftone Dots Effect
  • Poster Effect
Realistic
  • Demo Configurator

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 demonstrate 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);
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
       <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock2">
        <script type="text/javascript" src="scripts.js"></script>
        <script type="text/javascript">
            /* <![CDATA[ */
            Sys.Application.add_load(function () {
                demo.contextMenu = $find("<%= RadContextMenu1.ClientID %>");
                demo.editOffsetX = $find('<%= editOffsetX.ClientID %>');
                demo.editOffsetY = $find('<%= editOffsetY.ClientID %>');

                demo.load();
            });
            /* ]]> */
        </script>
    </telerik:RadScriptBlock>

    <div class="demo-container">
        <telerik:RadAjaxLoadingPanel runat="Server" ID="RadAjaxLoadingPanel1">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="imageElement" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="Configuratorpanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicked="OnClientItemClicked" OnClientShown="OnClientShown"
            EnableRoundedCorners="true" EnableShadows="true" CssClass="RadContextMenu1">
            <Items>
                <telerik:RadMenuItem Text="Realistic" Value="images/realistic.jpg" Selected="true" />
                <telerik:RadMenuItem Text="Sepia Effect" Value="images/sepia.jpg" />
                <telerik:RadMenuItem Text="Halftone Dots Effect" Value="images/dotes.jpg" />
                <telerik:RadMenuItem Text="Poster Effect" Value="images/poster.jpg" />
            </Items>
        </telerik:RadContextMenu>

        <img class="imageElement" src="images/realistic.jpg" alt="Realistic" width="415" height="300" />
    </div>


    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Demo Configurator">
        <Views>
            <qsf:View ID="View1" runat="server">
                <ul class="fb-group">
                    <li><span class="label">ACTION</span></li>
                    <li>            
                        <qsf:RadioButtonList ID="ActionsRadioButtonList1" runat="server" Orientation="Vertical" CssClass="actionsList">
                            <asp:ListItem Text="Left Click on the Image" Value="click"></asp:ListItem>
                            <asp:ListItem Text="Hover the Image" Value="mouseover"></asp:ListItem>
                            <asp:ListItem Text="Specific Coordinates" Value="SpecificCoordinates"></asp:ListItem>
                        </qsf:RadioButtonList>
                    </li>
                    <li style="display:none" class="SpecificCoordinates">
                        <qsf:NumericTextBox ID="editOffsetX" runat="server" CssClass="qsfexInput" Value="0" NumberFormat-DecimalDigits="0" Type="Number" Label="X - axis:" Size="Narrow"></qsf:NumericTextBox>
                        <qsf:NumericTextBox ID="editOffsetY" runat="server" CssClass="qsfexInput" Value="0" NumberFormat-DecimalDigits="0" Type="Number" Label="Y - axis:" Size="Narrow"></qsf:NumericTextBox>                     
                    </li>
                    <li style="display:none" class="SpecificCoordinates">
                        <qsf:Button ID="ShowContextMenuBtn" runat="server" AutoPostBack="false" Text="Show the Context Menu" OnClientClicked="OnClientClicked"></qsf:Button>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance