[Solved] Tooltip opens but does not stay on ( closes right away on post back)

[Gotcha]

I have a Page Which has a user control which in turn generates dynamic user controls and within one of the UC, i have a rad grid in which I would like to add a tooltip manager to handle thumbs up and thumbs down tooltip. The problem i am having is that when i mouse over the image, i does bring up a panel with the loading icon but then closes right away . I doesn't load the panel with the literal control ( a one liner) at all but I do see the title of the tooltip.
I've wasted to much time trying to get this working... even trying a client side but without success...

I'm not sure if the problem has anything to do with the dynamic nature of the user controls being generated... so on every Page_Init (of the parent user control), I load the detail control below dynamically. So everytime there is a postback, example due to the AjaxRequest of the TooltipManager, it regenerate the radgrid, and hence the tooltip controls...

I'm not sure how to handle this one... i'll probably try a declarative radtooltip on each row...because I'm running out of options and this is taking way to much time

      protected void Page_Init(object sender, EventArgs e)
       {
           //Check SessionContext for selected MiniTab
           if (!String.IsNullOrEmpty(SessionContext.GetContextValue<string>("miniTab")))
           {
               _currentMiniTab = SessionContext.GetContextValue<string>("miniTab");
           }
           else
           {
               _currentMiniTab = SetCurrentSessionContextOfMiniTab("SpecialOffers");
           }

           // Add Click Event on Mini Tabs
           SetClickableMiniTabDivs();

           SetJavascript();

           if (IsPostBack)
           {
               // Get event arguments from post back.
               string eventArg = Request["__EVENTARGUMENT"];

               // Determine if postback is a custom postback from onClick of DIV Tabs
               if (!string.IsNullOrEmpty(eventArg) && eventArg.StartsWith("@@@@"))
               {
                   //Redirect to appropriate OnClick Event of the tab
                   CallDivEventHandler(eventArg);
               }

           }

           //Load Detail Control after ViewState is Initialized
           LoadDetailControl(_currentMiniTab);

       }

private void LoadDetailControl(string miniTab)
       {
           phMiniTabContent.Controls.Clear();
           UserControl ucTabContent = (UserControl)LoadControl(GetUserControlPath(miniTab));
           ucTabContent.ID = "DynamicUserControl_MiniTab_" + miniTab;
           phMiniTabContent.Controls.Add(ucTabContent);
           SetCssClassForSelectedMiniTab(miniTab);
       }

This is my user control where I want to tooltipify using RadToolTipManager

<telerik:RadToolTipManager ID="rttManager" runat="server" RelativeTo="Element" Width="225px"
    Height="100px" Style="z-index: 31000" Position="BottomLeft" Title="Like or Dislike" HideDelay="10" HideEvent="ManualClose"
    OnAjaxUpdate="rttManager_AjaxUpdate">
</telerik:RadToolTipManager>
<telerik:RadGrid ID="grdSpecialOffers" runat="server" AutoGenerateColumns="False"
    CellSpacing="0" EnableViewState="False" GridLines="None" OnNeedDataSource="grdSpecialOffers_NeedDataSource"
    OnItemCreated="grdSpecialOffers_ItemCreated" OnItemDataBound="grdSpecialOffers_ItemDataBound" ShowHeader="False" Skin="gmBlueGrid"
    EnableEmbeddedSkins="false" Height="346px" Style="outline: none;">
    <ClientSettings>
        <Selecting AllowRowSelect="True" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    </ClientSettings>
    <MasterTableView EnableViewState="False" DataKeyNames="AccountId, OfferId">
        <NoRecordsTemplate>
            No Special Offers
        </NoRecordsTemplate>
        <Columns>
            <telerik:GridTemplateColumn FilterControlAltText="Filter itemImage column" UniqueName="itemImage"
                ItemStyle-Width="50px">
                <ItemTemplate>
                    <a href="#">
                        <img id="imgPicture" runat="server" alt='<%# DataBinder.Eval(Container.DataItem, "DescLine1")%>'
                            src="" border="0" width="36" height="36" /></a>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn FilterControlAltText="Filter itemDescription column"
                UniqueName="itemDescription" ItemStyle-Width="300px">
                <ItemTemplate>
                    <asp:HyperLink ID="descriptionHyperlink" runat="server" CssClass="blackHyperlink"
                        NavigateUrl="#">
                        <asp:Label ID="lblDescriptionLine1" runat="server" CssClass="soDescLine1"> <%# DataBinder.Eval(Container.DataItem, "DescLine1")%></asp:Label></asp:HyperLink><br />
                    <asp:Label ID="lblDescriptionLine2" runat="server" CssClass="soDescLine2"> <%# DataBinder.Eval(Container.DataItem, "DescLine2")%></asp:Label>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn FilterControlAltText="Filter itemIcons column" UniqueName="itemIcons"
                ItemStyle-Width="50px">
                <ItemTemplate>
                    <div class="soAddButton">
                        <telerik:RadButton ID="btnAddItem" runat="server" Width="48" Height="23" NavigateUrl="#">
                            <Image ImageUrl="../Images/btAddCharcoal.gif" />
                        </telerik:RadButton>
                    </div>
                    <div class="soThumbsUpDown">
                        <telerik:RadButton ID="btnThumbsDown" runat="server" Width="13" Height="14" OnCommand="btnThumbsUpDown_Command"
                            CommandName="Down" CssClass="soThumbsDown">
                            <Image ImageUrl="../Images/icoThumbsDown.gif" />
                        </telerik:RadButton>
                        <telerik:RadButton ID="btnThumbsUp" runat="server" Width="13" Height="14" OnCommand="btnThumbsUpDown_Command"
                            CommandName="Up" CssClass="soThumbsUp">
                            <Image ImageUrl="../Images/icoThumbsUp.gif" />
                        </telerik:RadButton>
                    </div>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

My Code behind to add the controls to tooltipify to the RadToolTipManager and the AjaxRequest

protected void grdSpecialOffers_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
    {
        //Find Control to have tooltip
        RadButton btnThumbsUp = (RadButton)e.Item.FindControl("btnThumbsUp");
        if (btnThumbsUp != null)
        {
            if (rttManager != null)
            {
                rttManager.TargetControls.Add(btnThumbsUp.ClientID, "LIKE", true);
            }

        }

        //Find Control to have tooltip
        RadButton btnThumbsDown = (RadButton)e.Item.FindControl("btnThumbsDown");
        if (btnThumbsDown != null)
        {
            if (rttManager != null)
            {
                rttManager.TargetControls.Add(btnThumbsDown.ClientID, "DISLIKE", true);
            }

        }

    }
}


protected void grdSpecialOffers_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {

        HtmlImage imgPicture = (HtmlImage)e.Item.FindControl("imgPicture");
        // For each item in the DataRowView, check if picture exist, else show default picture
        DataRowView drv = (DataRowView)e.Item.DataItem;
        if (drv != null)
        {
            string imageFile = drv["Picture"].ToString();
            //Check of image file exist before rendering it on the rptDeals, otherwise replace it by the default.gif
            if (!File.Exists(Server.MapPath("/" + SessionContext.AppServerName + "/Data_Images/" + imageFile)))
            {
                drv["Picture"] = "default.gif";
                imgPicture.Src = "../Data_Images/Offers/default.gif";
            }
        }

        RadButton btnThumbsUp = (RadButton)e.Item.FindControl("btnThumbsUp");
        RadButton btnThumbsDown = (RadButton)e.Item.FindControl("btnThumbsDown");

        //For each item in Special Offer, Add the OfferId as COmmand Argument.
        btnThumbsUp.CommandArgument = e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["OfferId"].ToString();
        btnThumbsDown.CommandArgument = e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["OfferId"].ToString();

        if (drv["Rating"].ToString() == "3")
        {
            btnThumbsUp.Image.ImageUrl = "../Images/icoThumbsUpSelected.gif";
            //btnThumbsUp.CssClass = "soThumbsSelected";
        }
        else if (drv["Rating"].ToString() == "1")
        {
            btnThumbsDown.Image.ImageUrl = "../Images/icoThumbsDownSelected.gif";
            //btnThumbsDown.CssClass = "soThumbsSelected";
        }

        //Ajaxify the buttons so that they are refreshed by partial postbacks
        soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsUp, btnThumbsUp);
        soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsUp, btnThumbsDown);
        soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsDown, btnThumbsUp);
        soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsDown, btnThumbsDown);

        ////Find ThumbsUp Control to have tooltip - Used ItemDataBound Instead as a test
        //if (btnThumbsUp != null)
        //{
        //    if (rttManager != null)
        //    {
        //        rttManager.TargetControls.Add(btnThumbsUp.ClientID, "LIKE", true);
        //    }

        //}

        ////Find ThumbsDown Control to have tooltip
        //if (btnThumbsDown != null)
        //{
        //    if (rttManager != null)
        //    {
        //        rttManager.TargetControls.Add(btnThumbsDown.ClientID, "DISLIKE", true);
        //    }

        //}
    }
}

protected void rttManager_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
{
    LiteralControl litControl = new LiteralControl();
    if (e.Value == "LIKE")
    {
        litControl.Text = "LIKE this offer <br/>(Show me more offer like this)";
    }
    else
    {
        litControl.Text = "DISLIKE this offer";
    }
    e.UpdatePanel.ContentTemplateContainer.Controls.Add(litControl);
}

[Marin Bratanov]

Hello,

The main issue in the code sample you have sent is that the buttons are added multiple times as targets for the RadToolTipManager. You should add them only in the ItemDataBound event. Please try this and see if it helps. Also, if you are adding the UC with the tooltip manager dynamically you can consider adding it in the markup to avoid its recreation on each AJAX request from the tooltip manager. You can then set its Visible property to false if you do not need it rendered.

Alternatively, you can also add a tooltip for each button as is shown in this demo: http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipversustooltipmanager/defaultcs.aspx. It shows the correct way to add controls to a manager (only once in the databound event) or how to use separate tooltips for each element in a databound control.


All the best,
Marin
the Telerik team

[Gotcha]

Hi Marin,

that's what I thought I was doing... I have them in the ItemDataBound of the Grid and only adding them for each Item and AlternatingItem from the RadGrid.. isnt' it?
For each row I have 2 controls (images button) and for each row ( in itemdatabound), i am adding the control to the tooltipmanager... At least this is how I understood it..Please correct me if my code if not as you are describing because I can't see where I am adding the same buttons multiple times...


Here is the actual code as shown below in my original post for the sake of discussion :

protected void grdSpecialOffers_ItemDataBound(object sender, GridItemEventArgs e)
 {
     if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
     {
         //Find Control of thumbs Up to have tooltip <==== 1st Control in that row
         RadButton btnThumbsUp = (RadButton)e.Item.FindControl("btnThumbsUp");
         if (btnThumbsUp != null)
         {
             if (rttManager != null)
             {
                 rttManager.TargetControls.Add(btnThumbsUp.ClientID, "LIKE", true);
             }
         }
         //Find Control to have tooltip <== 2nd Control in the same row.
         RadButton btnThumbsDown = (RadButton)e.Item.FindControl("btnThumbsDown");
         if (btnThumbsDown != null)
         {
             if (rttManager != null)
             {
                 rttManager.TargetControls.Add(btnThumbsDown.ClientID, "DISLIKE", true);
             }
         }
     }
 }

BTW, Whats the difference of having this operation to add the TargetControls in ItemDataBound vs Item Created? I had both scenarios and they seem to yield the same behaviour

Anyway, let me know what I am doing wrong... for now I've used the auto tooltipify but this will change.

[Marin Bratanov]

Hello,

I am sorry for missing the fact that these lines were commented in the grdSpecialOffers_ItemCreated method. I cannot see anything majorly wrong with the code and I tried it locally with the expected behavior: http://screencast.com/t/disMlreCOq. I am also attaching my test page as a reference. You can see the tooltips show with the expected text and there is only one AJAX request.

I had to comment out some functionality on changing the images for the RadButtons, yet I believe this is not the cause for your issue. What I can guess is that another AJAX request happens which may be due to the many update panels you create for each button. What I would suggest is to add a single AJAX setting for the RadGrid that will update the grid itself. It will also capture clicks on the buttons to update them accordingly. Something in those lines:

<telerik:RadAjaxManagerProxy runat="server" ID="soRadAjaxManagerProxy">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="grdSpecialOffers">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="grdSpecialOffers" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

and remove the following from the code-behind:

//Ajaxify the buttons so that they are refreshed by partial postbacks
soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsUp, btnThumbsUp);
soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsUp, btnThumbsDown);
soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsDown, btnThumbsUp);
soRadAjaxManagerProxy.AjaxSettings.AddAjaxSetting(btnThumbsDown, btnThumbsDown);

You can also try placing the entire grid in a regular ASP UpdatePanel with UpdateMode set to conditional and remove the RadAjaxManager and RadAjaxManagerProxy.

Greetings,
Marin
the Telerik team

[Gotcha]

Thanks for the quick reply and detailed explanation!

I will certainly look into using a single AjaxSettings on the whole grid rather than individual buttons... I thought having them individually to cut down on the amount of data i nee to submit but i can live with having one grid is this is the issue.

Also, I'd like to ask your opinion about the use of ASP:UpdatePanels...  Since i started using your controls... i read somewhere that I should either use one of the Ajax controls ( RadAjaxManager or RadAjaxPanel or the ASP UpdatePanel)... I opted for the RadAjaxManager because it was easier for me to configure everythign from a single place... so in my design, i try to avoid RadAjaxPanel and ASP Update Panel ( i think i read somewhere that they may cause conflict)...

In most cases ( only one instance where my work around was to have a RadAjaxPanel in a UC for an issue i had), this has worked for me ( just have the RadAjaxManager in my Master)... now im a bit intrigued by your advice to remove the RadAjaxManager and Proxy... I use Ajax extensively and it is declared in my Master Template... so removing it will mean a lot of changes across the site... so my only other option is to use asp update panel in conjunction with the RAM... So having said that, would you still recommend I go through this process of removing all your controls ( for Ajax) and use Update Panels from ASP?

Thanks and will keep you posted !

[Gotcha]

I did another test... removing the multiple dynamic ajaxsettings on the buttons onitemdatabound... and set it declaritively in the aspx on the whole grid and the problem still exist...
So I went back to the Master Page where my RadAjaxManager is declared and set AjaxEnabled to false... to test the page without ajax... So every control on the page was posting back and refreshing the whole page... which was expected ... EXCEPT the tooltip... although I've disabled the RadAjaxManager to false.. the tooltip was still using AJAX.. ( is this normal?)...  I thought thee RadAjaxManager controls all AJAX features of telerik ( except RadAjaxPanels) Anyway on this tooltip I expected a full post back...

And another surprise was that the tooltip works as expected... ( ie with the Ajax Enabled just on the tooltip)

So I'm not sure what you can deduct from this behaviour... What Am I doing wrong?

<telerik:RadAjaxManager ID="RadAjaxManager_GM" runat="server" EnableAJAX="false" DefaultLoadingPanelID="RadAjaxLoadingPanel_GM">
</telerik:RadAjaxManager>

[Marin Bratanov]

Hi,

Please excuse the vagueness in my previous reply. What I meant was that I suggested that you use a regular asp update panel with updatemde set to conditional just for this grid instead of the RAM. I did not mean that you should remove it entirely and not use it in your project. I asked you to test this as there are some complex scenarios in which the update panels the RadAjaxManager creates act with updateMode set to Always, which would cause the exact behavior you describe. Thus I ask that you test with a simple control (the asp update panel) as I expect it will work properly in this case and avoid the ajax request loop.

As for disabling AJAX from the RAM - this works only for the AJAX settings added through this manager, not for other, unrelated controls. This means that if you have a separate RadAjaxPanel or ASP UpdatePanel their AJAX will still work. What happens is that the RadToolTipManager has its own update panel, so its AJAX works independently from the RadAjaxManager's.


Kind regards,
Marin
the Telerik team

[Hunter]

I too have a user control which contains a radGrid and RadToolTipManager (ttm) which is then dynamically loaded into an aspx page at runtime. I have chosen to use the ttm because I plan on loading a user control into the tooltip which requires a trip to the database. I've tested this functionality with success using a simple aspx page with a radGrid placed within it (Telerik example). However when I take this working example, convert it to a user control, and then load it dynamically into a page the tool tip shows for a moment (loading wheel) then disappears after the tooltip's ajax call. I've tried a number of different things, as well as the suggestions made in this thread, and I still cant get this to work. I'm trying to get to the root of this problem. I've even tried placing the ttm in the user control's parent page but unfortunately this resulted in the same error.

Any help is greatly appreciated!

PS - I played with placing a radTooltip within the item template of my column which worked. However, this approach obviously doesn't load the tooltip dynamically which means that every tooltip is bound along side the row resulting in a number of unnecessary calls to the database.

[Marin Bratanov]

Hi Hunter,

Since you load the UC (with the Grid where your targets are) dynamically this means that it is disposed and recreated after the postback (i.e. the AJAX request) from the RadToolTipManager. Disposing the targeted control means the tooltip would also hide as its target is not present (i.e. its ID has changed). What I can suggest is that you set the UpdateMode of the update panel where you load the UC to Conditional to avoid disposing the entire UC after each AJAX request. You should also make sure the tooltip manager is not always disposed after an AJAX request - i.e. it should not be in an update panel with updatemode set to always or in an AJAX setting from the RadAjaxManager which would update it. Please try placing it in a regular ASP update panel with updateMode Conditional on the main page and see how it works out in your exact scenario. If the updatepanel with the UC is updating conditionally this approach should work from inside it as well. I also advise that you set an ID to the UC you load dynamically if you do not do so already.


Greetings,
Marin
the Telerik team

[Hunter]

Thank you for the reply! This all makes perfect sense. I'll give the update panel a try. Thanks!