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

Idiot Programmer Seeks Brain

8 Answers 95 Views

ToolTip

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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

Accepted

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Idiot Programmer Seeks Brain

8 Answers, 1 is accepted