contextmenu-on-click.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Open context menu by clicking on a button	Example showing how to open RadContextMenu on Button Click.	how-to	Open a context menu on Button Click - RadContextMenu - Telerik UI For ASP.NET AJAX	contextmenu-on-click			1444244	kb

Environment

Product

RadContextMenu for ASP.NET AJAX

Description

Q: How to open ContextMenu on button click?

Solution

Demo screenshot:

Button and ContextMenu markup

<style>
    .menu-icon:before {
        content: "\e030"; /* Adds a glyph using the Unicode character number */
    }
</style>

<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" CssClass="k-i-menu" Text="Menu" OnClientClicked="OnClientClicked">
    <Icon PrimaryIconCssClass="menu-icon" />
</telerik:RadButton>

<telerik:RadContextMenu ID="RadContextMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem Text="Item 1"></telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item 2">
            <Items>
                <telerik:RadMenuItem Text="Item 1.1"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Item 2.1"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Item 3.1"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Item 3"></telerik:RadMenuItem>
    </Items>
</telerik:RadContextMenu>

Button's JavaScript click event handler

function OnClientClicked(sender, args) {
    var menu = $find('<%= RadContextMenu1.ClientID %>');

    var evt = args.get_domEvent();
    if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
        return;
    }

    menu.show(evt);

    evt.cancelBubble = true;
    evt.returnValue = false;

    if (evt.stopPropagation) {
        evt.stopPropagation();
        evt.preventDefault();
    }
}