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

1 Answer 14 Views
Scheduler
Sathyendranath
Top achievements
Rank 1
Iron
Iron
Sathyendranath asked on 15 May 2025, 06:25 AM

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

1 Answer, 1 is accepted

Sort by
0
Vasko
Telerik team
answered on 19 May 2025, 12:48 PM

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

    Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
    Tags
    Scheduler
    Asked by
    Sathyendranath
    Top achievements
    Rank 1
    Iron
    Iron
    Answers by
    Vasko
    Telerik team
    Share this question
    or