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

RadToolTipManager Client-side Events

Next database reset in 1 hours, 2 minutes, 10 seconds
Click on a photo to see how the tooltip blocks the page while loading content. The modality is removed when the response is received.
  PhotoCompany NameContact Name
No records to display.

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();
    if(current) {
        current.set_modal(false);
    }
}

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

Click on the person's photo to view his/her details:
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • Scripts.js
  • Styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ToolTip.OnClientResponseEnd.DefaultVB" %>

<%@ 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" />
    <script src="Scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox runat="server" ID="MessageBox1">Click on a photo to see how the tooltip blocks the page while loading content. The modality is removed when the response is received.</qsf:MessageBox>
    <div class="demo-container size-wide">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" OnClientRequestStart="OnClientRequestStart"
                OnClientResponseEnd="OnClientResponseEnd" runat="server" Position="BottomCenter" Style="z-index: 101000"
                Width="480px" Height="240px" HideEvent="LeaveToolTip" RelativeTo="Element" ShowEvent="OnClick" OffsetY="-15">
                <WebServiceSettings Method="GetToolTipDataTimeout" Path="ToolTipWebService.asmx"></WebServiceSettings>
            </telerik:RadToolTipManager>
            <!-- content start -->
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" GridLines="None" Width="100%" runat="server" AllowAutomaticDeletes="True"
                PageSize="6" AllowAutomaticUpdates="True" AllowPaging="True" AutoGenerateColumns="False"
                DataSourceID="SqlDataSource1" OnItemDataBound="RadGrid1_ItemDataBound" OnPageIndexChanged="RadGrid1_PageIndexChanged">
                <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
                <MasterTableView DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" AutoGenerateColumns="False">
                    <Columns>
                        <telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderStyle-Width="25" UniqueName="EditCommandColumn">
                            <ItemStyle CssClass="MyImageButton"></ItemStyle>
                        </telerik:GridEditCommandColumn>
                        <telerik:GridButtonColumn ButtonType="ImageButton" HeaderStyle-Width="25" CommandName="Delete"
                            Text="Delete" UniqueName="DeleteColumn">
                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
                        </telerik:GridButtonColumn>
                        <telerik:GridTemplateColumn HeaderText="Photo" HeaderStyle-HorizontalAlign="Center"
                            HeaderStyle-Width="70" SortExpression="UnitPrice" UniqueName="TemplateColumn">
                            <ItemTemplate>
                                <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") %>');">
                                    </div>
                                </div>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="CustomerID" HeaderText="ID" ReadOnly="True" UniqueName="CustomerID"
                            Visible="False">
                            <HeaderStyle Width="20px" ForeColor="Silver"></HeaderStyle>
                            <ItemStyle ForeColor="Silver"></ItemStyle>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="CompanyName" HeaderStyle-Width="180" ItemStyle-Width="180"
                            ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" HeaderText="Company Name"
                            UniqueName="CompanyName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ContactName" HeaderStyle-Width="100" ItemStyle-Width="100"
                            ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" HeaderText="Contact Name"
                            UniqueName="ContactName">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid><br />
            <asp:SqlDataSource ID="SqlDataSource1" 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] = @CustomerID"
                UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName WHERE [CustomerID] = @CustomerID">
                <DeleteParameters>
                    <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
                </DeleteParameters>
                <UpdateParameters>
                    <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
                    <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
                    <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
                </UpdateParameters>
            </asp:SqlDataSource>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance