Scheduler - 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
 
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.
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...

Starts on:
Ends on:


Description:
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 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>
    <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="260"
                    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>

Find Assistance

Help Us Improve

Was this example helpful?