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

How do you display an html string in the tooltip?

5 Answers 601 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
T F
Top achievements
Rank 1
T F asked on 11 May 2010, 08:23 PM
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...

5 Answers, 1 is accepted

Sort by
0
Petio Petkov
Telerik team
answered on 12 May 2010, 04:34 PM
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.
0
T F
Top achievements
Rank 1
answered on 12 May 2010, 04:43 PM
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
0
Petio Petkov
Telerik team
answered on 13 May 2010, 03:56 PM
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.
0
T F
Top achievements
Rank 1
answered on 13 May 2010, 07:44 PM
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
0
Petio Petkov
Telerik team
answered on 14 May 2010, 03:26 PM
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.
Tags
ToolTip
Asked by
T F
Top achievements
Rank 1
Answers by
Petio Petkov
Telerik team
T F
Top achievements
Rank 1
Share this question
or