onmouseover event for appointment

[reubix]

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.
  }

[reubix]

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

[reubix]

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

[T. Tsonev]

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

[Raj Nemani]

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

[T. Tsonev]

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.