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

Using RadToolTip

  • today
April 2012
April 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
4/15/2012 - 4/21/2012
  • Day
  • Week
  • Month
all day
8AM
​
9AM
​
10AM
​
11AM
​
12PM
​
1PM
​
2PM
​
3PM
​
4PM
​
5PM
​
test
test
test 1
Quisque vestibulum. Ut non pede. Suspendisse ligula neque, auctor in, facilisis mollis, eleifend a, lectus. Sed id orci ac tortor varius pretium. Sed lectus arcu, posuere id, venenatis nec, laoreet vitae, elit. Vestibulum fermentum viverra nisi. Quisque scelerisque, nisi eget sodales placerat, neque quam aliquet tortor, quis consequat lacus neque et lorem. Vestibulum sed magna. Phasellus turpis. Sed sed massa eget turpis scelerisque porttitor. Duis vestibulum commodo urna. Proin placerat. Phasellus cursus ante nec quam tristique facilisis.
test
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...

Starts on:
Ends on:

Description:

In this integration example RadToolTipManager is used to provide easily readable tooltips for the appointments with long descriptions. You can also use RadToolTip instead of RadToolTipManager for entirely client side implementation as shown in this code library sample .

SeverSide mode is recommended if you need to display complex content with server UI controls such as RadTabStrip or you need database interaction.

If you need to display a simple content you can cancel RadToolTipManager's OnClientRequestStart event and populate the tooltip via the client
API of RadScheduler and Appointment object as it already contains all the appointment data such as description, attributes, resources, start, etc.

  • DefaultCS.aspx
  • AppointmentToolTip.ascx
  • AppointmentToolTip.ascx.cs
    • AppointmentToolTip.ascx.cs
    • DefaultCS.aspx.cs
  • scripts.js
  • Styles.css
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Scheduler.Examples.RadToolTip.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Reference Control="AppointmentToolTip.ascx" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            /* <![CDATA[ */
            Sys.Application.add_load(function () {
                demo.scheduler = $find("<%= RadScheduler1.ClientID %>");
            });
            /* ]]> */
        </script>
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>
    <div class="demo-container">
        <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="demo-settings">
                    <asp:RadioButton ID="SeverSide" GroupName="ToolTipPopulation" Text="SeverSide" AutoPostBack="true"
                        runat="server" Checked="true" OnCheckedChanged="ToolTipPopulation_CheckedChanged" />
                    <asp:RadioButton ID="ClientSide" GroupName="ToolTipPopulation" Text="ClientSide" AutoPostBack="true" runat="server" OnCheckedChanged="ToolTipPopulation_CheckedChanged" />
                </div>
                <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1"
                    SelectedDate="2012-04-16" DayStartTime="08:00:00" DayEndTime="18:00:00" DataSourceID="AppointmentsDataSource"
                    DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End"
                    DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentID"
                    DisplayDeleteConfirmation="false" SelectedView="WeekView" OnClientAppointmentContextMenu="OnClientAppointmentContextMenu"
                    OnAppointmentCreated="RadScheduler1_AppointmentCreated" OnDataBound="RadScheduler1_DataBound">
                    <AdvancedForm Modal="true"></AdvancedForm>
                    <TimelineView UserSelectable="false"></TimelineView>
                    <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
                    <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
                </telerik:RadScheduler>
                <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" ID="RadToolTipManager1" Width="320" Height="360"
                    Animation="None" HideEvent="Default" Text="Loading..." OnAjaxUpdate="RadToolTipManager1_AjaxUpdate">
                </telerik:RadToolTipManager>
                <div style="display: none;">
                    <div id="contentContainer">
                        <div class="appointment-tooltip">
                            <p>
                                Starts on: <span id="startTime">
                                    <!-- -->
                                </span>
                                <br />
                                Ends on: <span id="endTime">
                                    <!-- -->
                                </span>
                            </p>
                            <hr />
                            Description:
                            <div id="descriptionDiv">
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <asp:SqlDataSource ID="AppointmentsDataSource" runat="server"
        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT * FROM [AppointmentsWithLongSubjects]" InsertCommand="INSERT INTO [AppointmentsWithLongSubjects] ([Subject], [Start], [End], [RecurrenceRule], [RecurrenceParentID]) VALUES (@Subject, @Start, @End , @RecurrenceRule, @RecurrenceParentID)"
        UpdateCommand="UPDATE [Appointments] SET [Subject] = @Subject, [Start] = @Start, [End] = @End, [RoomID] = @RoomID, [UserID] = @UserID, [RecurrenceRule] = @RecurrenceRule, [RecurrenceParentID] = @RecurrenceParentID WHERE (ID = @ID)"
        DeleteCommand="DELETE FROM [Appointments] WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
        </InsertParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance