New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WCF Web Service

This example demonstrates how RadToolTipManager can be used with a WCF WebService to retrieve customer information from the NorthWind database.

RadToolTipManager can load data on demand from a WCF Web Service since Q2 2014 SP1. The service must return the required HTML string and it receives an argument that defines the target element - by its ID and the Value property associated with it.

To configure the WCF Web Service call, simply set the Path and Method properties under WebServiceSettings to the desired *.svc file and to the method that needs to be called.

The context object that defines the target is a Dictionary and you can create a simple class to access the information:

[OperationContract]
public string TheWcfServiceMethod(ToolTipContext context)
{
     string theValue = context.Value;
     string theTargetId = context.TargetControlID;
     return "the desired content" ;
}

where the ToolTipContext class can implement the dictionary for you:

[Serializable]
public class ToolTipContext : Dictionary< string , object >
{
     public string Value
     {
         get { return ( string ) this [ "Value" ]; }
         set { this [ "Value" ] = value; }
     }
 
     public string TargetControlID
     {
         get { return ( string ) this [ "TargetControlID" ]; }
         set { this [ "TargetControlID" ] = value; }
     }
}

The LiveDemos folder (in your installation directory) contains the full code of the examples and once you open the solution you can find the full code of the webservice (ultimately in the ~/App_Code/ToolTipWcfService.cs file).

Mouseover the images below to view detailed information about each person.
  • DefaultCS.aspx
  • CustomerInfo.ascx
  • CustomerInfo.ascx.cs
    • CustomerInfo.ascx.cs
    • DefaultCS.aspx.cs
    • TooltipWcfService.cs
  • Styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.WCF_Web_Service.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" Position="BottomCenter" HideEvent="ManualClose"
        Animation="Fade" Width="430px" Height="250px" RelativeTo="Element">
        <WebServiceSettings Method="GetCustomerInfo" Path="TooltipWcfService.svc"></WebServiceSettings>
    </telerik:RadToolTipManager>
    <div class="demo-container no-bg">
        <div class="mainRepeaterHolder">
            <div class="innerRepeaterHolder">
                <asp:Repeater runat="server" ID="itemsRepeater" DataSourceID="SqlDataSource1" OnItemDataBound="ItemsRepeater_ItemDataBound">
                    <ItemTemplate>
                        <div class="repeaterItem" id="smallImage" runat="server">
                            <div style="background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>');">
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID FROM [Customers] 
            WHERE Country = 'Austria' OR Country = 'Belgium' OR 
            Country = 'Canada' OR Country = 'Denmark' OR Country = 'Finland' OR Country = 'Mexico'"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance