ToolTip - RadToolTipManager Client-side Events

Next database reset in 0 hours, 31 minutes, 17 seconds
  PhotoCompany NameContact Name
Data pager
Data pager
Page size:
PageSizeComboBox
select
 19 items in 4 pages
Antonio Moreno TaqueríaAntonio Moreno
Bottom-Dollar MarketsElizabeth Lincoln
Cactus Comidas para llevarPatricio Simpson
Centro comercial MoctezumaFrancisco Chang
Ernst HandelRoland Mendel
Laughing Bacchus Wine CellarsYoshi Tannamuri

Isolate this demo as a stand-alone application

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();
    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:
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.OnClientResponseEnd.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />
    <div class="demo-container size-narrow">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadToolTipManager ID="RadToolTipManager1" OnClientRequestStart="OnClientRequestStart"
                OnClientResponseEnd="OnClientResponseEnd" runat="server" Position="BottomCenter" Style="z-index: 101000"
                Width="480px" Height="230px" HideEvent="LeaveToolTip" RelativeTo="Element" ShowEvent="OnClick">
                <WebServiceSettings Method="GetToolTipDataTimeout" Path="ToolTipWebService.asmx"></WebServiceSettings>
            </telerik:RadToolTipManager>
            <!-- content start -->
            <telerik:RadGrid ID="RadGrid1" GridLines="None" Width="500" 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>

Find Assistance

Help Us Improve

Was this example helpful?