Adding RadToolTip to Appointment client-side

[Datamex]

Dear Telerik,

This example shows how to add a Tooltip to an appointment, and this example shows how to add a RadToolTip by making use of the Client-side API. Would it be possible to combine these two examples so I can add a RadToolTip to my Appointments by making use of the client-side API? And how would I do that?

Thanks in advance!

[Datamex]

Never mind! I've already fixed it! I came across this forumpost from about a year ago which explains how to add items to the TargetControls collection of the RadToolTipManager. I created the following sourcecode:

//Tooltip

function AddTargetControl(appointment)

{

var manager = $find("<%=RadToolTipManager.ClientID %>");

var appID = appointment.get_id().toString();

for (var i = 0; i < appointment._domElements.length - 1; i++) {

manager._targetControls.push(appointment._domElement, appID, true);

}

manager.createToolTip(appointment._domElement, appID);

}

Inside the BODY tag:

  <script type="text/javascript">
    //<![CDATA[
    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 clientBeforeShow(sender, eventArgs) {
      w = $telerik.$(window).width() / 2;
      h = $telerik.$(window).height() / 2;

      if ((sender._mouseX > w) && (sender._mouseY > h)) {
        sender.set_position(Telerik.Web.UI.ToolTipPosition.TopLeft);
        return;
      }
      if ((sender._mouseX < w) && (sender._mouseY > h)) {
        sender.set_position(Telerik.Web.UI.ToolTipPosition.TopRight);
        return;
      }
      if ((sender._mouseX > w) && (sender._mouseY < h)) {
        sender.set_position(Telerik.Web.UI.ToolTipPosition.BottomLeft);
        return;
      }
      sender.set_position(Telerik.Web.UI.ToolTipPosition.BottomRight);
    }
    //]]>
  </script>

A RadToolTipManager:

<telerik:RadToolTipManager runat="server" ID="RadToolTipManager" Width="320" Height="210"
      Animation="None" HideEvent="LeaveToolTip" Text="Loading..." RelativeTo="Element"
      OnAjaxUpdate="RadToolTipManager_AjaxUpdate" OnClientBeforeShow="clientBeforeShow"
      />

In my codebehind file:

protected void RadToolTipManager_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 = 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("~/UserControls/AppointmentToolTip.ascx");
      toolTip.TargetAppointment = apt;
      e.UpdatePanel.ContentTemplateContainer.Controls.Add(toolTip);
    }

And the AppointmentToolTip.ascx and .cs from the RadToolTips-for-Scheduler-Demo, everything seems to work great!

[Datamex]

I've tweaked my code a little bit and made it run with Webservices, but I'm running into a small problem.

In Scheduler.aspx I've inserted the following javascript code:

//Tooltip
function AddTargetControl(appointment)
{
   var manager = $find("<%=RadToolTipManager.ClientID %>");

   //If the user hovers the image before the page has loaded, there is no manager created
   if (!manager) return;

   //Check for a recurrenceParentID, because the appID is different then!!!
   if (appointment.get_recurrenceParentID() != null) {
      var appID = appointment.get_recurrenceParentID().toString();
   }
   else {
      var appID = appointment.get_id().toString();
   }

   for (var i = 0; i < appointment._domElements.length - 1; i++) {
      manager._targetControls.push(appointment._domElement, appID, true);
   }

   var tooltip = manager.createToolTip(appointment._domElement, appID);
   tooltip.set_value(appID);
}

You see I'm checking if the appointment has a recurrenceParentID and if so, I'm using that ID as my appointmentID, with the result that the Appointment-object I'm retrieving in my Webservice (with LINQ) is always the first appointment of the recurrence:

  public class ToolTipWebservice : System.Web.Services.WebService
  {

    [WebMethod]
    public string GetAppointmentDetails(object context)
    {
      IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context;
      string appID = ((string)contextDictionary["Value"]);

      DataAccess.DALDataContext db = new Datamex.Projects.Saturnus.DataAccess.DALDataContext();
      DataAccess.Appointment appointment = (from a in db.Appointments where a.AppointmentID == Convert.ToInt32(appID) select a).SingleOrDefault();

      Page pageHolder = new Page();
      UserControl viewControl = (UserControl)pageHolder.LoadControl("~/UserControls/AppointmentToolTip.ascx");

      if (appointment != null)
      {
        Type viewControlviewControlType = viewControl.GetType();
        FieldInfo field = viewControlType.GetField("Data");

        if (field != null)
        {
          field.SetValue(viewControl, appointment);
        }
        else
        {
          throw new Exception("View file: ~/UserControls/AppointmentToolTip.ascx does not have a public Data property");
        }
      }

      pageHolder.Controls.Add(viewControl);

      StringWriter output = new StringWriter();
      HttpContext.Current.Server.Execute(pageHolder, output, false);

      return output.ToString();
    }
  }

I think I've made a small thinking-error here, because in this example I came across the folowing code:

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

This code states that when the appointment ID is an integer, it's from a not recurring appointment and when the appointment ID is a string, it's from a recurring appointment... How can I implement this in my Webservice?! Because now I always retrieve the Appointment which is recurring (first appointment of the recurrence) and so, the time I'm displaying in my tooltip is always that of the first appointment appearing in the scheduler, for all recurring appointments in that recurrence... How can I retrieve the correct date and time?

[Peter]

Hi,

That's a complex scenario and we are not sure how exactly to create a test project for this case. If you have a working demo, please open a support ticket and send it to us for further testing.


Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.