<asp:Image ID="imgMain" runat="server"/><telerik:RadToolTip ID="RadToolTip2" runat="server" TargetControlID="imgMain" Width="400px" RelativeTo="Element" EnableShadow="true" Position="BottomCenter" Animation="Slide" AnimationDuration="300" ShowDelay="200" Skin="Vista" HideEvent="LeaveToolTip"></telerik:RadToolTip>Hi im using the RadToolTip as above.
Im also adding a Image inside the RadToolTip at runtime, the ImageUrl of this Image is set via my own custom Image Handler which is used within the site and works fine.
When the user hovers over 'imgMain' the RadToolTip should show the same image but at a different size, but all im getting is the RadToolTip showing the title.
If i hard code the Image Urls into the Image inside the RadToolTip is shows fine so i know its not a problem with my ImageHandler.
Is there any known issues with dynamically showing images from a Image Handler iside a RadToolTip?
My Server side code is below
imgMain.ImageUrl = String.Format("~/dbimagehandler.ashx?record=product&empty=showt&imageno=1&recno=-1&wid={0}&hgt={1}&productid={2}", "188", "196", this.ProductId)imgMain.AlternateText = ds.Ds.Tables["Table"].Rows[0]["Title"].ToString();imgMain.ToolTip = ds.Ds.Tables["Table"].Rows[0]["Title"].ToString();RadToolTip2.TargetControlID = imgMain.ID;Image imgsmall = new Image();imgsmall.ImageUrl = String.Format("~/dbimagehandler.ashx?record=product&empty=showt&imageno=1amprecno=-1&wid={0}&hgt={1}&productid={2}", "376","392", this.ProductId);RadToolTip2.Controls.Add(imgsmall);Any help on this would be mcuh apreciated.
2 Answers, 1 is accepted
0
Hello Neil,
There are no known issues with this that I can think of, just using the RadToolTip from the server may sometimes be a little different than expected, as the RadToolTip is primarily a client-side object.
There are many possible reasons for such behavior. For example - if you are using AJAX are you updating the RadToolTip when you add the image to its target controls? Please note that if the RenderInPageRoot property is set to true the RadToolTip's content will be rendered as a direct child of the form and will thus be outside of the expected update panel. There are several ways to avoid such behavior:
1) set the RenderInPageRoot property to false
the follwing two may help even if no ajax is involved:
2) You can try placing the image between the RadToolTip's tags in the markup an only set its ImageUrl from the server
3) You can also use a regular html img tag and set its url via JavaScript (by injecting this script from the server where you obtain the URL)
Generally when you need to load content on demand in tooltips I would recommend using the RadToolTipManager. In its AjaxUpdate event you can dynamically add controls to its update panel as shown in this online demo: http://demos.telerik.com/aspnet-ajax/tooltip/examples/loadondemand/defaultcs.aspx. The benefit here is that the AJAX is handled internally and you only need to create the image and add it to the manager's update panel's content template.
I have also attached a simple page where I add an image dynamically to the tooltip's controls and it is working as expected: http://screencast.com/t/pCvKlIsade.
On a side note - I would recommend setting the height as well in order to avoid some appearance issues like incorrect dimensions.
Greetings,
Marin
the Telerik team
There are no known issues with this that I can think of, just using the RadToolTip from the server may sometimes be a little different than expected, as the RadToolTip is primarily a client-side object.
There are many possible reasons for such behavior. For example - if you are using AJAX are you updating the RadToolTip when you add the image to its target controls? Please note that if the RenderInPageRoot property is set to true the RadToolTip's content will be rendered as a direct child of the form and will thus be outside of the expected update panel. There are several ways to avoid such behavior:
1) set the RenderInPageRoot property to false
the follwing two may help even if no ajax is involved:
2) You can try placing the image between the RadToolTip's tags in the markup an only set its ImageUrl from the server
3) You can also use a regular html img tag and set its url via JavaScript (by injecting this script from the server where you obtain the URL)
Generally when you need to load content on demand in tooltips I would recommend using the RadToolTipManager. In its AjaxUpdate event you can dynamically add controls to its update panel as shown in this online demo: http://demos.telerik.com/aspnet-ajax/tooltip/examples/loadondemand/defaultcs.aspx. The benefit here is that the AJAX is handled internally and you only need to create the image and add it to the manager's update panel's content template.
I have also attached a simple page where I add an image dynamically to the tooltip's controls and it is working as expected: http://screencast.com/t/pCvKlIsade.
On a side note - I would recommend setting the height as well in order to avoid some appearance issues like incorrect dimensions.
Greetings,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Neil
Top achievements
Rank 1
Rank 1
answered on 21 Sep 2011, 04:21 PM
Ok I now have it working ok.
I have set the 'ToolTip' and 'Alt' of the Image being set to the RadToolTip's TargetControlID to nothing i.e. blank. Tooltip="" and Alt="".
I then set a few attributes of the RadToolTip:
Title=""
Text=""
IgnoreAltAttribute="true"
and inserted a div around the image and set its size.
and the code behind looks like this, taking the string.format away and manually concat the url.
I have set the 'ToolTip' and 'Alt' of the Image being set to the RadToolTip's TargetControlID to nothing i.e. blank. Tooltip="" and Alt="".
I then set a few attributes of the RadToolTip:
Title=""
Text=""
IgnoreAltAttribute="true"
and inserted a div around the image and set its size.
<asp:Image ID="imgMain" runat="server"/>
<telerik:RadToolTip ID="RadToolTip2" RenderInPageRoot="true" runat="server" TargetControlID="imgMain" Width="372px" Height="392px"
RelativeTo="Mouse" EnableShadow="true" Position="BottomRight" Animation="Slide" ShowEvent="OnMouseOver" Title="" Text=""
AnimationDuration="300" ShowDelay="200" Skin="Vista" HideEvent="LeaveToolTip" IgnoreAltAttribute="true" >
<div style="width:376px; height:392px;">
<img id="uiImgLargePopUp" runat="server" alt="" src="" />
</div>
</telerik:RadToolTip>and the code behind looks like this, taking the string.format away and manually concat the url.
HtmlImage s = (HtmlImage)RadToolTip2.FindControl("uiImgLargePopUp");
s.Src = "/dbimagehandler.ashx?record=product&empty=showt&imageno=1&recno=-1&wid=376&hgt=392&productid=" + this.ProductId;