ToolTip - RadToolTip for RadCalendar

April, 2012
April, 2012
 SMTWTFS
1325262728293031
141234567
15891011121314
1615161718192021
1722232425262728
18293012345
April, 2012
April, 2012
 SMTWTFS
1325262728293031
141234567
15891011121314
1615161718192021
1722232425262728
18293012345
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadCalendar with Load On Demand RadToolTip

A common scenario is to display rich tooltips for certain dates in a RadCalendar. Here is how to achieve that using RadToolTipManager and RadCalendar. The example shows two independent approaches to obtain the same end result.

Approach #1 associates RadCalendar dates with the RadToolTipManager on the server by adding those to the RadToolTipManager's TargetControls collection. Since RadCalendar cells do not have ID attribute set by default, this should be added to their Attributes collection.

Approach #2 relies on the client-side API of RadToolTipManager. For each cell an onmouseover handler is attached that will create and show a tooltip for that particular cell. The tooltips' content is loaded on demand through an AJAX call.

Radlendar1 calendar is tooltipified by adding target controls on the server and Radlendar2 calendar is tooltipified by using the RadToolTipManager client-side API.
  • DefaultCS.aspx
  • AppointmentDetails.ascx
    • AppointmentDetails.ascx
    • AppointmentDetailsCS.ascx
  • AppointmentDetails.ascx.cs
    • AppointmentDetails.ascx.cs
    • AppointmentDetailsCS.ascx.cs
    • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="c#" EnableViewStateMac="false" ViewStateEncryptionMode="Never"    CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.ToolTipCalendar.DefaultCS" %>

<%@ Register Src="AppointmentDetailsCS.ascx" TagName="AppointmentDetails" TagPrefix="uc1" %>
<!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>
    <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-containers">
        <div class="demo-container size-medium">
            <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" Width="300" Height="300" RangeMinDate="4/1/2012"
                runat="server" OnDayRender="RadCalendar1_DayRender" RangeMaxDate="4/30/2012">
            </telerik:RadCalendar>
            <telerik:RadToolTipManager RenderMode="Lightweight" Width="250px" Height="310px" RelativeTo="Element" ID="RadToolTipManager1"
                runat="server" OffsetX="15" Position="MiddleRight" OnAjaxUpdate="RadToolTipmanager1_AjaxUpdate">
            </telerik:RadToolTipManager>
        </div>
        <div class="demo-container size-medium">
            <telerik:RadToolTipManager RenderMode="Lightweight" Width="250px" Height="310px" HideDelay="1"
                RelativeTo="Element" ID="RadToolTipManager2" runat="server" OffsetX="15" Position="MiddleRight"
                OnAjaxUpdate="RadToolTipmanager1_AjaxUpdate">
            </telerik:RadToolTipManager>
            <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar2" RangeMinDate="4/1/2012" runat="server" Width="300"
                Height="300" OnDayRender="RadCalendar2_DayRender" RangeMaxDate="4/30/2012">
            </telerik:RadCalendar>
        </div>
    </div>
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            //<![CDATA[
            serverID("tooltipManagerID", "<%=RadToolTipManager2.ClientID %>");
            //]]>
        </script>
    </telerik:RadCodeBlock>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?