Detect originating time slot in appointment context menu

[Marbry]

So I have a timeline view with many appointments that span many time slots.  When the user right clicks on an appointment and selects an item on the context menu, I need a way to tell on the client what time slot the right click originated from as well as which appointment.  In case they select to split the appointment into two separate ones, I need to know where on the timeline they opened the menu from to know where to split it.

Obviously I could open a dialog to allow them to do this, but it should be a one step operation rather than have them specify the same information again in a different manner.

I didn't see anything obvious, but I thought it might be buried in there somewhere.

[Princy]

Hi,

Try the following code snippet to achieve your scenario.

C#:

protected void RadScheduler1_AppointmentContextMenuItemClicked(object sender, AppointmentContextMenuItemClickedEventArgs e)
{
    //To get the Appointment
    Appointment Appointment = e.Appointment;
    //To get the DateTime
    DateTime time = e.Appointment.Start;
}

Hope this helps.

Regards,
Princy.

[Marbry]

Thank you for your response, but that's not what I described.

Your example is on the server not on the client.  And it just gets the start of the appointment, not the corresponding time slot from the right click location on the appointment.

[Princy]

Hi Marbry,

Try the following code snippet.

JS:

<script type="text/javascript">
    function OnClientAppointmentContextMenuItemClicked(sender, args) {
        //to get the appointment
        var appointment = args.get_appointment();
        //to get the timeslot
        var timeslot = args.get_appointment().get_timeSlot();
    }
</script>

Hope this helps.

Regards,
Princy.

[Marbry]

I'm afraid that get_timeSlot() just gets the first time slot in the currently visible range for that appointment, not the one corresponding to the click location.

I thought there might be some way to pass the mouse coordinates to a method on the scheduler to get the time slot, but I don't know what it would be if so.

[Boyan Dimitrov]

Hello,

We are aware of that issue and its is already fixed in our RadControls Q3 2012 Service Pack2 released on 8th oh January this year. In that version the appointment.get_timeSlot() returns the corresponding time slot instead the first time slot in current view.

Regards,
Boyan Dimitrov
the Telerik team

[Marbry]

Ah, excellent.  I'll update and give that a try.  Thank you.

I was getting ready to try and hack something up by extracting the DOM element then trying to backtrack that to get the time slot.

[Marbry]

I'm afraid that didn't work.  I upgraded to v4.0.30319, but it's still exhibiting the same behavior.

function AppointmentContextMenuItemClicked(sender, args)
{
    if (sender == undefined)
        return;

    var clickedItem = args.get_item();
    var appt = args.get_appointment();
    var ts = appt.get_timeSlot();
}

"ts" will still have the time slot that is the first in the visible range for the appointment rather than the one under the right click to open the context menu.

I also tried it on the OnClientAppointmentContextMenu and OnClientAppointmentClick handlers with the same results.

[Marbry]

Ok, I managed to hack together something that does return the time slot.  I hope that updates don't break it, but it seems to work for now.

SchedulerRightClick() is the handler for the OnClientAppointmentContextMenu event.

function SchedulerRightClick(sender, args)

{

    var elems = $telerik.$(".rsAllDayRow");

    var tsDOMElement;

    var ts;

    var tmpObj;

    var tmpX = 0;

    var tmpY = 0;

    var currObj;

    var appt = args.get_appointment();

 

    for (var i = 0; i < elems.length; i++)

    {

 

        for (var j = 0; j < elems[i].cells.length; j++)

        {

            currObj = elems[i].cells[j];

 

            tmpX = currObj.offsetLeft;

            tmpY = currObj.offsetTop;

            tmpObj = currObj.offsetParent;

 

            while (tmpObj)

            {

                if (tmpObj.style.position == "absolute")

                    break;

 

                tmpX += tmpObj.offsetLeft;

                tmpY += tmpObj.offsetTop;

 

                tmpObj = tmpObj.offsetParent;

            }

 

            if (ISPointInRect(window.event.clientX, window.event.clientY, tmpX, tmpX + currObj.offsetWidth, tmpY, tmpY + currObj.offsetHeight))

            {

                tsDOMElement = currObj;

                break;

            }

        }
           if (tsDOMElement != undefined)
                 break;


    }

 

    if (tsDOMElement != undefined)

    {

        ts = appt._owner._activeModel.getTimeSlotFromDomElement(tsDOMElement);

    }

}

 

 

function ISPointInRect(ptX, ptY, rectLeft, rectRight, rectTop, rectBottom)

{

    if (ptX <= rectRight && ptX >= rectLeft && ptY >= rectTop && ptY <= rectBottom)

        return true;

    else

        return false;

}

So "ts" should end up being a reference to the time slot that corresponds to the position of the right click on the appointment to open the context menu.  I figure on setting a javascript global variable or something that can then be referenced from the subsequent OnClientAppointmentContextMenuItemClicked event handler.

[Boyan Dimitrov]

Hello,

It seems that there was a little misunderstanding in our communication since my last response.
Updating the RadControls version to the current latest official release( Q3 2012 Service Pack2) will avoid that issue. As far as I understood you have updated your .NET framework, which will not solve that issue.
Please find the attached image demonstrating how you can update your RadControls version. 

Regards,
Boyan Dimitrov
the Telerik team

[Marbry]

 No, I updated the control suite to 2012.3.1322.40.

[Boyan Dimitrov]

Hello,

Please find attached a sample project that demonstrates the the described approach.
In order to avoid any further confusions I have recorded a video that demonstrates the application behavior at my side using RadControls version 2012.3.1322.40.
I also would like to summarize the implemented functionality:
//markup code

<telerik:RadScheduler runat="server" ID="RadScheduler1" OnClientAppointmentClick="ClientAppointmentClick">
    </telerik:RadScheduler>

//JavaScript

function ClientAppointmentClick(sender, args) {
    var appointmentTimeSlotStartTime = args.get_appointment().get_timeSlot().get_startTime();
    var appointmentTimeSlotEndTime = args.get_appointment().get_timeSlot().get_endTime();
    debugger;
    alert("Timeslot start time:" + appointmentTimeSlotStartTime + " Timeslot end time:" + appointmentTimeSlotEndTime);
}

Kind regards,
Boyan Dimitrov
the Telerik team

[Marbry]

Thank you, but that doesn't really illustrate what I was talking about.

Your appointments did not span time slots.  It was still returning the first time slot in the visible range for each appointment.

So say you have 5 visible time slots (Monday - Friday) and an appointment that spans all 5.  If you right click on the appointment over time slot Wednesday, that client function will return time slot Monday, not time slot Wednesday.

[Boyan Dimitrov]

Hello,

It seems that there was a little misunderstanding in our communication.
Indeed clicking on the appointment will return the corresponded time slot object to the  clicked appointment and not to the mouse position at that moment.
I am afraid that such scenario is not supported with RadScheduler control.

Thank you for sharing your custom solution to that scenario with our community.

Regards,
Boyan Dimitrov
the Telerik team

[Marbry]

I haven't tested them, but it looks like there are some new IE10+ functions that would be useful with this type of scenario.  The fact that it's IE specific, and only available from IE10 might limit their usefulness for some for a while though.

Specifically,

  msElementsFromPoint
  msElementsFromRect

These are supposed to retrieve nodes for all the elements in the "stack" under the given point, or intersecting the specified rectangle.

[Boyan Dimitrov]

Hello,

Thank you for sharing information about those new IE10+ functionalities with the community.


Regards,
Boyan Dimitrov
Telerik