Idiot Programmer Seeks Brain

9 posts, 1 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 23 Aug 2010 Link to this post

    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

  2. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 24 Aug 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 24 Aug 2010 Link to this post

    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???
  5. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 25 Aug 2010 Link to this post

    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
  6. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 25 Aug 2010 Link to this post

    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
  7. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 25 Aug 2010 Link to this post

    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.
  8. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 26 Aug 2010 Link to this post

    Thanks for the pointer. Sadly it takes my no closer to a solution.

    -- 
    Stuart
  9. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 27 Aug 2010 Link to this post

    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
  10. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 27 Aug 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017