| RadControls version |
Q1 2011 or higher
|
| .NET version |
4.0
|
| Visual Studio version |
2010
|
| programming language |
C# and VB.NET |
| browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
This project demonstrates how to implement entirely client-side showing RadToolTip on appointment click. The content of the tooltip is populated with the client API of the appointment object.
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function OnClientAppointmentClick(sender, args) {
var apt = args.get_appointment();
showTooltip(apt);
}
function showTooltip(apt) {
var tooltip = $find('<%=RadToolTip1.ClientID %>');
tooltip.set_targetControl(apt.get_element());
$get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");
$get("endTime").innerHTML = apt.get_end().format("MM/dd/yyyy HH:mm");
$get("descriptionDiv").innerHTML = apt.get_subject();
tooltip.set_text($get("contentContainer").innerHTML);
setTimeout(function () {
tooltip.show();
}, 20);
}
function hideTooltip() {
setTimeout(function () {
var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
if (activeTooltip)
{ activeTooltip.hide();}
}, 50);
}
</script>
</telerik:RadCodeBlock>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedDate="2011/11/01"
SelectedView="MonthView" OnClientAppointmentDoubleClick="hideTooltip" OnClientAppointmentContextMenu="hideTooltip"
OnClientAppointmentClick="OnClientAppointmentClick" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
OnClientRecurrenceActionDialogShowing="hideTooltip"
>
<AdvancedForm Modal="true" />
</telerik:RadScheduler>
<telerik:RadToolTip ID="RadToolTip1" runat="server" RelativeTo="Element" Position="BottomCenter"
AutoCloseDelay="0" ShowEvent="FromCode" Width="250px" >
<div id="contentContainer">
Starts on: <span id="startTime"></span>
<br />
Ends on: <span id="endTime"></span>
<hr />
Description:
<div id="descriptionDiv">
</div>
</div>
</telerik:RadToolTip>
</telerik:RadAjaxPanel>