Radtooltip on RadContextMenu (RadMenuItem)

[Steeve]

Hi,

I want to add a tooltip on a RadContextMenu.  This ContextMenu is displayed in a RadGrid, when we click on the red "X" (see photo in attachment).

I try this, but the tooltip is not displayed with the RadContextMenu (see code below).

I'm using the version 2013.3.1217.40
The RadGrid is in a userControl

Thank you

Steeve

<script type="text/javascript">
        function showDetachMenuAt(e, marktPhotoNo) {
            var contextMenu = $find("<%= RadContextMenuRemove.ClientID %>"),
                x = e.clientX,
                y = e.clientY;

            var pos = getPos($('.chk-remove-class-' + marktPhotoNo).get(0));
            x = pos[0];
            y = pos[1];

            if (isNaN(x) || isNaN(y)) {
                return;
            }

            $telerik.cancelRawEvent(e);

            contextMenu.showAt(x + 10, y);
        }


        function OnClientMouseOver(sender, args) {
            var item = args.get_item();
            var itemValue = item.get_value();

            if (itemValue == "remove-detach") {
                var tooltip = $find("<%= RadToolTip2.ClientID%>");
                tooltip.set_text("<%=Resources.Photo.MsgDetachPhotoTooltip %>");

                tooltip.show();
            }
        }
</script>

<telerik:RadCodeBlock ID="radCodeBlock1" runat="server">

<telerik:RadContextMenu ID="RadContextMenuRemove" runat="server" Skin="WebBlue" EnableRoundedCorners="true" EnableShadows="true"
OnClientItemClicked="onRemoveMenuClicked" OnClientMouseOver="OnClientMouseOver">
        <Items>
            <telerik:RadMenuItem Text="<%$Resources:Photo,DetachPhoto %>" Value="remove-detach" />
            <telerik:RadMenuItem Text="<%$Resources:Photo,DeletePhoto %>"  Value="remove-delete "/>
        </Items>
    </telerik:RadContextMenu>

<telerik:RadToolTip ID="RadToolTip2" runat="server" BackColor="LightYellow" EnableShadow="false" RelativeTo="Mouse" TargetControlID="RadContextMenuRemove" Width="300px" Position="BottomCenter" ShowDelay="0" AutoCloseDelay="3000">
    </telerik:RadToolTip>
</telerik:RadCodeBlock>

...

<!-- In RadGrid -->
<ItemTemplate>
...
<asp:Panel runat="server" ID="PanelInfo" runat="server" CssClass="divInfo">
    <asp:Image runat="server" ID="ImageDetach" CssClass="toolbar-item detach-photo-item" title="" ImageUrl="~/Images/004_12x12.png" Width="9" Height="9"/>
</asp:Panel>
...
</ItemTemplate>

// In Code behind
private void UcRadGridOnUcRadGridItemCreated(UcRadGrid sender, GridItemEventArgs e)
{
    Control panelPhoto = item.FindControl("PanelPhoto");
    if (panelPhoto != null)
    {
        Image imageDetach = panelPhoto.FindControl("ImageDetach") as Image;
        if (imageDetach != null)
        {
            imageDetach.Attributes["onclick"] = "showDetachMenuAt(event, " + photoInfoFs.MarktPhotoNo + ");";
        }
    }
}

[Princy]

Hi Steeve,

Please try the following sample code snippet which works fine at my end.

ASPX:

<telerik:RadContextMenu ID="RadContextMenuRemove" runat="server" Skin="WebBlue" EnableRoundedCorners="true" EnableShadows="true" OnClientMouseOver="OnClientMouseOver">
    <Items>
        <telerik:RadMenuItem Text="Detach" Value="remove-detach" />
        <telerik:RadMenuItem Text="Delete" Value="remove-delete " />
    </Items>
</telerik:RadContextMenu>
<telerik:RadToolTip ID="RadToolTip2" runat="server" BackColor="LightYellow" EnableShadow="false"
    RelativeTo="Mouse" TargetControlID="RadContextMenuRemove" Width="300px"                        Position="BottomCenter" ShowDelay="0" AutoCloseDelay="3000">
</telerik:RadToolTip>
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" DataSourceID="SqlDataSource1">
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn>
                <ItemTemplate>
                    <asp:Panel runat="server" ID="PanelInfo">
                        <asp:Image runat="server" ID="ImageDetach" ImageUrl="~/Images/BlackPlus.png" Width="9" Height="9" onclick='showDetachMenuAt(event);' />
                    </asp:Panel>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

JavaScript:

<script type="text/javascript">
    function showDetachMenuAt(e) {
        var contextMenu = $find("<%= RadContextMenuRemove.ClientID %>"),
                x = e.clientX,
                y = e.clientY;
        if (isNaN(x) || isNaN(y)) {
            return;
        }
        $telerik.cancelRawEvent(e);
        contextMenu.showAt(x + 10, y);
    }
    function OnClientMouseOver(sender, args) {
        var item = args.get_item();
        var itemValue = item.get_value();
        if (itemValue == "remove-detach") {
            var tooltip = $find("<%= RadToolTip2.ClientID%>");
            tooltip.set_text("Demo");
            tooltip.show();
        }
    }
</script>

Thanks,
Princy.

[Steeve]

Hi Princy,

The only thing that I have changed is to change the target control and put the "tooltip.show()" in a timeout.

Thanks for your help!!!

Steeve

function OnClientMouseOver(sender, args) {
    var item = args.get_item();
    var itemValue = item.get_value();

    if (itemValue == "remove-detach") {
        var tooltip = $find("<%= RadToolTip2.ClientID%>");
        var marktPhotoNo = GetCustomId();
        var newTarget = $('.chk-remove-class-' + marktPhotoNo).get(0);

        tooltip.set_targetControl(newTarget);
        tooltip.set_text("This is a test.");

        setTimeout(function () {
            tooltip.show();
        }, 10);
    }
}