Radtooltip on RadContextMenu (RadMenuItem)

3 posts, 0 answers
  1. Steeve
    Steeve avatar
    17 posts
    Member since:
    Mar 2011

    Posted 17 Mar 2014 Link to this post

    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 + ");";
            }
        }
    }
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Mar 2014 in reply to Steeve Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steeve
    Steeve avatar
    17 posts
    Member since:
    Mar 2011

    Posted 18 Mar 2014 in reply to Princy Link to this post

    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);
        }
    }
Back to Top