This is a migrated thread and some comments may be shown as answers.

Idiot Programmer Seeks Brain

8 Answers 82 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Stuart Hemming
Top achievements
Rank 2
Stuart Hemming asked on 23 Aug 2010, 09:27 PM
OK.

Could some kind soul please point out the blindingly obvious fact that I'm failing to see.

I have this page ...
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="verticalTabStrip.aspx.cs"
Inherits="verticalTabStrip" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1"
          runat="server">
        <title></title>
<style type="text/css">
.RadToolBar, .rtbOuter, .rtbMiddle, .rtbInner, .rtbUL
{
height: 100%;
}
div.RadToolBar { display: block; }
html, form, body { height: 100%; padding: 0; margin: 0; }
</style>
    </head>
    <body>
        <form id="form1"
              runat="server">
            <asp:ScriptManager ID="ss"
                               runat="server"/>
            <telerik:RadScriptBlock ID="RadScriptBlock1"
                                    runat="server">
                <script type="text/javascript">
                    function clientLoad(sender, args)
                    {
                        ResizeToolbar();
                        $telerik.$(window).resize(function()
                                                  {
                                                      ResizeToolbar();
                                                  });
                    }
 
                    function ResizeToolbar()
                    {
                        var toolbar = $find("<%= RadToolBar1.ClientID %>");
                        var percents = 100 / toolbar.get_items().get_count();
                        $telerik.$(".rtbItem").css("height", percents + "%");
                    }
                    function ToolBarOnClientMouseOver(oToolBar, args)
                    {
                        var oToolTipManager = $find("<%= RadToolTipManager1.ClientID %>");
                        var elem = args.get_item().get_element();
 
                        //Find the tooltip for this element if it has been created
                        var tooltip = oToolTipManager.getToolTipByElement(elem);
                        //Create a tooltip if no tooltip exists for such element
                        if (!tooltip)
                        {
                            tooltip = oToolTipManager.createToolTip(elem);
                            //Use the fact that the image was named after a country
                            //Extract the country name from the image, and set it as the value to be supplied to the web-service
                            tooltip.set_value(args.get_item().get_value());
                        }
                        tooltip.show();
                    }
                </script>
            </telerik:RadScriptBlock>
                                
            <telerik:RadToolBar ID="RadToolBar1"
                                runat="server"
                                Orientation="Vertical"
                                OnClientLoad="clientLoad"
                                OnClientMouseOver="ToolBarOnClientMouseOver"
                                Skin="WebBlue"
                                Height="100%"
                                Width="63px">
                <Items>
                    <telerik:RadToolBarButton Text="button 1"
                                              Value="1"
                                              ImagePosition="AboveText"
                                              ImageUrl="Images/blog-blue.png"
                                              ToolTip="Blah"/>
                    <telerik:RadToolBarButton Text="button 2"
                                              Value="2"
                                              ImagePosition="AboveText"
                                              ImageUrl="Images/blog-blue.png"/>
                    <telerik:RadToolBarButton Text="button 3"
                                              Value="3"
                                              ImagePosition="AboveText"
                                              ImageUrl="Images/blog-blue.png"/>
                    <telerik:RadToolBarButton Text="button 4"
                                              Value="4"
                                              ImagePosition="AboveText"
                                              ImageUrl="Images/blue-document.png"/>
                    <telerik:RadToolBarButton Text="button 5"
                                              Value="5"
                                              ImagePosition="AboveText"
                                              ImageUrl="Images/blue-folder.png"/>
                </Items>
            </telerik:RadToolBar>
            <telerik:RadToolTipManager ID="RadToolTipManager1"
                                       runat="server"
                                       ShowCallout="false"
                                       Position="MiddleRight"
                                       RelativeTo="Element"
                                       Skin="WebBlue"
                                       Width="600px"
                                       Height="288px"
                                       HideEvent="LeaveTargetAndToolTip"
                                       OnAjaxUpdate="RadToolTip_AjaxUpdate"
                                       AutoCloseDelay="30000">
                <TargetControls>
                </TargetControls>
            </telerik:RadToolTipManager>
 
        </form>
    </body>
</html>
With this code behind ...
using System.Web.UI;
using System;
 
public partial class verticalTabStrip : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
 
    protected void RadToolTip_AjaxUpdate(object sender, Telerik.Web.UI.ToolTipUpdateEventArgs e)
    {
        Control c = Page.LoadControl(Page.ResolveUrl(String.Format("~/Controls/UserControl{0}.ascx", e.Value)));
        e.UpdatePanel.ContentTemplateContainer.Controls.Add(c);
    }
}

The content of UserControlN.ascx is immaterial; all that is important is that they're different. In my test, one has a combobox, one a treeview, etc.

When I run the page, getting the mouse over one of the toolbar buttons causes the relevant tooltip to display. Moving the mouse over a different button results in a HttpException being generated on the last line of the RadToolTip_AjaxUpdate method. The error message reads "Failed to load viewstate.  The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request.  For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request."

For the life of me, I can't work out what I'm doing wrong. If you could put me out of my misery, I would be most grateful.

-- 
Stuart

8 Answers, 1 is accepted

Sort by
0
Stuart Hemming
Top achievements
Rank 2
answered on 24 Aug 2010, 02:00 PM
The only thing I've been able to do here is load all of the controls every time the tooltip shows and to hide all of them except for the one I need in that particular instance.

That can't be right, can it?

-- 
Stuart
0
Cori
Top achievements
Rank 2
answered on 24 Aug 2010, 06:53 PM
Hello Stuart,

I noticed this was missing from your code, when compared to the demo, which I assume is where you got your code from.

//Let the tooltip's own show mechanism take over from here - execute the onmouseover just once
            elem.onmouseover = null;

Perhaps that will help???
0
Stuart Hemming
Top achievements
Rank 2
answered on 25 Aug 2010, 07:54 AM
Cori, to the rescue again? My very own superhero! :-)

I used something posted by Peter in this thread as the basis for what I was doing. I don't see that line anywhere; which demo are you referring to?

-- 
Stuart
0
Stuart Hemming
Top achievements
Rank 2
answered on 25 Aug 2010, 08:07 AM
Mmmm.

The only reference that I could find (I did a search using the comment string) was this thread and it was another user's code rather than a demo.

And it didn't help! :-).

FYI, my client side code now reads ...
function ToolBarOnClientMouseOver(oToolBar, args)
{
    var activeToolTip = Telerik.Web.UI.RadToolTip.getCurrent();
    if (activeToolTip != null) {
        activeToolTip.hide();
    }
    var oToolTipManager = $find("<%= RadToolTipManager1.ClientID %>");
    var elem = args.get_item().get_imageElement();
 
    //Find the tooltip for this element if it has been created
    var tooltip = oToolTipManager.getToolTipByElement(elem);
    //Create a tooltip if no tooltip exists for such element
    if (!tooltip)
    {
        tooltip = oToolTipManager.createToolTip(elem);
        tooltip.set_value(args.get_item().get_value());
        elem.onmouseover = null;
    }
    tooltip.show();
}

-- 
Stuart
0
Cori
Top achievements
Rank 2
answered on 25 Aug 2010, 02:10 PM
This is the demo I was referring to:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx

Hopefully you can find your answer there or compare it to what you're doing.
0
Stuart Hemming
Top achievements
Rank 2
answered on 26 Aug 2010, 03:06 PM
Thanks for the pointer. Sadly it takes my no closer to a solution.

-- 
Stuart
0
Accepted
Tsvetie
Telerik team
answered on 27 Aug 2010, 07:45 AM
Hello Stuart Hemming,

If you add a control dynamically to a placeholder (update panel in this case)  (UserControl1.ascx) and on the next postback (ajax request) you add a different control  (UserControl2.ascx) to the same placeholder  ASP.NET tries to load the ViewState of the control contained previously at the placeholder -  it's expecting the previous control  you added (UserControl1.ascx), but it will encounter another control instead  (UserControl2.ascx). That is why you get the ViewState problem.

The easiest way to solve this problem is that you set EnableViewState="false" to the RadToolTipManager. The only side effect you can get is in case you set some property of the manager on the server you will have to set it on every postback.

Another option is to use a different manager for each user control - this will not affect the performance or the used resources significantly since the HTML rendered by the RadToolTipManager is pretty small.


Kind regards,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Stuart Hemming
Top achievements
Rank 2
answered on 27 Aug 2010, 02:00 PM
Tsvetie,

Ah-ha!

In the production code I was modifying I couldn't switch off ViewState, but the multiple RadToolTipManager option worked a treat..

Many thanks.

-- 
Stuart
Tags
ToolTip
Asked by
Stuart Hemming
Top achievements
Rank 2
Answers by
Stuart Hemming
Top achievements
Rank 2
Cori
Top achievements
Rank 2
Tsvetie
Telerik team
Share this question
or