Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

ToolTip - RadToolTipManager Client-side Events

Click on the person's photo to view his/her details:

  PhotoCompany NameContact Name
Data pager
Data pager
Page size:
 20 items in 4 pages
Ana Trujillo Emparedados y heladosAna Trujillo
Antonio Moreno TaqueríaAntonio Moreno
Bottom-Dollar MarketsElizabeth Lincoln
Cactus Comidas para llevarPatricio Simpson
Centro comercial MoctezumaFrancisco Chang
Ernst HandelRoland Mendel

Note: The changes in the data will be persisted per Session only. The data will be reset next time you visit the page.

OnClientResponseEnd event

The RadToolTipManager control introduces OnClientResponseEnd event which gets fired immediately after the response from a WebService or an AJAX request is performed. This provides an opportunity to make changes just before the content of the tooltip is displayed. The sender in the event parameters is the RadToolTipManager control and therefore the active tooltip should be referenced by using the client-side API as shown below:

function OnClientResponseEnd(sender, args)
//NOTE: The sender is the RadToolTipManager
var current = Telerik.Web.UI.RadToolTip.getCurrent();

This example demonstrates one simple usage of this event - it makes the tooltip modal while person's details are examined and this prevents the user to edit the person's details meanwhile which would lead to incorrect information and additional problems.

Updated: The example shows also the new OnClientRequestStart event which is fired when the call to the WebService or the AJAX request starts. The event is cancelable so you can cancel the call after first show and use the cached content if no new call is needed. The control also now supports OnClientResponseError event which is used to control the behavior when an error has occured

Show code in new window Demo isolation steps
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.OnClientResponseEnd.DefaultCS" %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Client-side Events in ASP.NET ToolTip Manager control</title>
     <link rel="Stylesheet" type="text/css" href="Styles.css" />
     <script src="Scripts.js" type="text/javascript"></script>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
          Click on the person's photo to view his/her details:
     <div style="height: 32px;">
          <div style="float: left; margin: 5px 0 0 8px;">
               <span id="startRequest" style="font-size: 13px; font-weight: bold; color: red; display: none;">
                    RadToolTip WebService/AJAX Request Started</span> <span id="endRequest" style="font-size: 13px;
                         font-weight: bold; color: Blue; display: none;">RadToolTip WebService/AJAX Request
     <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
          <telerik:RadToolTipManager ID="RadToolTipManager1" OnClientRequestStart="OnClientRequestStart"
               OnClientResponseEnd="OnClientResponseEnd" runat="server" Position="BottomCenter"
               Width="480px" Height="230px" HideEvent="LeaveToolTip" RelativeTo="Element" ShowEvent="OnClick">
               <WebServiceSettings Method="GetToolTipDataTimeout" Path="ToolTipWebService.asmx">
          <!-- content start -->
          <telerik:RadGrid ID="RadGrid1" GridLines="None" Width="500" runat="server" AllowAutomaticDeletes="True"
               PageSize="6" AllowAutomaticUpdates="True" AllowPaging="True" AutoGenerateColumns="False"
               DataSourceID="SessionDataSource1" OnItemDataBound="RadGrid1_ItemDataBound" OnPageIndexChanged="RadGrid1_PageIndexChanged">
               <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
               <MasterTableView DataKeyNames="CustomerID" DataSourceID="SessionDataSource1" AutoGenerateColumns="False">
                         <telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderStyle-Width="25" UniqueName="EditCommandColumn">
                              <ItemStyle CssClass="MyImageButton"></ItemStyle>
                         <telerik:GridButtonColumn ButtonType="ImageButton" HeaderStyle-Width="25" CommandName="Delete"
                              Text="Delete" UniqueName="DeleteColumn">
                              <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
                         <telerik:GridTemplateColumn HeaderText="Photo" HeaderStyle-HorizontalAlign="Center"
                              HeaderStyle-Width="70" SortExpression="UnitPrice" UniqueName="TemplateColumn">
                                   <div style="float: left" id="smallImage" runat="server">
                                        <div style="border: 1px solid #999999; margin: 5px; width: 70px; height: 90px; background-position: center;
                                             background-repeat: no-repeat; background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/Thumbs/{0}.jpg") %>');">
                         <telerik:GridBoundColumn DataField="CustomerID" HeaderText="ID" ReadOnly="True" UniqueName="CustomerID"
                              <HeaderStyle Width="20px" ForeColor="Silver"></HeaderStyle>
                              <ItemStyle ForeColor="Silver"></ItemStyle>
                         <telerik:GridBoundColumn DataField="CompanyName" HeaderStyle-Width="180" ItemStyle-Width="180"
                              ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" HeaderText="Company Name"
                         <telerik:GridBoundColumn DataField="ContactName" HeaderStyle-Width="100" ItemStyle-Width="100"
                              ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" HeaderText="Contact Name"
          </telerik:RadGrid><br />
          <sds:SessionDataSource ID="SessionDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
               ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Customers] 
                    WHERE Country = 'Argentina' OR Country = 'Austria' OR Country = 'Belgium' OR 
                    Country = 'Canada' OR Country = 'Denmark' OR Country = 'Finland' OR Country = 'Mexico'
                    OR Country = 'Norway'" DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = ?"
               UpdateCommand="UPDATE [Customers] SET [CompanyName] = ?, [ContactName] = ? WHERE [CustomerID] = ?"
               PrimaryKeyFields="CustomerID" OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues">
                    <asp:Parameter Name="original_CustomerID" Type="Int32"></asp:Parameter>
                    <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                    <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>