Adding RadToolTip to Appointment client-side

4 posts, 0 answers
  1. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 14 Sep 2009 Link to this post

    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!
  2. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 14 Sep 2009 Link to this post

    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!





  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Datamex
    Datamex avatar
    161 posts
    Member since:
    Jun 2012

    Posted 15 Sep 2009 Link to this post

    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?
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 17 Sep 2009 Link to this post

    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.
Back to Top