The RadContextMenu control represents a context menu or popup menu. It is similar to RadMenu, having the same properties, methods, and events. The difference is that RadContextMenu does not appear automatically when the Web page loads the way RadMenu does. Instead, it is launched by a client-side action. You can attach the context menu to one or more targets so that it is launched automatically as a context menu when the user right-clicks on a target, or you can display the menu as a popup by calling its show() or showAt() method from client-side code.
Attaching the context menu to targets
Add a <Targets> tag to the RadContextMenu declaration.
For each target, add a target tag between the <Targets> tag and is closing </Targets> tag. There are four types of target tags:
<telerik:ContextMenuControlTarget> identifies a target that is an ASP.NET control. This tag takes a single attribute, ControlID, which specifies the server-side ID of the target control.
<telerik:ContextMenuDocumentTarget> identifies the document element of the Web page as a target. That is, the context menu appears wherever the user right-clicks on the page. This tag uses no additional attributes.
<telerik:ContextMenuElementTarget> identifies a target that is an HTML element. This tag takes a single attribute, ElementID, which is the client-side ID of the target element.
<telerik:ContextMenuTagNameTarget> identifies as a target all HTML elements on the page with a specified tag name.This tag takes a single attribute, TagName, which is the tag name of the target elements.
The following example shows a context menu that is attached to all elements on the Web page:
<telerik:RadContextMenu ID="SetAsDesktop" runat="server" Skin="Vista" OnClientShowing="showingSetAsDesktop" OnClientItemClicked="setAsDesktopItemClicked"> <Targets> <telerik:ContextMenuTagNameTarget TagName="img" /> </Targets> <Items> <telerik:RadMenuItem Text="Set as desktop" Value="D" /> <telerik:RadMenuItem Text="Open in a new window" Value="W" /> </Items> </telerik:RadContextMenu>
For a live example of assigning targets to a context menu, see Context Menu.
Because RadContextMenu is launched by a client-side action, it has a few extra client-side events not present in RadMenu. These are
OnClientHiding, which occurs when the context menu is hiding after having been shown.
OnClientHidden, which occurs when the context menu is hidden after having been shown.
OnClientShowing, which occurs when the user right-clicks on a target but before the context menu is shown. An OnClientShowing event handler can block the context menu from showing.
OnClientShown, which occurs immediately after the context menu first appears.
Using RadContextMenu as a popup
To use RadContextMenu as a popup menu, simply omit the
The following example uses the show() method to display a context menu when the mouse hovers over an image by using the onmouseover event of the element:
For a live example of using RadContextMenu as a popup menu, see Popup menu.