This is a migrated thread and some comments may be shown as answers.

RadScheduler and RadTooltipManager

5 Answers 304 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Eric asked on 10 Feb 2011, 01:25 PM

Hello,

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:

Session.Remove("Appointments");

SchedulerRadToolTipManager.TargetControls.Clear();

RadScheduler1.Appointments.Clear();

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.
regards
Eric

5 Answers, 1 is accepted

answered on 11 Feb 2011, 09:34 AM

Hello,

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

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

}

</style>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" CdnSettings-TelerikCdn="Enabled" />

</head>

<body class="BODY">

<form id="Form1" method="post" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" CdnSettings-TelerikCdn="Enabled">

<Scripts>

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

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your Java Script code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadScheduler1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<script type="text/javascript">

//<![CDATA[

// 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);

advancedTemplate.initialize();

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

}

//]]>

</script>

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

<AppointmentTemplate>

<div class="rsAptSubject">

<%# Eval("Subject") %>

</div>

<%# Eval("Description") %>

</AppointmentTemplate>

<AdvancedEditTemplate>

<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") %>' />

</AdvancedEditTemplate>

<AdvancedInsertTemplate>

<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") %>' />

</AdvancedInsertTemplate>

<TimelineView UserSelectable="false" />

<TimeSlotContextMenuSettings EnableDefault="true" />

<AppointmentContextMenuSettings EnableDefault="true" />

</telerik:RadScheduler>

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

/>

</div>

</form>

</body>

</html>

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;

}

else

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;

RadToolTipManager1.TargetControls.Clear();

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;

e.UpdatePanel.ContentTemplateContainer.Controls.Add(toolTip);

}

/// <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);

}

break;

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

}

break;

case SchedulerNavigationCommand.SwitchToDayView:

dteStart = RadScheduler1.VisibleRangeStart;

dteEnd = RadScheduler1.VisibleRangeEnd;

break;

case SchedulerNavigationCommand.SwitchToWeekView:

dteStart = RadScheduler1.VisibleRangeStart.AddDays(-7);

dteEnd = RadScheduler1.VisibleRangeStart.AddDays(7);

break;

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

break;

case SchedulerNavigationCommand.SwitchToSelectedDay:

dteStart = e.SelectedDate.AddDays(-7);

dteEnd = e.SelectedDate.AddDays(7);

break;

default:

dteStart = DateTime.Today;

dteEnd = dteStart.AddDays(1);

break;

}

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
Eric

answered on 16 Feb 2011, 04:38 PM

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.

regards
Thanks for you help
Eric