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

onmouseover event for appointment

5 Answers 394 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
reubix
Top achievements
Rank 1
reubix asked on 22 May 2008, 10:31 PM
Hi is there any way to hook a JS function to a onmouseover event for an appointment?  I know that you really want me to use your tooltip using update panel and all that but I want to keep using the custom tooltip script that I have.  All I need is a way to not display your tooltip (default in the scheduler) and hook up my eventhandler to something like onclientappointmentmouseover for an appointment.  I think your scheduler is great but this one issue is something I need to solve.

Note that the reason why I do not want to use your tooltip is I want to keep everything client side and your example on using your tooltip is going back to the server.  I have tried to use RAD tooltip on the client side in the following way:

<telerik:RadToolTipManager ID="ttManager" runat="server" OnClientBeforeShow="test"></telerik:RadToolTipManager>

   function test(sender, eventArgs)
  {
    var tt = sender;
    var id = tt.get_targetControlID();
   
    // here is where i would like to access the appointment object and its attributes but I have not found a way to obtain the appointment object.  The tt.TargetControl provides me with the DOM element only and I cannot access the start and end dates using your prototype functions.
  }

5 Answers, 1 is accepted

Sort by
0
reubix
Top achievements
Rank 1
answered on 25 May 2008, 06:11 AM
Hi I have found a client side solution in using Rad Tool tip with the scheduler with the help of FireBug showing me all the methods RadSchedManager has.  Here is my solution.  Set up the tool tip OnClientBeforeShow to your content filler function like so.

           <telerik:RadToolTipManager ID="ttManager" runat="server" OnClientBeforeShow="FillSchedToolTip"></telerik:RadToolTipManager>

Then in your function.

   function FillSchedToolTip(sender, eventArgs)
  {
    var sched = $find('<%= apptSched.ClientID %>');

    var tt = sender;
    var apptDomElem = tt.get_targetControl();
    var apt = sched.getAppointmentFromDomElement(apptDomElem);
   
    var birthDate = apt.get_attributes().getAttribute("ClientBirthDate");
    var duration = apt.get_attributes().getAttribute("ApptLength");
    var notes = apt.get_attributes().getAttribute("Notes");
   
    if (notes == null)
        notes = "";

    tt.set_content
    (
        "<p><strong>When:</strong> " + apt.get_start()  + "</P>" +
         "<p><strong>Duration:</strong> " + duration  + " minutes</P>" + 
         "<p><strong>Client Name:</strong> " + apt.get_subject()  + "</P>" +
         "<p><strong>Client BirthDate:</strong> " + birthDate  + "</P>" +
         "<p><strong>Notes:</strong> " + notes  + "</P>"
    );
  }


Thanks
0
reubix
Top achievements
Rank 1
answered on 25 May 2008, 10:33 PM
I have also created an implementation that supports using your own tooltip if you like.  I don't want to name the open source tooltip I use since it might make Telerik mad.  I am just using the tools I think meet my requirements best and integrate them seamlessly.  I am still using RadAjaxManager with RadScheduler.  I am using prototype.js to help me out here as well.

<script type="text/javascript">   
        // initialize after initial load, does not get called after ajax call.
        Event.observe(window, 'load', Initialize, false);

        function responseEnd(sender, eventArgs)
        {
            // We have finished schedule refresh. 
// Register retrieved appointments with tooltip. 
// This gets called from RadAjaxMgr's  <ClientEvents OnResponseEnd="responseEnd" />

            RegisterTooltipForAppointments();
        }

        function Initialize (e)
        {
            // setup tooltips for appointments
            RegisterTooltipForAppointments(); 
        }
       
        function RegisterTooltipForAppointments()
        {
            // obtain the appointment dom elements.
            var apptElements = $$ ('div .rsApt');
        
// attach handlers to mouseover and mouseover event
            for(var i=0; i<apptElements.length; i++){
                var apptElement = apptElements[i];           
                apptElement.title = '';     // we need to blank out title to ensure we don't display default tooltip.
                Event.observe(apptElement, 'mouseover', FillSchedToolTip, false);
                Event.observe(apptElement, 'mouseout', apptMouseOut, false);
            }
        }

        function apptMouseOut(evt){
            .. my UnTip() call;
        }

        function FillSchedToolTip(eventArgs)
        {
            var apptDomElem = eventArgs.element();
            var sched = $find('<%= apptSched.ClientID %>');
            var apt = sched.getAppointmentFromDomElement(apptDomElem);
            var birthDate = apt.get_attributes().getAttribute("ClientBirthDate");
            var duration = apt.get_attributes().getAttribute("ApptLength");
            var notes = apt.get_attributes().getAttribute("Notes");                            
            if (notes == null)
                notes = "";

   // we have to obtain the span elements from the
// parent div and fill out the the details. 

// $('
spAppStart').update or $('spAppStart').innerHTML
// will not work when you move your mouse from one appointment to next.

    	$('divApptDetail').select('[id="spAppStart"]')[0].update(apt.get_start());
    $('divApptDetail').select('[id="spApptDuration"]')[0].update(duration);
    $('divApptDetail').select('[id="spApptSubject"]')[0].update(apt.get_subject());
    $('divApptDetail').select('[id="spApptBirthDate"]')[0].update(birthDate);
    $('divApptDetail').select('[id="spApptNotes"]')[0].update(notes);
           .. my call to show Tip ('divApptDetail');
      }
</script>
<div id="divApptDetail" class="text" style="display:none">
    <p><strong>When:</strong>  <span id="spAppStart"></span></P>
    <p><strong>Duration:</strong> <span id="spApptDuration"></span> minutes</P>
    <p><strong>Client Name:</strong> <span id="spApptSubject"></span></P>
    <p><strong>Client BirthDate:</strong> <span id="spApptBirthDate"></span></P>
    <p><strong>Notes:</strong> <span id="spApptNotes"></span></P>
</div>

thanks

Reuben
0
T. Tsonev
Telerik team
answered on 26 May 2008, 01:43 PM
Hello Reubix,

Sorry for the late reply. You can use anything you like, it is your application after all. We will do everything possible to help you.

I have created a sample that you can use to handle the mouseover event for appointments. It uses the Telerik.Web.UI.EventMap class which is part of the internal implementation of our controls, but it saves us a lot of work in this case. It is not likely that we will introduce breaking changes in this specific class in the future, so there is no need to worry about it.

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1"
    <script type="text/javascript"
        function pageLoad() 
        { 
            var eventMap = new Telerik.Web.UI.EventMap(); 
             
            var scheduler = $find('<%= RadScheduler1.ClientID %>'); 
            eventMap.initialize(scheduler); 
             
            eventMap.addHandlerForClassName("mouseover""rsApt", onAppointmentMouseOver); 
        } 
         
        function onAppointmentMouseOver(e) 
        { 
            var scheduler = $find('<%= RadScheduler1.ClientID %>'); 
            var appointment = scheduler.getAppointmentFromDomElement(e.eventMapTarget); 
             
            // ... 
        } 
    </script> 
</telerik:RadScriptBlock> 


Sincerely yours,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Raj Nemani
Top achievements
Rank 1
answered on 24 Jul 2008, 02:32 AM

Hello,

This is really interesting.  I am very interested in extending this appraoch and firing OnMouseOver, onClick events when user hovers on or clicks on Resource names on the Resource column.  To calrify, we are using scheduler in Timeline view.  I tried the following code

 var eventMap = new Telerik.Web.UI.EventMap();   
                    var scheduler = $find('<%= rdSchd.ClientID %>');   
                    eventMap.initialize(scheduler);   
                      
                    eventMap.addHandlerForClassName("click""rsMainHeader", mouseIn);   
                    //eventMap.addHandlerForClassName("mouseout", "rsMainHeader", mouseOut);   
                      
 
  function mouseIn(e) {  
                    var x = e;  
                 }  

THis works fine.  I inspected the e.EventMapTarget object and was able to find resource name etc using the standard DOM properties such as innerText etc.  But  I am struggling with one thing.  I need to some how access the Unique ID of the resource that I clicked. This is typically a database auto generated number in my case.  My question is how can I get(add) this number into the Scheduler DOM so that I can access this ID again using e.evetMapTarget during the execution my event handler (click event in the above case)

Thanks so much for your help,
Raj

0
T. Tsonev
Telerik team
answered on 25 Jul 2008, 01:53 PM
Hi Raj,

We can use the resource name to find it's client-side object and obtain the id through it:

<telerik:RadScriptBlock runat="server" ID="ScriptBlock1"
<script type="text/javascript"
    function findResourceByName(name) 
    { 
        var scheduler = $find('<%= RadScheduler1.ClientID %>'); 
        var result; 
        scheduler.get_resources().forEach( 
            function(resource) 
            { 
                if (resource.get_text() == name) 
                { 
                    result = resource
                    return; 
                } 
            } 
        ); 
         
        return result; 
    } 
</script> 
</telerik:RadScriptBlock> 
 

The usage would be like:

var resource = findResourceByName("Alex"); 
if (resource) 
  alert(resource.get_key()); 

You can also add resource type check in case you have more than one.

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Scheduler
Asked by
reubix
Top achievements
Rank 1
Answers by
reubix
Top achievements
Rank 1
T. Tsonev
Telerik team
Raj Nemani
Top achievements
Rank 1
Share this question
or