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

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

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>
<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>

Support & Learning Resources

Find Assistance