Rad Tool Tip and XMLHttpPanel

7 posts, 1 answers
  1. John
    John avatar
    88 posts
    Member since:
    Nov 2007

    Posted 11 Sep 2009 Link to this post

    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?
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Sep 2009 Link to this post

    Hi John,

    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:

    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    88 posts
    Member since:
    Nov 2007

    Posted 16 Sep 2009 Link to this post

    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
  5. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 18 Sep 2009 Link to this post

    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.
  6. John
    John avatar
    88 posts
    Member since:
    Nov 2007

    Posted 18 Sep 2009 Link to this post

    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.


  7. John
    John avatar
    88 posts
    Member since:
    Nov 2007

    Posted 18 Sep 2009 Link to this post

    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; 
        }  
     

  8. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 23 Sep 2009 Link to this post

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