Postbacks alternate between partial and full with RenderInPageRoot=true

[Gene]

Hello,

I have a page where I am using tooltips to change items like this:

Contact E-mail: [e-mail]   change  <--clicking change brings up a tooltip with the textbox to change the e-mail address.

I have a conundrum.  Using the tooltip with RenderInPageRoot set to false, my tooltip will appear in the incorrect position, then "jump" up next to the element. This is due to the way my styles are defined, and unfortunately I cannot change them.  However, ajax postbacks work great in this scenario.

However, if I use RenderInPageRoot=true, the tooltip shows up perfectly next to the element, but then I get the behavior where Ajax will work on the first postback, not on the next, then again on the next.  So it alternates between partial and full postbacks.

Here is a snippet of the code:

<div class="block append-bottom-sm">
            <div class="span-6">
                <asp:Label ID="lblContactEmailTitle" runat="server" Text="Contact E-mail:" AssociatedControlID="lContactEmail" />
            </div>
            <div class="span-5">
                <asp:Label ID="lContactEmail" runat="server"></asp:Label>
                <telerik:RadToolTip runat="server" ID="radttContactEmail" HideEvent="FromCode" Position="MiddleLeft"
                    Width="250px" Height="70px" Animation="Slide" ShowEvent="OnClick"  ShowDelay="0"  RenderInPageRoot="true"
                    RelativeTo="Element" TargetControlID="lbContactEmail">

                    <asp:Label ID="Label5" runat="server">Please enter your Contact Email:</asp:Label>
                    <br />
                    <asp:TextBox ID="tbContactEmail" runat="server" ValidationGroup="ContactEmailValidationGroup"></asp:TextBox>
                   <br />
                    <asp:RegularExpressionValidator  ID="revContactEmail" runat="server" ValidationGroup="ContactEmailValidationGroup" Display="Dynamic"
                    ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$"
                    ControlToValidate="tbContactEmail">The Contact Email must have a valid format.</asp:RegularExpressionValidator>

                    <asp:LinkButton ID="lbContactEmailSave" runat="server" ValidationGroup="ContactEmailValidationGroup">Save</asp:LinkButton>
                    <asp:LinkButton ID="lbContactEmailCancel" runat="server" ValidationGroup="" CausesValidation="false" OnClientClick="HideTooltip(); return false;">Cancel</asp:LinkButton>
                </telerik:RadToolTip>
            </div>
            <div class="span-3">
                <asp:LinkButton ID="lbContactEmail" runat="server" OnClientClick="SetContactEmail();">Change</asp:LinkButton>
            </div>
        </div>

Here is the AjaxManager setup (pnlContactInfo surrounds all the code that you see in the snippet above):

<telerik:RadAjaxLoadingPanel ID="radalp" runat="server" BackgroundPosition="Center" Skin="Default" />
        <telerik:RadAjaxManager ID="radam" runat="server" EnablePageHeadUpdate="false" DefaultLoadingPanelID="radalp" >
            <AjaxSettings>

                <telerik:AjaxSetting AjaxControlID="lbContactEmailSave">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlContactInfo" />

                    </UpdatedControls>
                </telerik:AjaxSetting>

            </AjaxSettings>
        </telerik:RadAjaxManager>

Here is the javascript function that is called when the user clicks the "Change" button:

 function SetContactEmail() {
        document.getElementById('<%=tbContactEmail.ClientID%>').value = document.getElementById('<%=lContactEmail.ClientID%>').innerHTML;
        Page_ClientValidate('ContactEmailValidationGroup'); // Erase any message which may have been displayed the last time after a Cancel was clicked.
    }

And here is the code-behind that is happening on save:

 Private Sub lbContactEmailSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lbContactEmailSave.Click
        Dim VZID As String = hidVZID.Value
        Dim newEmail As String = tbContactEmail.Text
        Dim SQL As String = 'some sql here...
        Dim myData As New clsData()
        myData.ExecuteSQL(SQL, CommandType.Text)
        lContactEmail.Text = newEmail
    End Sub

Any help would be greatly appreciated.

Thanks,
Gene

[Svetlina Anati]

Hi Gene,

 The behavior you describe is actually expected in such a complex AJAX scenario having in mind that RenderInPageRoot moves elements in the DOM and AJAX is using innerHTML for updates. What I can recommend in your case is the following:

1) Put the tooltip's declaration to be outside the panel, as a child of the form and remove RenderInPageRoot="true". The separate RadToolTip is rendered where it is decalred andf in this case it will be rendered in teh root without moving of elements in the DOM.

2) Add the tooltip to the AJAX settings as well.

The above changes should produce teh same result without moving in the DOM which causes the AJAX problem. Please, find a modified demo attached and let me knwo whether this solution works for your case.

In case it does not work for you, please explain why the suggested solution is not acceptable in your case and  provide more details and sample code on how to reproduce the initial problem with positioning and jumping and we will try to provide a suitable workaround for your particular case.

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gene]

Svetlina

Thank you very much for your answer.  Your solution would work, but I actually found another solution as well.  What had caused the jumping of the tooltip was the fact that the containing element had its CSS position set to relative (so the positioning of the tooltip was being messed up).  In my original post, I said I couldn't mess with the styles, but I found that this position was not necessary, and was able to remove it.  Thus, I was able to remove RenderInPageRoot=true from the tooltips, and they show up correctly next to the elements and Ajax works.  However, thank you for your suggestions, as I'm sure I will run into this situation again, and I will keep those in mind for when I might not be able to change the styles.

Thanks!
~Gene

[Paul]

Hi,

I am experiencing a similar situation using RadTooltips inside of a RadGrid.  My grid and tooltips are all created programatically using the ITemplate / InstantiateIn method.  Do you have any suggestions for moving programatically generated tooltips outside of their parent controls (in this case, from the RadGrid during databinding) and onto the top level of the page?  I'm having trouble finding a proper way to do this.

Thanks,
Paul

[Marin Bratanov]

Hello Paul,

Generally you cannot modify the global controls collection in databound events, especially if you are using AJAX. You first need to make sure that the place you wish to add the tooltips to is going to be updated on the client. You can also declare an asp Panel, for example where you will add the tooltips, for example

<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
<telerik:RadGrid runat="server" ID="rg1" OnNeedDataSource="OnNeedDataSource" OnItemDataBound="OnItemDataBound">
</telerik:RadGrid>

int i = 0;
protected void OnItemDataBound(object sender, GridItemEventArgs e)
{
    RadToolTip tt = new RadToolTip();
    tt.ID = i.ToString();
    tt.VisibleOnPageLoad = true;
    tt.Text = i.ToString() + "<br />" + DateTime.Now.ToString();
    tt.HideEvent = ToolTipHideEvent.ManualClose;
    tt.Width = Unit.Pixel(200);
    tt.Height = Unit.Pixel(200);
    tt.RenderInPageRoot = true;
    Panel1.Controls.Add(tt);
    i++;
}

If you run this code you will get a tooltip at the bottom of the page with some subsequent number depending on your datasource (note it will be only one, as there cannot be more than one visible tooltip on the page in any given time).

Please also note that this works in a rather simple scenario and I cannot guarantee it is possible in all cases. Adding controls to the page is quite a generic task and the RadToolTip does not differ from a regular asp control in this regard - dynamically created instances should be recreated after postbacks, it needs to be added to a parent in order to function, etc. just like a button for example.

All the best,
Marin
the Telerik team

[Paul]

Marin,

Thanks for your reply.  I've been working on a solution similar to this.  So, how would I attach the tooltips to target controls on the RadGrid though? I've seen people in other threads doing something similar to "e.Item.FindControl" in the OnDataBound and OnItemCreated grid events, but so far I haven't had any luck finding child controls of the grid in this manner.

I don't suppose there is a way to fire a custom event from my custom GridItemTemplate.....?

Thanks,
Paul

[Marin Bratanov]

Hi Paul,

I am not sure exactly what your scenario and code is, yet I advise that you examine carefully the following help article on programmatically creating a grid:
http://www.telerik.com/help/aspnet-ajax/grid-programmatic-creation.html
If you are doing this correctly you should be able to find the controls in the OnItemDataBound event.
You can also examine the code-behind from this online demo which adds target controls to a RadToolTipmanager. You can use the same approach to provide them for the separate tooltips.


All the best,
Marin
the Telerik team