RadToolTip with Controls and RadAjaxManger not working

[Doug]

What am I doing wrong? 

1. I want user to hover over label

2. tool tip comes up

3. They pick 2 dates and click OK button

4. Label shows the 2 new dates

  

What's happening is

1. Can't get button to close the tooltip (I COULD do it in Javascript,
but then how do I also get it to execute the javascript to update the dates?
(server side code getting client-sided by the script manager)

2. The update works once ... but then the tool tip will NEVER show again ...
once I've changed the text of the label - I promise you, it will not show again. 

3. Just to test that I wasn't doing something wrong ...
I wrapped the label in a div (with runat="server" and an ID,) and made thatthe target control for the
tooltip - then it worked over and over again, but if the label itself is the target,
it will only work once. 

  

I'm a telerik newbie ... so liklely doing something wrong. 

  

aspx.vb code is followed by aspx code: 

THANKS IN AVANCE!!!

  

    Protected Sub Button1_Click1(sender As Object, e As EventArgs) Handles Button1.Click

        Dim f = from.SelectedDate.ToString("MM/dd/yyyy")

        Dim t = too.SelectedDate.ToString("MM/dd/yyyy")

        lblDates.Text = f & " " & t

    End Sub

  

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

        <Scripts>

            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">

            </asp:ScriptReference>

            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">

            </asp:ScriptReference>

            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">

            </asp:ScriptReference>

        </Scripts>

    </telerik:RadScriptManager>

    <telerik:RadAjaxManager ID="AjaxManager1" runat="server">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="Button1">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="lblDates" UpdatePanelCssClass="" />

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManager>

  

<asp:Label ID="lblDates" runat="server" Text="pre text"></asp:Label>

  

        <telerik:RadToolTip runat="server" ID="hello" TargetControlID="lbldates" RenderInPageRoot="True"

            HideEvent="FromCode" HideDelay="0" AnimationDuration="0" AutoCloseDelay="0"

            ShowDelay="0" RelativeTo="Mouse" Sticky="True" >

            from:

            <telerik:RadCalendar ID="from" runat="server" EnableMultiSelect="False">

            </telerik:RadCalendar>

            to:

            <telerik:RadCalendar ID="too" runat="server" EnableMultiSelect="False">

            </telerik:RadCalendar>

            <asp:Button ID="Button1" runat="server" Text="Button" />

        </telerik:RadToolTip>

  

</asp:Content>

[Marin Bratanov]

Hello,

The tooltip will not close because it is not disposed by the partial postback generated from the button. You can add client-side code to close the tooltip:

<asp:Button ID="Button1" OnClientClick="closeTtip();" runat="server" Text="Button" />

function closeTtip()
{
    var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
    if (activeTooltip) activeTooltip.hide();
}

The tooltip will not show again because the label is disposed with the partial postback but the tooltip is not, so the handlers it attached during the Sys.Application.Init phase are lost. You can avoid this in two ways:
- include the RadToolTip control in the partial postback by adding an UpdatedControl entry for it
- OR call a script that will re-attach its handlers:

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "someUniqueKey", "reAttachTtipHandlers();", True)

in the Button Click handler, and

function reAttachTtipHandlers()
{
    var ttip = $find("<%=hello.ClientID %>");
    if (ttip)
    {
        var targetId = ttip.get_targetControlID();//get the target ID
        ttip.set_targetControlID("");//remove the old target
        ttip.set_targetControlID(targetId);//set the target ID again
    }
}

the script that will re-set the target.

On why it was working in a div - the div is not updated with the AJAX request, only the label is, so the div is not disposed and the tooltip handlers are not lost.

You can also find attached the page that works fine for me as a reference to one of the possible approaches.

Regards,
Marin Bratanov
Telerik

[Doug]

Marin -

1. Solution for manually closing the tool tip after getting user input.

What was confusing me about that was that I needed .net code also - would the button fire both?

Answer: yes (you probably knew this) ... if I use the OnCLientClick property of the button on the tooltip to call the javascript
function to close the tooltip, then my .net code does still fires. When you set the OnClientClick property, 
1. First THAT client code fires.
2. If it doesn't return false, then the .net code (now javascript) fires. 

So is this the pattern I should use in the future when using tooltip as a popup input device? I'm sure people do this all the time.
Is this the most robust, proven pattern?

Also - you said that the reason the code would only fire once is that the partial postback destroyed and recreated the label, without 
hooking up the event. 

I'm going to play devil's advocate and say that is not so. (Hence I still can't explain the behavior). In taking the 'that isn't so' side of the
debate, I'm going to ask: 
1. OK, well then why when closed the tool tip via javascript, and did NOT use the div surrounding the label, hence the label became
the trigger for the event again ... why NOW does it work fine? 
2. But if the partial post-back disposed of the old label ... then why doesn't this occur all the time, everywhere in the univers? 
3. In other words ... what was I dioing differently in the first scenario that was 'wrong' ... for that matter - what was I doing differently AT ALL? 

Thanks! You guys always seem to very quick and concise at answering questions on this forum. 

I guess my final question is: 
OK, if I want to use a tooltip as a popup to get some input, and I want to take that input to populate a control on the main aspx page, then
is my pattern: 
1. Write the .net code for the control update, then use the AjaxManager to relate the controls, but MUST use explicit javascript function
and hence, use 'OnClientClick' to invoke the code that actually closes the tool tip. 

In other words, I CAN NOT include in the same .net code block: 
1. Do the update
2. Close the tooltip 
 

[Marin Bratanov]

Hello Doug,

I will attempt to answer all points:
- client and server-side events on the same button - yes, it can work, yes, returning false in the client-side handler (which runs first) will prevent the postback and thus the postback events from firing.
- is this the most robust approach - I cannot confirm this, there can be no universal answer to this question. For the scenario described in the original post I would have simply added the tooltip as an updated control to make sure it is also disposed with the partial postback, since you expect it to close. This will also let you update properties on the tooltip, not only on the content inside. Also, the tooltip will re-attach the needed handlers by itself because it will initialize again after the response is received in the browser.
- the label is not an initiator of the partial postback in any of the scenarios, it is merely a control around which an UpdatePanel is wrapped. What causes the tooltip to hide in my sample is the client-side code on the button. What causes it to show up again after the partial postback is the script I register from the server-side that re-attaches the handlers
- if the div around the label is a target for the tooltip this div is never disposed, as I already explained. an updaet panel is inserted in that div, around the label. This is why using the div in this configuration will work. Some controls are disposed and others are not, this is how MS AJAX is designed to work and it is the developer's task to monitor which are and which should be and control this.
- this is also the difference - whether the target of the tooltip is disposed (when the target is the label) or not (when the target is the div around it). If you examine the rendered markup you will find an additional div around the labe, which is the update panel generated by the presence of the label as an updated control.

On using RadToolTIps for additional data that should go through the server
- if possible, use JavaScript to populate additional fields, This will reduce the amount of postbacks
- if not - adding a client-side handler to close the tooltip when you want it to close is a good approach.
- use AJAX settings as needed to update the other controls. What is important is that if the tooltip's target is updated, but the tooltip itself- not - you will be back to square one and will have to re-read my explanations. Thus, you can either create a function that you can call from the code-behind (as I have showed in my sample), or include the tooltip in the partial postback (which will eliminate the need for the client-side button click handler). The funciton that reattaches the tooltip handlers can be more generic and can take the ClientID of the needed tooltip as an argument so it can be reused.


Regards,
Marin Bratanov
Telerik

[Ram]

Thank you Marin,

 You saved my time.

Issue got resolved by adding RadToolTip as update control.