RadToolTip flickering on postback

[Esteban]

Hello all,

I'm currently having an issue with the RadToolTip flickering on postback. It may just be a mis-use of the intended purpose, but im hoping there may be something I can do.

I like the way the modal works (disabling most of the page and displaying the contents of the tooltip), this is the biggest reason I chose this (perhaps the window tool has something in the same range, I havent looked just yet).

I have searched and found that the tooltip disposes on postback, however the post states one option is to make an ajax request instead of a full postback. I thought the RadAjaxManager would handle that, it partially does, but it still flickers.
Source: http://www.telerik.com/community/forums/aspnet-ajax/tooltip/modal-radtooltip-not-displayed-after-postback.aspx

SCENARIO:
I am creating a user management system. The main page contains search criteria and a result grid. There is a linkbutton used to add a new user. I have a user control that does the adding of the user, and I am attempting to put it in the RadToolTip modal that pops up when the 'add user' link button is clicked. There is server-side functionality on the user control.

Everything seems to work fine, however the modal popup seems to dissapear and come back after every postback (any server-side event inside of the user control).

I have set the tooltips ShowEvent and HideEvent as 'FromCode' and Modal to 'True'. On the 'add user' link button click event, I set the VisibleOnPageLoad property to 'true' and .Show() it to the page. The reason I do the VisibleOnPageLoad property on the event, is so that it doesnt automatically pop-up when the main page loads. I am also using the RadAjaxManager to set ajax on the tooltip on the click event of the link button.

Everything is working perfectly and beatifully, excluding the pop-up clearing and coming back when events are fired from the user control within the tooltip.

Am I missing something that could help me, or mis-using the tooltip? Perhaps my logic is incorrect... Any help is appreciated.

RadAjaxManager Settings On User Management Page

<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="SearchUsersLinkButton">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="UserSearchResultsRadGrid" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="AddNewUserLinkButton">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="AddEditUserRadToolTip" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Tooltip Code on User Management Page

<telerik:RadToolTip ID="AddEditUserRadToolTip" Modal="true" Skin="Vista" ShowEvent="FromCode" Position="Center" RelativeTo="BrowserWindow" EnableShadow="true" HideEvent="FromCode" runat="server">
    <ACB:ProfileEdit ID="AddEditUserProfileEdit" runat="server" />
</telerik:RadToolTip>

AddNewUserLinkButton_Click Event

protected void AddNewUserLinkButton_Click(object sender, EventArgs e)
{
    AddEditUserProfileEdit.InitializeData(null);
    AddEditUserRadToolTip.VisibleOnPageLoad = true;
    AddEditUserRadToolTip.Show();
}

AddEditUserProfileEdit InitializeData(int? personID) Method and Methods called within (Just in case)

public void InitializeData(int? personID)
{
    if (personID == null)
    {
        //--New User Setup
        SetupCreateUser();
    }
}
private void ClearForm()
{
    ProfileFormInfoLabel.Text = " ";
    this.FirstName = String.Empty;
    this.LastName = String.Empty;
    this.UserNamePrimaryEmail = String.Empty;
    this.AlternateEmail = String.Empty;
    this.PhoneNumber = String.Empty;
    this.UserPassword = String.Empty;
}
private void SetupCreateUser()
{
    //--Title
    ProfileFormTitleLabel.Text = "Add System User";
    //--FormType
    this.FormType = FormTypeEnum.Create;
    //--Roles RadGrid
    UserRolesRadGrid.DataSource = new DataTable();
    UserRolesRadGrid.DataBind();
    ClearForm();
}

[Esteban]

Just stating that I havent found the solution, and am still interested in one if possible. XD

[Svetlina Anati]

Hi Esteban,

 
What you report might happen when there is an update panel inside the tooltip or when you use RadToolTipManager with OnAjaxUpdate event. I tried to reproduce the issue based on your code but unfortunately to no avail - it shows as expected and it does not flicker. Would you please examine my sample code which is attached and modify it in order to replicate the problem? Once you succeed with this, please share the modified fully runnable code and I will debug it and make it meet your requirements so that you will be then able to apply the same logic in your original application.

All the best,
Svetlina
the Telerik team

[Esteban]

Hi Esteban,

In order to be able to attach files you should open support ticket instead of a forum one. I removed the download link from here because the application had a licensed Telerik.Web.UI.dll file in it. We would like to kindly ask you not to attach the dll in the future - if you decide to upload a sample demo, simply do not add the dll at all (just mention the version) and we will add it on our side or add a trial dll instead.

As to the problem, the issue comes from the fact that the button inside the tooltip makes a full postback which is expected and since the tooltip is on the same page, it is disposed and reopened. To get the desired result you should ajaxify this postback, e.g as shown below;

<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
          runat="server">
          <AjaxSettings>
              <telerik:AjaxSetting AjaxControlID="SearchUsersLinkButton">
                  <UpdatedControls>
                      <telerik:AjaxUpdatedControl ControlID="UserSearchResultsRadGrid" />
                  </UpdatedControls>
              </telerik:AjaxSetting>
              <telerik:AjaxSetting AjaxControlID="AddNewUserLinkButton">
                  <UpdatedControls>
                      <telerik:AjaxUpdatedControl ControlID="AddEditUserRadToolTip" />
                  </UpdatedControls>
              </telerik:AjaxSetting>
              <telerik:AjaxSetting AjaxControlID="AddEditUser1">
                  <UpdatedControls>
                      <telerik:AjaxUpdatedControl ControlID="AddEditUser1" />
                  </UpdatedControls>
              </telerik:AjaxSetting>
          </AjaxSettings>
      </telerik:RadAjaxManager>
      <telerik:RadToolTip ID="AddEditUserRadToolTip" Modal="true" Skin="Vista" ShowEvent="FromCode"
          Position="Center" RelativeTo="BrowserWindow" EnableShadow="true" HideEvent="FromCode"
          runat="server">
          <acb:AddEditUser ID="AddEditUser1" runat="server" />
      </telerik:RadToolTip>

Note, also that you do not have to use both VisibleOnPageLoad and Show - one of them is enough to show the tooltip.

I hope that my reply is helpful and for your convenience I modified and attached your files - let me know how it goes.

[Esteban]

Ha! Isn't that something. At one point I had used the ajaxmanager to link the user control with the tooltip, but I guess I just had to work with the user control itself... for some reason I thought I had to ajaxify the tooltip...

Oh wells, thank you very much.

Not sure how to mark this as answered, but there ya go. Much appreciated.