New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
Open context menu by clicking on a button
Environment
Product | RadContextMenu for ASP.NET AJAX |
Description
Q: How to open ContextMenu on button click?
Solution
Demo screenshot:
Button and ContextMenu markup
ASP.NET
<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
javascript
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();
}
}