RadScheduler and RadTooltipManager

6 posts, 0 answers
  1. Eric
    Eric avatar
    25 posts
    Member since:
    Dec 2009

    Posted 10 Feb 2011 Link to this post


    Based on the sample available in the demo, I implemented a tooltip manager in my simple scheduler web page. The datas are loaded "manually" in a List and assign to RadScheduler.DataSource each time a OnNavigationCommand event occurs. The first page is loaded in Page_Load.

    At the first load of the page, eveythings work fine and Tooltip load correctly through ajaxupdate. But when I use NavigationCommand, Tooltips become crazy. This is wrong Appointment Id which is return and some appointments don"t even load the tooltip.

    I use the same event and same code as the example. The only difference is in NavigationCommand which loads Appointment from my Database.
    here is the code after a switch which determine first and last appointment datetime:

    in the class:

    Dictionary<int, AppointmentInfo> m_lstAppointment;

    in OnNavigationCommand event:

    m_lstAppointment = m_oDataAccess.SearchAppointment(dteStart, dteEnd);
    RadScheduler1.DataSource = m_lstAppointment.Values;

    Yes, I tried to clean-up everything before load new appointments but with no success.
    The aspx file is not far from the one provided by the telerik wizard in VS 2010, the one with AdvancedForm.

    Thanks in advance for your help.
  2. Eric
    Eric avatar
    25 posts
    Member since:
    Dec 2009

    Posted 11 Feb 2011 Link to this post


    Still having the problems I restarted a webform from scratch using Telerik samples.

    Here are the code Scheduler is from the wizard, I didn't change anything in the advancedForm nor appointmentToolTip. I put in ToolTip.js the javascript code from demo sample.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Agenda.aspx.cs" Inherits="Web.Agenda.Agenda" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="scheduler" TagName="AdvancedForm" Src="AdvancedForm.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    <head runat="server">
        <style type="text/css">
            .RadScheduler .rsAptSubject
                text-align: left;
                padding: 4px 0 1px;
                margin: 0 0 3px;
                font-size: 12px;
                font-weight: bold;
                color: #369;
                height: 17px;
                border-bottom: 1px solid #99DEFD;
                width: 100%;
            .RadScheduler .rsAdvancedEdit .RadColorPicker label
                text-align: left;
                display: block;
                padding: 0;
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" CdnSettings-TelerikCdn="Enabled" />
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
       <telerik:RadScriptManager ID="RadScriptManager1" runat="server" CdnSettings-TelerikCdn="Enabled">
             <asp:ScriptReference Path="/Content/Agenda2/Agenda/AdvancedForm.js" />
             <asp:ScriptReference Path="/Scripts/ToolTip.js" />
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        <script type="text/javascript">
            //Put your Java Script code here.
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <script type="text/javascript">
            // Dictionary containing the advanced template client object
            // for a given RadScheduler instance (the control ID is used as key).
            var schedulerTemplates = {};
            function schedulerFormCreated(scheduler, eventArgs) {
                // Create a client-side object only for the advanced templates
                var mode = eventArgs.get_mode();
                if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
                        mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
                    // Initialize the client-side object for the advanced form
                    var formElement = eventArgs.get_formElement();
                    var templateKey = scheduler.get_id() + "_" + mode;
                    var advancedTemplate = schedulerTemplates[templateKey];
                    if (!advancedTemplate) {
                        // Initialize the template for this RadScheduler instance
                        // and cache it in the schedulerTemplates dictionary
                        var schedulerElement = scheduler.get_element();
                        var isModal = scheduler.get_advancedFormSettings().modal;
                        advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement, isModal);
                        schedulerTemplates[templateKey] = advancedTemplate;
                        // Remove the template object from the dictionary on dispose.
                        scheduler.add_disposing(function () {
                            schedulerTemplates[templateKey] = null;
                    // Are we using Web Service data binding?
                    if (!scheduler.get_webServiceSettings().get_isEmpty()) {
                        // Populate the form with the appointment data
                        var apt = eventArgs.get_appointment();
                        var isInsert = mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert;
                        advancedTemplate.populate(apt, isInsert);
        <div class="exampleContainer">
            <telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" OnDataBound="RadScheduler1_DataBound"
                AppointmentStyleMode="Default" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
                OnClientFormCreated="schedulerFormCreated" CustomAttributeNames="AppointmentColor"
                EnableDescriptionField="true" DataEndField="End" DataKeyField="Id" DataDescriptionField="Description" DataStartField="Start" DataSubjectField="Subject">
                <AdvancedForm Modal="true" />
                <Reminders Enabled="true" />
                    <div class="rsAptSubject">
                        <%# Eval("Subject") %>
                    <%# Eval("Description") %>
                    <scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Subject='<%# Bind("Subject") %>'
                        Description='<%# Bind("Description") %>' Start='<%# Bind("Start") %>' End='<%# Bind("End") %>'
                        RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' Reminder='<%# Bind("Reminder") %>'
                        AppointmentColor='<%# Bind("AppointmentColor") %>' UserID='<%# Bind("User") %>'
                        RoomID='<%# Bind("Room") %>' />
                    <scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Subject='<%# Bind("Subject") %>'
                        Start='<%# Bind("Start") %>' End='<%# Bind("End") %>' Description='<%# Bind("Description") %>'
                        RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' Reminder='<%# Bind("Reminder") %>'
                        AppointmentColor='<%# Bind("AppointmentColor") %>' UserID='<%# Bind("User") %>'
                        RoomID='<%# Bind("Room") %>' />
                <TimelineView UserSelectable="false" />
                <TimeSlotContextMenuSettings EnableDefault="true" />
                <AppointmentContextMenuSettings EnableDefault="true" />
            <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="320" Height="210"
                        Animation="None" HideEvent="LeaveToolTip" Text="Loading..." RelativeTo="Element"
                        OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" OnClientBeforeShow="clientBeforeShow" EnableShadow="true"

    And the code-behind which is a mix with the scheduler wizard and radtooltipmanager sample from demo.

    using System;
    using System.Web.UI;
    using System.Drawing;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using System.Linq;
    using Softin..Data;
    using Softin.Entites;
    using System.Web.Security;
    using System.Collections.Generic;
    using WebSecretariat.Content.Agenda2.Agenda;
    namespace Web.Agenda {
        public partial class Agenda : System.Web.UI.Page {
            AgendaDataAccessLayer m_oDataAccess;
            Personne  m_oPersonne;
            Dictionary<int, AppointmentInfo> m_lstAppointment;
            protected void Page_Init(object sender, EventArgs e) {
                //RadScheduler1.Provider = new XmlSchedulerProvider(Server.MapPath("~/App_Data/Appointments_CustomTemplates.xml"), true);
                mytEntities oDB = new mytEntities();
                string sNom = Membership.GetUser().UserName;
                utilisateur oUtilisateur = (from u in oDB.utilisateurs where u.Username.Equals(sNom) select u).SingleOrDefault();
                if (oUtilisateur != null) {
                    m_oDataAccess = new AgendaDataAccessLayer(oUtilisateur.CheminDB);
                    m_oPersonne = new Personne();
                    m_oPersonne.AgendaId = (int)oUtilisateur.IdAgenda;
                    throw (new ArgumentException("L'utilisateur n'est rattaché à aucune fiche de données."));
            protected void Page_Load(object sender, EventArgs e) {
                if (!IsPostBack) {
                    DateTime dteStart = DateTime.Today.AddDays(-7);
                    DateTime dteEnd = DateTime.Today.AddDays(7);
                    m_lstAppointment = m_oDataAccess.SearchAppointment(m_oPersonne, dteStart, dteEnd);
                    RadScheduler1.DataSource = m_lstAppointment.Values;
                RadScheduler1.AppointmentCreated += RadScheduler1_AppointmentCreated;
                RadScheduler1.DataBound += RadScheduler1_DataBound;
            protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e) {
                if (e.Appointment.Visible && !IsAppointmentRegisteredForTooltip(e.Appointment)) {
                    string id = e.Appointment.ID.ToString();
                    foreach (string domElementID in e.Appointment.DomElements) {
                        RadToolTipManager1.TargetControls.Add(domElementID, id, true);
            private bool IsAppointmentRegisteredForTooltip(Appointment apt) {
                foreach (ToolTipTargetControl targetControl in RadToolTipManager1.TargetControls) {
                    if (apt.DomElements.Contains(targetControl.TargetControlID)) {
                        return true;
                return false;
            protected void RadScheduler1_DataBound(object sender, EventArgs e) {
                //RadScheduler1.ResourceTypes.FindByName("User").AllowMultipleValues = true;
                //RadScheduler1.ResourceTypes.FindByName("Room").AllowMultipleValues = false;
                ScriptManager.RegisterStartupScript(this, typeof(Page), "HideToolTip", "hideActiveToolTip();", true);
            protected void RadScheduler1_AppointmentDataBound(object sender, SchedulerEventArgs e) {
                string colorAttribute = e.Appointment.Attributes["AppointmentColor"];
                if (!string.IsNullOrEmpty(colorAttribute)) {
                    int colorValue;
                    if (int.TryParse(colorAttribute, out colorValue)) {
                        Color appointmentColor = Color.FromArgb(colorValue);
                        e.Appointment.BackColor = appointmentColor;
                        e.Appointment.BorderColor = Color.Black;
                        e.Appointment.BorderStyle = BorderStyle.Solid;
                        e.Appointment.BorderWidth = Unit.Pixel(1);
                e.Appointment.ToolTip = e.Appointment.Subject + ": " + e.Appointment.Description;
            protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e) {
                int aptId;
                Appointment apt;
                if (!int.TryParse(e.Value, out aptId))//The appoitnment is occurrence and FindByID expects a string
                    apt = RadScheduler1.Appointments.FindByID(e.Value);
                else //The appointment is not occurrence and FindByID expects an int
                    apt = RadScheduler1.Appointments.FindByID(aptId);
                AppointmentToolTip toolTip = (AppointmentToolTip)LoadControl("AppointmentToolTip.ascx");
                toolTip.TargetAppointment = apt;
            /// <summary>
            /// Requete des RDV suivant la navigation dans l'agenda
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void MagicAgenda_OnNavigationCommand(object sender, SchedulerNavigationCommandEventArgs e) {
                if (IsPostBack) {
                    DateTime dteStart = DateTime.Today; ;
                    DateTime dteEnd = dteStart.AddDays(1);
                    switch (e.Command) {
                        case SchedulerNavigationCommand.NavigateToNextPeriod:
                            if (RadScheduler1.SelectedView == SchedulerViewType.WeekView) {
                                dteStart = RadScheduler1.VisibleRangeStart.AddDays(7);
                                dteEnd = dteStart.AddDays(7);
                            else if (RadScheduler1.SelectedView == SchedulerViewType.DayView) {
                                dteStart = RadScheduler1.VisibleRangeStart.AddDays(1);
                                dteEnd = dteStart.AddDays(1);
                        case SchedulerNavigationCommand.NavigateToPreviousPeriod:
                            if (RadScheduler1.SelectedView == SchedulerViewType.WeekView) {
                                dteStart = RadScheduler1.VisibleRangeStart.AddDays(-7);
                                dteEnd = dteStart.AddDays(7);
                            else if (RadScheduler1.SelectedView == SchedulerViewType.DayView) {
                                dteStart = RadScheduler1.VisibleRangeStart.AddDays(-1);
                                dteEnd = dteStart.AddDays(1);
                        case SchedulerNavigationCommand.SwitchToDayView:
                            dteStart = RadScheduler1.VisibleRangeStart;
                            dteEnd = RadScheduler1.VisibleRangeEnd;
                        case SchedulerNavigationCommand.SwitchToWeekView:
                            dteStart = RadScheduler1.VisibleRangeStart.AddDays(-7);
                            dteEnd = RadScheduler1.VisibleRangeStart.AddDays(7);
                        case SchedulerNavigationCommand.NavigateToSelectedDate:
                            dteStart = e.SelectedDate;
                            if (RadScheduler1.SelectedView == SchedulerViewType.WeekView)
                                dteEnd = dteStart.AddDays(8);
                            else if (RadScheduler1.SelectedView == SchedulerViewType.DayView)
                                dteEnd = dteStart.AddDays(1);
                        case SchedulerNavigationCommand.SwitchToSelectedDay:
                            dteStart = e.SelectedDate.AddDays(-7);
                            dteEnd = e.SelectedDate.AddDays(7);
                            dteStart = DateTime.Today;
                            dteEnd = dteStart.AddDays(1);
                    m_lstAppointment = m_oDataAccess.SearchAppointment(m_oPersonne, dteStart, dteEnd);
                    RadScheduler1.DataSource = m_lstAppointment.Values;

    As I told in my first post, it works correctly at fisrt load of page, but tooltips become crazy after postback due to CommandNavigation Event. By "crazy", I mean appointment has default tooltip (subject) or wrong key/ID is return in ajaxupdate and tooltip failed with exception.

    In debug mode, I could trace and follow how targetControls is filled in and everything looks good. I couldn't figure out what I'm doing wrong and why I get back wrong information when mouse is over the appointment.

    Thanks in advance for your help
  3. Veronica
    Veronica avatar
    1213 posts

    Posted 14 Feb 2011 Link to this post

    Hello Eric,

    Could you please send me a runnable project so I can inspect it and help you?

    Thank you!

    Veronica Milcheva
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  4. Eric
    Eric avatar
    25 posts
    Member since:
    Dec 2009

    Posted 16 Feb 2011 Link to this post

    Hello Veronica,

    Thank you for you answer.
    While preparing a new project from scratch, I could discover origin of the problem.

    My RadScheduler Control is referenced in an AjaxUpdatedControl from a RadAjaxManager. If I disable this functionality, the load-on demand tooltip works correctly. If RadScheduler is referenced in the AjaxUpdatedControl, the load on demand tooltip works until the RadScheduler refresh or postback (for instance after a "next day" or "next week" button has been pressed). Then for a given appointment, the load-on demand tooltip is desactivated (and I get default tooltip) or the OnAjaxUpdate event of the RadTooltipManager returns the wrong ClientID.

    Is it possible to use RadAjaxManager with RadScheduler and load-ondemand RadTooltipManager at the same time? If yes, what I'm doing wrong. You can have a look to the code I posted before or I can provide you a VS2010 project but I can only attach images to this post.

    Thanks for you help
  5. Veronica
    Veronica avatar
    1213 posts

    Posted 18 Feb 2011 Link to this post

    Hi Eric,

    Please take a look at this forum post for a solution and let me know how it goes.

    Veronica Milcheva
    the Telerik team
  6. Eric
    Eric avatar
    25 posts
    Member since:
    Dec 2009

    Posted 24 Feb 2011 Link to this post

    Hi Veronica,

    YES, this post helped me and I don't know why I didn't find it in the numerous posts I read on my problem.
    So this post let me solve the problem with tooltipmanager and the reason why tooltip did not appear.

    However, it didn't fix the problem of appointment Id mismatch in "ajax_update" event. I fixed this one by disable the javascript code I took (copy/paste) from the exemple.

    Thank you very much for your help.
Back to Top