How do you display an html string in the tooltip?

6 posts, 0 answers
  1. T F
    T F avatar
    8 posts
    Member since:
    May 2010

    Posted 11 May 2010 Link to this post

    I have a web service which will return an html string to the tooltip panel.  The tooltip panel does not render html but simply displays the string.  How can I get the panel to render the html string?  
    Thanks!
     
    RadTooltipManager

    <

     

     

    rad:RadToolTipManager ID="RadToolTipManager1" OffsetY="-1" Width="250" Height="350" runat="server" Position="MiddleRight" Sticky="true" Skin="Web20">

     

     

     

    <WebServiceSettings Path="../ToolTip.asmx" Method="SbuDetailHtml" />

     

    </

     

     

    rad:RadToolTipManager>

     



    onMouseOver

    <

     

     

    a href="#" runat="server" id="hyp" onmouseover="ShowSBUToolTip(this)" sbuid="104">RPTT Detail</a>

     



    Javascript

    function

     

     

    ShowSBUToolTip(element) {

     

     

     

    var tooltipManager = $find("mgr_gwpctGrid_ctGrid_RadToolTipManager1");

     

     

     

    var sbuid = element.getAttribute("sbuid");

     

     

     

     

    //If the user hovers the image before the page has loaded, there is no manager created

     

     

     

    if (!tooltipManager) return;

     

     

     

    //Find the tooltip for this element if it has been created

     

     

     

    var tooltip = tooltipManager.getToolTipByElement(element);

     

     

     

    //Create a tooltip if no tooltip exists for such element

     

     

     

    if (!tooltip) {

     

    tooltip = tooltipManager.createToolTip(element);

    tooltip.set_value(sbuid);

     

    }

     

     

    //Let the tooltip's own show mechanism take over from here - execute the onmouseover just once

     

    element.onmouseover =

     

    null;

     

     

     

    //show the tooltip

     

    tooltip.show();

    }

    Web Service Method

     

    [

     

    WebMethod]

     

     

     

    public String SbuDetailHtml(object context)

     

    {

     

     

    IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context;

     

     

     

    string sbuid = ((string)contextDictionary["Value"]);

     

     

     

    String _rtnStr = String.Empty;

     

     

     

    String _urlStr = String.Format("http://localhost:8082/portfolio/sbudetail.aspx?id={0}", sbuid);

     

     

     

    HttpWebRequest _request = (HttpWebRequest)WebRequest.Create(_urlStr);

     

     

     

    Char[] _read = new Char[256];

     

    _request.Credentials = System.Net.

     

    CredentialCache.DefaultNetworkCredentials;

     

    _request.PreAuthenticate =

     

    true;

     

    _request.UserAgent = _request.UserAgent;

     

     

    HttpWebResponse _response = (HttpWebResponse)_request.GetResponse();

     

     

     

    Stream resStream = _response.GetResponseStream();

     

     

     

    Encoding encode = System.Text.Encoding.GetEncoding("utf-8");

     

     

     

    StreamReader readStream = new StreamReader(resStream, encode, true, 2000);

     

     

     

    Int32 count = readStream.Read(_read, 0,_read.Length);

     

     

     

    String str = Server.HtmlEncode(" ");

     

     

     

    while (count > 0)

     

    {

     

     

    // Dumps the 256 characters on a string and displays the string to the console.

     

     

     

     

     

     

     

    String strRead = new String(_read, 0, count);

     

    str = str.Replace(str, str + Server.HtmlEncode(strRead.ToString()));

    count = readStream.Read(_read, 0, 256);

    }

     

     

     

    // return what was found

     

     

     

     

     

    _rtnStr = str.ToString();

    resStream.Close();

    readStream.Close();

     

     

    return _rtnStr;

     

    }

     

     

    Tooltip panel does not render html, but simply displays the string...

  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 12 May 2010 Link to this post

    Hi T F,

    Once the response is received then we add it to the RadToolTip's content div with the following code:
    div.innerHTML = response;

    The following code:
    [WebMethod]
       public String SbuDetailHtml(object context)
       {
           string value;
           string regular = "regular<br/>regular<H1>regular</H1>";
           string encoded = Server.HtmlEncode("encoded<br/>encoded<H1>encoded</H1>");
           return value = regular + encoded;
       }
    will display:

    regular
    regular

    regular

    encoded<br/>encoded<H1>encoded</H1>

    Hope this helps.

    Greetings,
    Petio Petkov
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. T F
    T F avatar
    8 posts
    Member since:
    May 2010

    Posted 12 May 2010 Link to this post

    Hello Petio -
    Can you send a sample of the client code?  Including waiting for response?  I simply have this right now.

    function

     

     

    ShowSBUToolTip(element) {

     

     

     

    var tooltipManager = $find("mgr_gwpctGrid_ctGrid_RadToolTipManager1");

     

     

     

    var sbuid = element.getAttribute("sbuid");

     

     

     

     

    //If the user hovers the image before the page has loaded, there is no manager created

     

     

     

    if (!tooltipManager) return;

     

     

     

    //Find the tooltip for this element if it has been created

     

     

     

    var tooltip = tooltipManager.getToolTipByElement(element);

     

     

     

    //Create a tooltip if no tooltip exists for such element

     

     

     

    if (!tooltip) {

     

    tooltip = tooltipManager.createToolTip(element);

    tooltip.set_value(sbuid);

     

    }

     

     

    //Let the tooltip's own show mechanism take over from here - execute the onmouseover just once

     

    element.onmouseover =

     

    null;

     

     

     

    //show the tooltip

     

    tooltip.show();

    }



    Thanks
    TF
  5. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 13 May 2010 Link to this post

    Hello T F,

    Please find the attached an example, which was used for the test in my previous reply.
    Let us know if you have any other question.

    Greetings,
    Petio Petkov
    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.
  6. T F
    T F avatar
    8 posts
    Member since:
    May 2010

    Posted 13 May 2010 Link to this post

    Hi Petio  -
    I believe this is the same sample that is posted online and available from the install.  What I'm looking for is the javascript function response from the web service.  You mentioned that "div.innerHTML = response".  Where does that get set in the javascript?  In other words, what the does the results javascript function look like?
    Thanks
    TF
  7. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 14 May 2010 Link to this post

    Hi,

    The method's name is _onWebServiceResponse. The code below is its definition:
    <script type="text/javascript">
        Telerik.Web.UI.RadToolTipManager.prototype._onWebServiceResponse = function (sender, eventArgs)
                {
                      
                    //Render result sent by the webservice
                    var html = eventArgs.get_data();
      
                    //Set tooltip content
                    var div = document.createElement("div");
      
                    //Check and make sure there is a tooltip updated by the service
                    if (this._currentServicedToolTip)
                    
                        this._currentServicedToolTip.set_contentElement(div);
                        div.innerHTML = html;
                    }
                    this.raiseEvent('requestEnd');
                }
        </script>

    Hope this helps.

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