Display a confirmation dialog box for Scheduler drag and drop.

[Sathyendranath]

Hi Team,

We are currently using the Telerik RadScheduler control in our ASP.NET Web Forms application. As part of a new requirement, we need to enable drag-and-drop functionality to move appointments between resources.

During this drag-and-drop operation, we would like to display a confirmation dialog with OK and Cancel buttons:

If the user clicks OK, the appointment move should proceed.

If the user clicks Cancel, the move should be cancelled without any changes.

 We attempted to use radconfirm() within the OnClientAppointmentMoveEnd event to achieve a confirmation dialog similar to the native JavaScript confirm() function. However, we were unable to achieve the expected behavior.

Specifically, when handling the user response and attempting to proceed with the move via scheduler.moveAppointment(appointment, targetSlot);, we encountered the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'get_index')

 Code tried:

function onAppointmentMoveEnd(sender, eventArgs) {

     var appointment = eventArgs.get_appointment();
     var targetSlot = eventArgs.get_targetSlot();
     var scheduler = sender;

     // Cancel the automatic move until user confirms
     eventArgs.set_cancel(true);

     radconfirm("Are you sure you want to move this appointment?", function (userConfirmed) {
         if (userConfirmed) {

           eventArgs.set_cancel(false);

             // Manually perform the move
             scheduler.moveAppointment(appointment, targetSlot);
         }
         // else: Do nothing (cancelled)
         {
             eventArgs.set_cancel(true);
         }
     }, 300, 150, null, "Confirm Move");

}

Could you please suggest the recommended approach to implement this behavior effectively with code samples or reference link ?

We appreciate your guidance on this.

Thanks

Sathyendranath.

[Attila Antal]

Hi Sathyendranath,

Your approach was close. Adjust your code with the following:

• Cancel the appointment whenever the event triggers. (This will only trigger if the operation is performed by hand.)
• Pass all 4 parameters to the moveAppointment() method:
  1. appointment
  2. editSeries
  3. sourceSlot
  4. targetSlot

<script>
    function OnClientAppointmentMoveEnd(sender, args) {
        args.set_cancel(true); // Always Cancel the move by hand

        var scheduler = sender;
        var appointment = args.get_appointment();
        var sourceSlot = appointment.get_timeSlot();
        var targetSlot = args.get_targetSlot();
        var editSeries = false;

        // Show a confirmation to user
        radconfirm("Are you sure you want to move this appointment?", function (userConfirmed) {
            if (userConfirmed) {
                // Only move the app programmatically if the user confirmed it.
                scheduler.moveAppointment(appointment, editSeries, sourceSlot, targetSlot);
            }
        }, 300, 150, null, "Confirm Move");
    }
</script>

 

Regards,
Attila Antal
Progress Telerik

[Sathyendranath]

 Hi Attila,

Thank you for your recommendation. The provided code successfully resolved the initial issue.

However, after implementing the confirmation dialog using scheduler.moveAppointment(...) within the OnClientAppointmentMoveEnd event, we observed an unexpected behavior on the server side. Specifically, the e.ModifiedAppointment.Start value appears to be incorrect.

Interestingly, when the confirmation dialog is removed and the default drag-and-drop behavior is used, the e.ModifiedAppointment.Start value is accurate.

We would appreciate any insights or suggestions you may have regarding this behavior.

Regards,

Sathyendranath 

[Attila Antal]

Hi Sathyendranath,

I have tested this solution on my computer and both the e.Appointment.Start and e.ModifiedAppointment.Start are correct. If this is not true for your case, that could mean that you're doing something different.

Since that topic would be different from the one you asked in this forum post, I suggest that you open a new forum post and share all the details you can to replicate the problem and we will look into it.