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

Hide a Context Menu When the Mouse Moves Out

This topic shows how to hide a RadContextMenu when mouse moves away.

Let's have a square panel which is the target of the context menu - right clicking in the panel will show our menu. The goal is to hide the menu when the mouse moves out of the menu.

<asp:Panel Width="200px" Height="200px" BackColor="Aqua" runat="server" ID="pnl1">
<telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientShowing="OnClientShowingHandler"
        <telerik:RadMenuItem runat="server" Text="Cut">
        <telerik:RadMenuItem runat="server" Text="Copy">
        <telerik:RadMenuItem runat="server" Text="Paste">
        <telerik:ContextMenuControlTarget ControlID="pnl1" />

Here is the javascript handler of the OnClientMouseOut event:

function OnClientShowingHandler(sender, args) {
    var element = sender.get_contextMenuElement();
    var handler = function(e) {
    var relatedTarget = e.rawEvent.relatedTarget || e.rawEvent.toElement;
    if (!$telerik.isDescendantOrSelf(element, relatedTarget)) {
        $removeHandler(element, "mouseout", handler);
$addHandler(element, "mouseout", handler);}
In this article