Rad Scheduler appointment- Width gets reduced during drag and on cancel do not restore original width.

[Sathyendranath]

Hi Team,

We are using the Telerik RadScheduler control in our ASP.NET Web Application, configured with a Timeline view and vertical resource grouping. Appointments are displayed in the content pane, similar to the example provided in the following link, with the key difference being that resource grouping is set to vertical:

https://demos.telerik.com/aspnet-ajax/scheduler/examples/timelineview/defaultcs.aspx

Appointments are editable for drag-and-drop functionality. We have also implemented a confirmation dialog that appears when a user drops an appointment. If the user selects "No", the appointment reverts to its original position.

Reference for the confirmation dialog implementation:
https://www.telerik.com/forums/display-a-confirmation-dialog-box-for-scheduler-drag-and-drop

Issue:

We are encountering a UI issue when a user drags an appointment to the first hour in the timeline view. If the appointment is moved slightly beyond the start of the timeline (into the previous period), it visually shrinks in width. Upon triggering the confirmation dialog and selecting "No", the appointment correctly returns to its original position, but its visual width remains reduced. This is corrected only upon a manual page refresh. Images shown below for reference.

Before Drag:

During Drag:

After Cancel drop:

Request:

Is there a recommended approach to restore the original visual dimensions of the appointment without requiring a manual refresh? We would like to maintain a consistent UI state immediately after canceling the drag operation.

 

Thanks

Sathyendranath

[Vasko]

Hello Sathyendranath,

Thank you for the detailed explanations and screenshots of the issue, however, I was not able to reproduce it on my end.

Nevertheless, one possible solution would be to get the original width of the appointment when you start draggin it and set it to the same appointment when you stop dragging it, therefore having the same width: 

var originalWidth;

function onClientAppointmentMoveStart(sender, args) {
    var appointmentElement = args.get_appointment().get_element().clientWidth;
    originalWidth = appointmentElement.style.width;
}

function onClientAppointmentMoveEnd(sender, args) {
    var userConfirmed = confirm("Do you want to move this appointment?");
    if (!userConfirmed) {
        var appointmentElement = args.get_appointment().get_element().clientWidth;
        appointmentElement.style.width = originalWidth;
    }
}

Finally, if the above suggestion does not help out, please try to isolate the issue in a runnable sample project and send it for additional research. This will help me understand the problem better and find a potential fix.

Regards,
Vasko
Progress Telerik