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

Tooltip not working after page navigation

5 Answers 271 Views

ToolTip

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

5 Answers, 1 is accepted

answered on 21 Jun 2012, 03:15 PM

Hello Scott,

Do you have other tooltip managers on the page? If so - does removing them resolve this problem? If you are using AJAX can you confirm the tooltip manager is always updated with the scheduler - i.e. is is in the same update panel or is it outside of it? Are there JavaScript errors on the page and if so - does resolving them help? When changing the view do you clear the target controls for the tooltip manager so that you can add the relevant ones to an empty collection? Once you try these ideas in your case and you are still unable to resolve this I advise that you post the code that is causing the problems as it would help in determining their cause.

All the best,
Marin Bratanov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 21 Jun 2012, 04:17 PM

There is only one tooltip manager. Everything is contained on one aspUpdatePanel. There are no scripting errors generated. There is a TargetControls.Clear statement in the Radscheduler_Databound method as in your example. The code is below. I do notice that in your example that in the following script, the variable prm never gets used. This was taken from your example

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);

function beginRequestHandler(sender, args) {

var prm = Sys.WebForms.PageRequestManager.getInstance();

if (args.get_postBackElement().id.indexOf('RadScheduler') != -1)

{

hideActiveToolTip();

}

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="PacCalendar.aspx.cs" Inherits="PacCalendar" %>

<%@ Reference Control="~/AppointmentToolTip.ascx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="content" Runat="Server">

<script type="text/javascript">

// function OnClientAppointmentClick(sender, eventArgs) {

// alert(eventArgs._appointment._id);

// }

function hideActiveToolTip() {

var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

if (tooltip) {

tooltip.hide();

}

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);

function beginRequestHandler(sender, args) {

var prm = Sys.WebForms.PageRequestManager.getInstance();

if (args.get_postBackElement().id.indexOf('RadScheduler') != -1)

{

hideActiveToolTip();

}

function OnClientRequestStart(sender, args) {

args.set_cancel(true);

var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

if (tooltip) {

var element = tooltip.get_targetControl();

var apt = $find("<%=RadScheduler.ClientID %>").getAppointmentFromDomElement(element);

$get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");

$get("endTime").innerHTML = apt.get_end().format("MM/dd/yyyy HH:mm");

$get("descriptionDiv").innerHTML = apt.get_subject();

tooltip.set_text($get("contentContainer").innerHTML);

}

</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<table class="calendartable">

<tr>

<td></td>

<td>

<span class="labelTextheader">Filter Applications For:</span>

<asp:DropDownList ID="ddReportManager"

runat="server"

AutoPostBack="true"

Font-Size="Small"

OnSelectedIndexChanged="ReportManager_SelectedIndexChanged">

</asp:DropDownList>

</td>

</tr>

<tr>

<td valign="top">

<span class="LabelEmphasis">Application Managers</span>

<asp:Table ID="tManagers" runat="server" CssClass="labelregular">

</asp:Table>

</td>

<td valign="top">

<asp:UpdateProgress ID="UpdateProgress1"

runat="server"

AssociatedUpdatePanelID="UpdatePanel1"

DisplayAfter="0">

<ProgressTemplate>

<div id="Layer1" style="position:absolute; z-index:1; left: 50%; top: 13%;">

<img alt = "Loading..." src ="Images/loading.gif" />

</div>

</ProgressTemplate>

</asp:UpdateProgress>

<telerik:RadScheduler ID="RadScheduler"

runat="server"

SelectedView="MonthView"

ReadOnly="True"

DataEndField="EndDatetime"

DataKeyField="CRNumber"

TimeZoneOffset="03:00:00"

DataStartField="StartDatetime"

DataSubjectField="Category"

DataDescriptionField="ManagerName"

Height="580"

EnableDescriptionField="True"

OnDataBound="RadScheduler_DataBound"

onnavigationcommand="RadSchedulerNavigationCommand"

OnNavigationComplete="RadSchedulerNavigationComplete"

onappointmentdatabound="RadScheduler_AppointmentDataBound"

RowHeight="20px"

Skin="Office2007"

SelectedDate="2012-05-24"

AppointmentStyleMode="Default"

MonthView-VisibleAppointmentsPerDay="30"

MonthView-MinimumRowHeight="5">

<DayView UserSelectable="false"> </DayView>

<WeekView UserSelectable="False"></WeekView>

<AdvancedForm Modal="true" />

<TimelineView UserSelectable="false" />

</telerik:RadScheduler>

<telerik:RadToolTipManager ID="RadToolTipManager1"

runat="server"

Width="300"

Height="100%"

Position="TopRight"

HideEvent="Default"

Text="Loading..."

RelativeTo="Element"

OnAjaxUpdate="RadToolTipManager1AjaxUpdate"

EnableShadow="true"

ShowEvent="OnClick"

ManualClose="True"

AutoTooltipify="False"

MouseTrailing="True"

TargetControlId="Radscheduler"

RegisterWithScriptManager="True"

Skin="Office2007">

</telerik:RadToolTipManager>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</asp:Content>

using System;

using System.Collections.Generic;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using App_Code;

using Telerik.Web.UI;

using WellsFargo.ApplicationAlert.Web;

using System.Globalization;

using System.Threading;

public partial class PacCalendar : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (IsPostBack) return;

RadScheduler.AppointmentCreated += RadScheduler_AppointmentCreated;

RadScheduler.DataBound += RadScheduler_DataBound;

Color[] RadSchedulerColors = new Color[20];

//int[] RadSchedulerColors = new int[15];

//RadSchedulerColors[0] = Color.DarkBlue;

//RadSchedulerColors[1] = Color.Blue;

//RadSchedulerColors[2] = Color.Green;

//RadSchedulerColors[3] = Color.DarkOrange;

//RadSchedulerColors[4] = Color.DarkRed;

//RadSchedulerColors[5] = Color.DarkSeaGreen;

//RadSchedulerColors[6] = Color.Brown;

//RadSchedulerColors[7] = Color.Red;

//RadSchedulerColors[8] = Color.Violet;

//RadSchedulerColors[9] = Color.Chocolate;

//RadSchedulerColors[10] = Color.DarkMagenta;

//RadSchedulerColors[11] = Color.Teal;

//RadSchedulerColors[12] = Color.MediumVioletRed;

//RadSchedulerColors[13] = Color.DarkSlateGray;

//RadSchedulerColors[14] = Color.Maroon;

RadSchedulerColors[0] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[1] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[2] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[3] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[4] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[5] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[6] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[7] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[8] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[9] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[10] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[11] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[12] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[13] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[14] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[15] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[16] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[17] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[18] = Color.FromArgb(0xCC66CC);

RadSchedulerColors[19] = Color.FromArgb(0xCC66CC);

ViewState["RadSchedulerColors"] = RadSchedulerColors;

RadScheduler.SelectedDate = DateTime.Now;

RadScheduler.SelectedView = SchedulerViewType.MonthView;

GetManager();

string mgrEmplId = "";

if ((int)HttpContext.Current.Session["AccessLevel"] == (int)AlertGlobal.AccessLevel.Manager)

{

mgrEmplId = AlertGlobal.GetEmplId();

ddReportManager.SelectedValue = AlertGlobal.GetEmplId();

}

else

{

mgrEmplId = AlertGlobal.GetManagerEmplId();

ddReportManager.SelectedValue = AlertGlobal.GetManagerEmplId();

}

LoadCalendar(mgrEmplId);

}

private void LoadCalendar(string mgrEmplid)

{

try

{

//Determines the range of date based on the visible date of the calendar

DateTime startDate = RadScheduler.VisibleRangeStart;

DateTime endDate = RadScheduler.VisibleRangeEnd;

string managerEmplId = mgrEmplid;

//retrieve all PAC2000 record for the data range and manager.

DataTable dataTable =

WellsFargo.ApplicationAlert.Data.Bases.ApplicationAlertQuery.GetPac2000Mgr(startDate, endDate, managerEmplId);

List<ManagerCalendar> managerCalendars = new List<ManagerCalendar>();

//clear asp table of managers

tManagers.Rows.Clear();

//build table of colors

int counter = 0;

Color[] RadSchedulerColors = new Color[20];

RadSchedulerColors = (Color[])ViewState["RadSchedulerColors"];

//assign unique colors to each manager

var lsManagers = (from r in dataTable.AsEnumerable() select r["MANAGERNAME"]).Distinct().ToList();

foreach (var manager in lsManagers)

{

TableRow tableRow = new TableRow();

tManagers.Rows.Add(tableRow);

Color color = new Color();

ManagerCalendar managerCalendar = new ManagerCalendar();

managerCalendar.Name = manager.ToString();

if (counter < 20)

{

//use Telerik predefined scheduler colors

managerCalendar.Color = RadSchedulerColors[counter].Name;

color = RadSchedulerColors[counter];

managerCalendar.Argb = RadSchedulerColors[counter].ToArgb();

}

else

{

//generate random scheduler colors

color = CreateRandomColor();

managerCalendar.Color = color.Name;

managerCalendar.Argb = color.ToArgb();

}

TableCell TableCell = new TableCell();

tableRow.Cells.Add(TableCell);

CultureInfo cultureInfo = Thread.CurrentThread.CurrentCulture;

TextInfo textInfo = cultureInfo.TextInfo;

string strManager = manager.ToString();

TableCell.Text = textInfo.ToTitleCase(strManager.ToLower());

TableCell.ForeColor = Color.Black;

TableCell.Wrap = false;

Label lbl = new Label();

lbl.BackColor = color;

lbl.ForeColor = color;

lbl.Text = "xx";

lbl.BorderColor = Color.Black;

TableCell TableCell2 = new TableCell();

TableCell2.Controls.Add(lbl);

tableRow.Cells.Add(TableCell2);

managerCalendars.Add(managerCalendar);

counter++;

}

ViewState["Manager"] = managerCalendars;

RadScheduler.DataSource = dataTable;

RadScheduler.DataBind();

}

catch (Exception ex)

{

Page.ClientScript.RegisterStartupScript(GetType(), "Msgbox", AlertGlobal.AlertScript(ex.Message));

AlertGlobal.LogError(ex.Message, Request.Url.AbsolutePath, "Page_Load", ex.StackTrace);

}

/// <summary>

/// Generate random color

/// </summary>

/// <returns></returns>

private Color CreateRandomColor()

{

Random randonGen = new Random();

Color randomColor = Color.FromArgb(randonGen.Next(255), randonGen.Next(255), randonGen.Next(255));

return randomColor;

}

protected void RadSchedulerNavigationCommand(object sender, SchedulerNavigationCommandEventArgs e)

{

if (e.Command == SchedulerNavigationCommand.NavigateToNextPeriod ||

e.Command == SchedulerNavigationCommand.NavigateToPreviousPeriod)

{

//LoadCalendar();

}

protected void RadSchedulerNavigationComplete(object sender, SchedulerNavigationCompleteEventArgs e)

{

string mgrEmplId = ddReportManager.SelectedValue;

LoadCalendar(mgrEmplId);

}

//protected void RadScheduler_OnClick(object sender, SchedulerEventArgs e)

//{

//}

protected void RadScheduler_AppointmentDataBound(object sender, SchedulerEventArgs e)

{

List<ManagerCalendar> managerCalendars = (List<ManagerCalendar>) ViewState["Manager"];

string managerName = e.Appointment.Description;

ManagerCalendar manager = managerCalendars.Find(m => m.Name == managerName);

e.Appointment.BackColor = Color.FromArgb(manager.Argb);

e.Appointment.ForeColor = Color.Black;

//e.Appointment.BackColor = System.Drawing.Color.FromName(manager.Color);

//e.Appointment.CssClass = "rsCategory" + manager.Color;

//Debug.WriteLine(e.Appointment.BackColor);

}

protected void RadToolTipManager1AjaxUpdate(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 = RadScheduler.Appointments.FindByID(e.Value);

else //The appointment is not occurrence and FindByID expects an int

apt = RadScheduler.Appointments.FindByID(aptId);

AppointmentToolTip toolTip = (AppointmentToolTip)LoadControl("AppointmentToolTip.ascx");

toolTip.TargetAppointment = apt;

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

}

protected void RadScheduler_DataBound(object sender, EventArgs e)

{

RadToolTipManager1.TargetControls.Clear();

ScriptManager.RegisterStartupScript(this, typeof(Page), "HideToolTip", "hideActiveToolTip();", true);

}

protected void RadScheduler_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;

}

private void GetManager()

{

try

{

DataSet mng = AlertGlobal.GetManagerList();

foreach (DataRow mngname in mng.Tables[0].Rows)

{

ListItem item = new ListItem();

item.Text = mngname["ManagerName"].ToString();

item.Value = mngname["EmployeeId"].ToString();

ddReportManager.Items.Add(item);

}

if ((int) HttpContext.Current.Session["AccessLevel"] == (int) AlertGlobal.AccessLevel.Manager)

ddReportManager.SelectedValue = AlertGlobal.GetEmplId();

else

ddReportManager.SelectedValue = AlertGlobal.GetManagerEmplId();

}

catch (Exception ex)

{

AlertGlobal.LogError(ex.Message, Request.Url.AbsolutePath, "getManager", ex.StackTrace);

}

protected void ReportManager_SelectedIndexChanged(object sender, EventArgs e)

{

string mgrEmplId = ddReportManager.SelectedValue;

LoadCalendar(mgrEmplId);

}

answered on 22 Jun 2012, 12:42 PM

scheduler-tooltips-navigation.zip

Hi Scott,

I cannot run this code because of the large number of dependencies that are missing - the custom code and the datasource.

What I did was to incorporate your code in the demo you originally linked. I also changed the datasource to the EntityDataSource as it has more appointmens set already and I enabled week and day view so that I have something to switch with. You can incorporate this page in our LiveDemos solution so that the datasources get appointments from the databases included in the examples.

I am attaching here the page as I ran it and it seems to work fine with me (I am also attaching a video). What I would advise is that you examine it and see if it works fine on your end and if so - compare it with your own page and try to find the differences. Or simply use it as base and add your datasource in it.

Greetings,
Marin Bratanov
the Telerik team

answered on 22 Jun 2012, 04:43 PM

I still see no difference in the code. You did prove that everything works with a defined datasource, but not why it is not working in my instance where I build the appointments dynamically. I suspect something is not getting updated when i build the appointments in the code behind. When the screen gets refreshed on a date navigation, RadToolTipManager1AjaxUpdate no longer executes when the appointment is clicked. I am binding from a datatable created dynamically using the code below. It does hit the RadSchedulerDataBound method as it shoud and executes TargetControls.Clear(). Initial page load and page after process follow the same path so I am confused as to why the click event does not trigger the RadToolTipManagerAjaxUpdate when I navigate. I was hoping you would see something in my code causing this and not just prove that the tool tip works. :D Again, I see nothing different in the code so something else must be causing this.

On further testing I think I have it narrowed down to the TargetControls.Clear() method. If I comment this out, and refresh the page with a new set of data, I do get the Tooltip trying to load, but with the wrong id value so it errors....expected action. I tried moving the call to just before I bind the datatable and it then does not fire the tooltip. I am assuming that when I do the Clear it is removing all of the ID data? There is good data in the datatable I am setting as the datasource. I am also assuming the bind is working since I get appointments showing.

Additionally, I am not binding the data just once. When I select an item from the dropdown box, data is revtreived into a datatable and bound to the control each time. Your example binds to the datasource only once.

One other oddity, when the page loads the first time RadScheduler_DataBound is called twice. When I bind with new data, it is only executed once.

RadScheduler_DataBound

RadScheduler_Dat

RadScheduler.DataSource = dataTable;

RadScheduler.DataBind()

answered on 22 Jun 2012, 09:35 PM

Getting closer. i set up a function for the OnClientAppointmentClick event to show the appointment Id and subject. The data in the appointment is good. the binding is working. I also set the tooltipmanager to ShowEvent = "OnRightClick". On first page load, right click on appointment and tooltip executes fine. Change page by loading new data and right click on appointment and I get a Windows context box and not the tooltip. Hope that gives you more to go on.

UPDATE:

Finally got it to work. I moved the two lines of code from the Page Load down into the RadScheduler_DataBound method. Looks like when I rebind with new data, the method assignments get lost and need to be redone?

RadScheduler.AppointmentCreated += RadScheduler_AppointmentCreated;

RadScheduler.DataBound += RadScheduler_DataBound;