Tooltip not working after page navigation

[Scott]

I have a Radscheduler and RadToolTipManager in an ASPUpdate panel.  I set up my tooltip using the demo here http://demos.telerik.com/aspnet-ajax/scheduler/examples/radtooltip/defaultcs.aspx?product=tooltip .  Everything works fine on initial page load.  The data displayed can be filtered by using a dropdown box.  When the data refreshes, the tooltips no longer work.  If I navigate to another day using the calendar controls, the tooltips no longer work.  On tracing the flow, I no longer seem to get to the AjaxUpdate method for the RadToolTipManager if I change the data from the initial page load.  I cannot see the disconnect.  Please speak real slow as i am very new to this.  Thanks.

[Marin Bratanov]

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

[Scott]

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

[Marin Bratanov]

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

[Scott]

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_DataBound

RadScheduler_DataBound

RadScheduler_Dat

 

RadScheduler.DataSource = dataTable;
           RadScheduler.DataBind()

[Scott]

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;