RadToolTip relativeto="Element" not working properly

3 posts, 0 answers
  1. Jay
    Jay avatar
    19 posts
    Member since:
    Dec 2011

    Posted 27 Mar 2012 Link to this post

    HI,

    recently we have upgraded RadControls

    for ASP.NET AJAX Q1 2010 to ASP.NET AJAX Q1 2012.

     


    i am trying

    to open Tooltip on a button click in RadToolBar in javascript. the Tooltip is showing relative to the element. the problem is when page is posted back and i try to open the tooltip it is not showing relative to element (RadToolBar) even though i am setting the targetcontrol on client side.

    need some help to resolve this issue.

    please find the code below

    Contentpage javascript:

     

    function

     

     

    OnToolbarClientButtonClicking(sender, args) {

     

     

     

    var button = args.get_item();

     

     

     

    var sCommandName = button.get_commandName();

     

     

     

    //alert(button.get_commandName());

     

     

     

     

     

     

     

     

    if (sCommandName == 'add') {

     

     

     

    var hidManage = '<%=hidManageId.ClientID %>'

     

     

     

     

     

    ShowToolTip(document.getElementById(hidManage).value);

    args.set_cancel(

     

    true);

     

    }

     

     

     

     

    }


    User Control:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SearchUploadContainer.ascx.cs"
        Inherits="AppWeb.ControlLibrary.SearchUploadContainer" %>
    <%@ Register Assembly="WebControlLib" Namespace="WebControlLib" TagPrefix="ccl" %>
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
    <link rel="stylesheet" type="text/css" href="../StyleSheet.css" />
    <ccl:WTToolTip runat="server" ID="wtToolTip" IsClientID="true" TargetControlID="ManageToolbar" AutoCloseDelay="0"
        ShowEvent="FromCode" HideEvent="FromCode" RelativeTo="Element" Position="MiddleRight"
        EnableTheming="true" Modal="true" Width="230px" Height="400px" OnClientShow="SetFocus" >
        <div class="contentBlock" style="width: 220px">
            <telerik:RadScriptBlock ID="rsb" runat="server">
    function ShowToolTip(manage, appttype, dtDate, slotId) {
                       
                        var tooltip = $find("<%=wtToolTip.ClientID%>");
                        var txt = $find("<%=txtContainer.ClientID%>");
                       

                        tooltip.set_targetControlID('');
                        tooltip.set_targetControlID(manage);

                      

                        if (appttype != null && appttype != undefined) {
                            document.getElementById("<%=hdnApptType.ClientID%>").value = appttype;
                        }

                        if (dtDate != null && dtDate != undefined) {
                            document.getElementById("<%=hdnDate.ClientID%>").value = dtDate;
                        }

                        if (slotId != null && slotId != undefined) {
                            document.getElementById("<%=hdnSlotSchedule_id.ClientID%>").value = slotId;
                        }

                        EnableDisableControls();
                       
                        //setTimeout(function () {
                            tooltip.show();
                        //}, 1000);

                        //tooltip.show();
                        SetFocus();

                    }
    </telerik:RadScriptBlock>
            <h2 class="contentBlockTop" style="text-align: left; width: 210px;">
                <ccl:WTLabel ID="lblContentTopText" runat="server" Width="210px"></ccl:WTLabel>
                <asp:HiddenField ID="hidManageId" runat="server" />
                <asp:HiddenField ID="hdnApptType" runat="server" />
                <asp:HiddenField ID="hdnDate" runat="server" />
                <asp:HiddenField ID="hdnSlotSchedule_id" runat="server" />
            </h2>
    </ccl:WTToolTip>

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 29 Mar 2012 Link to this post

    Hi Jay,

    Can you confirm you are actually using the RadControls as the assembly and tags you are using in the markup you pasted are not the from the Telerik.Web.UI.

    Nevertheless, assuming this is the RadToolTip - here is the list with modifications needed for this to run properly:
    1) make the HTML valid (there was an unclosed div)
    2) provide sufficient width for the tooltip (it must account for the callout and padding)
    3) show the tooltip with a timeout since you set the target on the client (as explained here)
    4) make sure the ClientID you pass is correct

    Here follows the code I use to make it work properly:
    the tooltip:
    <telerik:RadToolTip runat="server" ID="wtToolTip"
        AutoCloseDelay="0" ShowEvent="FromCode" HideEvent="FromCode" RelativeTo="Element"
        Position="MiddleRight" EnableTheming="true" Modal="true" Width="250px" Height="400px"
        OnClientShow="SetFocus">
         <div class="contentBlock" style="width: 220px">
        <h2 class="contentBlockTop" style="text-align: left; width: 210px;">
            <asp:Label ID="Label1" Text="some label" Width="210px" runat="server" />
            <%-- <ccl:WTLabel ID="lblContentTopText" runat="server" Width="210px"></ccl:WTLabel>--%>
            <asp:HiddenField ID="hidManageId" runat="server" />
            <asp:HiddenField ID="hdnApptType" runat="server" />
            <asp:HiddenField ID="hdnDate" runat="server" />
            <asp:HiddenField ID="hdnSlotSchedule_id" runat="server" />
        </h2>
           </div> 
        <asp:Button ID="Button1" Text="postback" runat="server" />
    </telerik:RadToolTip>

    The toolbar:
    <telerik:RadToolBar runat="server" ID="ManageToolbar" OnClientButtonClicking="OnToolbarClientButtonClicking">
        <Items>
            <telerik:RadToolBarButton runat="server" Text="Add" CommandName="add">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" Text="filler">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" Text="other filler">
            </telerik:RadToolBarButton>
        </Items>
    </telerik:RadToolBar>

    and the JavaScript:
    function ShowToolTip(manage, appttype, dtDate, slotId)
    {
        var tooltip = $find("<%=wtToolTip.ClientID%>");
        tooltip.set_targetControlID('');
        tooltip.set_targetControlID(manage);
        setTimeout(function ()
        {
            tooltip.show();
        }, 20);
        SetFocus();
    }
     
    function SetFocus(sender)
    {
          
    }
     
     
    function OnToolbarClientButtonClicking(sender, args)
    {
        var button = args.get_item();
        var sCommandName = button.get_commandName();
        if (sCommandName == 'add')
        {
            var hidManage = '<%=hidManageId.ClientID %>'
            ShowToolTip(sender.get_id()); //document.getElementById(hidManage).value);
            args.set_cancel(true);
        }
    }


    Greetings,
    Marin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jay
    Jay avatar
    19 posts
    Member since:
    Dec 2011

    Posted 30 Mar 2012 Link to this post

    Hi Martin,

    Thanks for your reply,

    We are using Radcontrols only. we have created a Server Controls library using Radcontrols thats why u see the tags as different.

    i solved the issue by using the settimeout function and tooltip's  updateLocation method in timeout function.

    Here is my Javascript code

    Thank you once again.
    function ShowToolTip(manage, appttype, dtDate, slotId) {
                          
                        var tooltip = $find("<%=wtToolTip.ClientID%>");
                        var txt = $find("<%=txtContainer.ClientID%>");
      
                        tooltip.set_targetControlID(manage);                    
                          
                        var hidManage = document.getElementById("<%=hidManageId.ClientID%>");
                        hidManage.value = manage;
      
                        if (appttype != null && appttype != undefined) {
                            document.getElementById("<%=hdnApptType.ClientID%>").value = appttype;
                        }
      
                        if (dtDate != null && dtDate != undefined) {
                            document.getElementById("<%=hdnDate.ClientID%>").value = dtDate;
                        }
      
                        if (slotId != null && slotId != undefined) {
                            document.getElementById("<%=hdnSlotSchedule_id.ClientID%>").value = slotId;
                        }
      
                        EnableDisableControls();
      
                        setTimeout(function () {
                            tooltip.show();
                            tooltip.updateLocation();
                        }, 1000);
      
                        SetFocus();
      
                    }

Back to Top