Click on the person's photo to view his/her details:
RadToolTip WebService/AJAX Request Started RadToolTip WebService/AJAX Request
Ended
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();
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
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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>ASP.NET ToolTip Demo - OnClientResponseEnd Event</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="QsfSkinManager" runat="server" ShowChooser="true" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
<p>
Click on the person's photo to view his/her details:
</p>
<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
Ended</span>
</div>
</div>
<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">
</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="SessionDataSource1" OnItemDataBound="RadGrid1_ItemDataBound" OnPageIndexChanged="RadGrid1_PageIndexChanged">
<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
<MasterTableView DataKeyNames="CustomerID" DataSourceID="SessionDataSource1" 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 />
<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">
<DeleteParameters>
<asp:Parameter Name="original_CustomerID" Type="Int32"></asp:Parameter>
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
<asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
</UpdateParameters>
</sds:SessionDataSource>
</telerik:RadAjaxPanel>
</form>
</body>
</html>