Is there a way to combine the use of XMLHttpPanel with an ajaxUpdated RadToolTip? I'm just updating the content of the tool tip and don't really need to do the ajax post back. Is there a way to utilize the xmlhttppanel's benefits with something as simple as the tool tip?
6 Answers, 1 is accepted
0
Accepted
Hi John,
Regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Yes, it is possible to integrate the RadXmlHttpPanel and RadToolTip so that you can load teh content of the tooltip by using a callback instead of an AJAX request. Actually, this is a very good scenario and we are also currently working on preparing an online demo about this. For the time being, in order to achieve what you need, you should hook up the OnClientBeforeShow event of the tooltip and call the set_value method of the RadXmlHttpPanel which is inside the tooltip.
As far as I understand, you are using a RadToolTipmanager - in this case you cammot directly pu the panel into the tooltip but you can easily achieve this by using the client - side API - take a look at the following code I prepared for you:
ASPX:
Code-Behind:
I hope that my reply is helpful, let me know how it goes.
As far as I understand, you are using a RadToolTipmanager - in this case you cammot directly pu the panel into the tooltip but you can easily achieve this by using the client - side API - take a look at the following code I prepared for you:
ASPX:
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <script type="text/javascript"> |
| function OnClientBeforeShow(sender, args) |
| { |
| var panel = $find("<%=panel.ClientID %>"); |
| sender.set_contentElement(panel.get_element()); |
| panel.set_value("myValue"); |
| } |
| </script> |
| <asp:HyperLink ID="target1" runat="server" Text="Target1"></asp:HyperLink> |
| <telerik:RadToolTipManager ID="manager1" runat="server" OnClientBeforeShow="OnClientBeforeShow"> |
| <TargetControls> |
| <telerik:ToolTipTargetControl TargetControlID="target1" /> |
| </TargetControls> |
| </telerik:RadToolTipManager> |
| <div style="display: none"> |
| <telerik:RadXmlHttpPanel ID="panel" runat="server" OnServiceRequest="OnServiceRequest"> |
| <asp:Label ID="lbl" runat="server"></asp:Label> |
| </telerik:RadXmlHttpPanel> |
| </div> |
| </form> |
| </body> |
| </html> |
Code-Behind:
| protected void OnServiceRequest(object sender, RadXmlHttpPanelEventArgs e) |
| { |
| lbl.Text = e.Value; |
| } |
I hope that my reply is helpful, let me know how it goes.
Regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
John
Top achievements
Rank 1
Rank 1
answered on 16 Sep 2009, 03:06 PM
Cool that works great! Thanks so much.
And I'm sure you already know this, but the LoadingPanel with XMLHttpPanel only works properly in IE7, in the wrong spot in FF, and errors out in IE8 and Chrome 3.0
0
Hello John,
I prepared a sample project, attached to this post, in order to investigate the described issue. However the loading panel displays properly in all browsers. Check you check it on your end and let me know what differs in your case?
Best wishes,
Iana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
I prepared a sample project, attached to this post, in order to investigate the described issue. However the loading panel displays properly in all browsers. Check you check it on your end and let me know what differs in your case?
Best wishes,
Iana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
John
Top achievements
Rank 1
Rank 1
answered on 18 Sep 2009, 02:41 PM
I haven't loaded your example yet, but on the online demo: http://demos.telerik.com/aspnet-ajax/xmlhttppanel/examples/loadingpanelid/defaultcs.aspx in chrome for me I get a javascript error: Uncaught Type Error: Cannot call method 'toLowerCase' of undefined
my chrome javascript console points the error to the line of var d=b.tagName.toLowerCase();
| Telerik.Web.UI.EventMap.prototype={initialize:function(a,b){this._owner=a; |
| if(!b){b=this._owner.get_element() |
| }this._element=b |
| },skipElement:function(c,f){var b=c.target; |
| var d=b.tagName.toLowerCase(); |
| var a=b.className; |
| if(d=="select"){return true |
| }if(d=="option"){return true |
| }if(d=="a"&&(!f||a.indexOf(f)<0)){return true |
| }if(d=="input"){return true |
| }if(d=="textarea"){return true |
| }if(d=="button"){return true |
| }return false |
| },dispose:function(){if(this._onDomEventDelegate){for(var c in this._eventMap){if(this._shouldUseEventCapture(c)){var a=this._browserHandlers[c]; |
| this._element.removeEventListener(c,a,true) |
| }else{$removeHandler(this._element,c,this._onDomEventDelegate) |
| }}this._onDomEventDelegate=null; |
| var d=true; |
| if(this._element._events){for(var b in this._element._events){if(this._element._events[b].length>0){d=false; |
| break |
| }}if(d){this._element._events=null |
| }}}},addHandlerForClassName:function(e,b,a){if(typeof(this._eventMap[e])=="undefined"){this._eventMap[e]={}; |
| if(this._shouldUseEventCapture(e)){var g=this._getDomEventDelegate(); |
| var d=this._element; |
| var c=function(h){return g.call(d,new Sys.UI.DomEvent(h)) |
| }; |
and in firefox I get this image: http://northstar.kdna.com/errorcapture.png notice the loading panel doesn't cover the image and is in a weird spot. Do you not see the same thing in your firefox?
IE 8 running in IE7 compatibility mode, it works perfect. Not in compatibility mode its similar to the FF bug, in that the loading panel isn't positioned properly.
0
John
Top achievements
Rank 1
Rank 1
answered on 18 Sep 2009, 03:13 PM
Your example code I do not get the errors to occur but they do occur on the online demo.
Using the code above along with the loading panel, I do not see the loading panel appear in the tool tip. Am I missing something?
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title></title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <script type="text/javascript"> |
| function OnClientBeforeShow(sender, args) |
| { |
| var panel = $find("<%=panel.ClientID %>"); |
| sender.set_contentElement(panel.get_element()); |
| panel.set_value("myValue"); |
| } |
| </script> |
| <asp:HyperLink ID="target1" runat="server" Text="Target1"></asp:HyperLink> |
| <telerik:RadToolTipManager AutoTooltipify="false" runat="server" ShowEvent="OnMouseOver" ID="RadToolTipManager1" |
| Skin="Vista" OnClientBeforeShow="OnClientBeforeShow" ContentScrolling="Auto" Position="BottomCenter" Width="300px" Height="250px" OffsetX="20" Animation="Fade" Sticky="true"> |
| <TargetControls> |
| <telerik:ToolTipTargetControl TargetControlID="target1" /> |
| </TargetControls> |
| </telerik:RadToolTipManager> |
| <div style="display: none"> |
| <telerik:RadXmlHttpPanel ID="panel" runat="server" OnServiceRequest="OnServiceRequest" LoadingPanelID="RadAjaxLoadingPanel1"> |
| <asp:Label ID="lbl" runat="server"></asp:Label> |
| </telerik:RadXmlHttpPanel> |
| </div> |
| <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista"></telerik:RadAjaxLoadingPanel> |
| </form> |
| </body> |
| </html> |
| using System; |
| using System.Collections.Generic; |
| using System.Linq; |
| using System.Web; |
| using System.Web.UI; |
| using System.Web.UI.WebControls; |
| using Telerik.Web.UI; |
| public partial class Default2 : System.Web.UI.Page |
| { |
| protected void Page_Load(object sender, EventArgs e) |
| { |
| } |
| protected void OnServiceRequest(object sender, RadXmlHttpPanelEventArgs e) |
| { |
| System.Threading.Thread.Sleep(1000); |
| lbl.Text = e.Value; |
| } |
| } |
| |
0
Hi John,
The AjaxLoadingPanel is shown over the RadXmlHttpPanel while the "old" content in the XmlHttpPanel is still present and a partial update is in process (before it has finished). This means if the XmlHttpPanel does not have any content before the panel.set_value() method is called the LoadingPanel will not be shown. This is happening in your case. The XmlHttpPanel has content before the panel.set_value() method is called, but the ToolTipManager's set_contentElement() method erases any previous content before it loads new content (therefore erasing the HTML of the RadXmlHttpPanel) and the LoadingPanel is not shown because there is no content over which it will be shown. I modified the code so that only on the first show the set_contentElement() method is called. Also, I have set some Text to the Label, which ensures that the LoadingPanel is shown on the first tooltip show. Here is the modified project:
.aspx
.cs
Sincerely yours,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
The AjaxLoadingPanel is shown over the RadXmlHttpPanel while the "old" content in the XmlHttpPanel is still present and a partial update is in process (before it has finished). This means if the XmlHttpPanel does not have any content before the panel.set_value() method is called the LoadingPanel will not be shown. This is happening in your case. The XmlHttpPanel has content before the panel.set_value() method is called, but the ToolTipManager's set_contentElement() method erases any previous content before it loads new content (therefore erasing the HTML of the RadXmlHttpPanel) and the LoadingPanel is not shown because there is no content over which it will be shown. I modified the code so that only on the first show the set_contentElement() method is called. Also, I have set some Text to the Label, which ensures that the LoadingPanel is shown on the first tooltip show. Here is the modified project:
.aspx
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head id="Head1" runat="server"> |
| <title></title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <script type="text/javascript"> |
| var isFirstShow = true; |
| function OnClientBeforeShow(sender, args) |
| { |
| var panel = $find("<%=panel.ClientID %>"); |
| if (isFirstShow) |
| { |
| sender.set_contentElement(panel.get_element()); |
| isFirstShow = false; |
| } |
| panel.set_value("Set New Content for the ToolTip"); |
| } |
| </script> |
| <asp:HyperLink ID="target1" runat="server" Text="Target1"></asp:HyperLink> |
| <telerik:RadToolTipManager AutoTooltipify="false" runat="server" ShowEvent="OnMouseOver" |
| ID="RadToolTipManager1" Skin="Vista" OnClientBeforeShow="OnClientBeforeShow" |
| ContentScrolling="Auto" Position="BottomCenter" OffsetX="20" Sticky="true"> |
| <TargetControls> |
| <telerik:ToolTipTargetControl TargetControlID="target1" /> |
| </TargetControls> |
| </telerik:RadToolTipManager> |
| <telerik:RadXmlHttpPanel ID="panel" runat="server" OnServiceRequest="OnServiceRequest" |
| LoadingPanelID="RadAjaxLoadingPanel1" Height="50px" Width="200px"> |
| <asp:Label ID="lbl" runat="server" Text="[Text for testing purposes only]"></asp:Label> |
| </telerik:RadXmlHttpPanel> |
| <br /> |
| <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista"> |
| </telerik:RadAjaxLoadingPanel> |
| </form> |
| </body> |
| </html> |
.cs
| using System; |
| using System.Collections.Generic; |
| using System.Linq; |
| using System.Web; |
| using System.Web.UI; |
| using System.Web.UI.WebControls; |
| using Telerik.Web.UI; |
| public partial class _Default : System.Web.UI.Page |
| { |
| protected void Page_Load(object sender, EventArgs e) |
| { |
| } |
| protected void OnServiceRequest(object sender, RadXmlHttpPanelEventArgs e) |
| { |
| System.Threading.Thread.Sleep(1000); |
| lbl.Text = e.Value; |
| } |
| } |
Sincerely yours,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.