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

Web Service

This example shows how to dynamically set the content of the RadToolTip, the RadToolTip manager is about to open. This is an alternative of the Load On Demand mechanism, however, in this case we use a WebService.

The path to the web service and the name of the service method are specified in the WebServiceSettings' Path and Method properties.

In order to use the integrated support, the web service should have the following signature (including the parameter name - context):

[ScriptService]
public class WebServiceName : WebService
{
    [WebMethod]
    public string WebServiceMethodName(object context)
    {
        // We cannot use a dictionary as a parameter, because it is only supported by script services.
        // The context object should be cast to a dictionary at runtime.
        IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context;
 
        //how to use the dictionary:
        //get the value associated with the target control
        string tooltipValue = ((string)contextDictionary["Value"]);
        //gets the target control's ID
        string targetID = ((string)contextDictionary["TargetControlID"]);
 
        //...
    }
}

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/ToolTipWebService.cs file).

  • DefaultCS.aspx
  • CustomerInfo.ascx
  • CustomerInfo.ascx.cs
    • CustomerInfo.ascx.cs
    • DefaultCS.aspx.cs
    • ToolTipWebService.cs
  • Styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.WebService.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"
        Animation="Fade" Width="430px" Height="250px" Style="font-size: 18px; text-align: center; font-family: Arial;"
        RelativeTo="Element">
        <WebServiceSettings Method="GetToolTipData" Path="ToolTipWebService.asmx"></WebServiceSettings>
    </telerik:RadToolTipManager>
    <div class="demo-container no-bg">
        <div style="background: url('Images/main_back.png') no-repeat; padding: 26px;">
            <div class="inner">
                <asp:Repeater runat="server" ID="itemsRepeater" DataSourceID="SqlDataSource1" OnItemDataBound="ItemsRepeater_ItemDataBound">
                    <ItemTemplate>
                        <div style="float: left" id="smallImage" runat="server">
                            <div style="border: 1px solid #999999; margin: 5px; width: 90px; height: 110px; background-position: center; background-repeat: no-repeat; background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>');">
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            <asp:Label runat="server" ID="InfoLabel" Visible="false"></asp:Label>
        </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