Width gets reduced during drag and on cancel do not restore original width

[hanna]

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:

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.

[Rumen]

Hi Hanna,

I tried to reproduce the reported issue but without success. Can you please test the reported scenario in the following live demo https://demos.telerik.com/aspnet-ajax/scheduler/examples/resourcegrouping/defaultcs.aspx and try to replicate it? 

If the problem persists there please provide reproduction steps.

If the problem is not reproducible, please try the following on your side:

• Review CSS for Global Overrides

  • Inspect your stylesheets for global CSS rules affecting table, tr, or td elements (for example, width: 100% or display: block). Such rules can interfere with appointment sizing during drag-and-drop. Ensure that no global rules are unintentionally impacting the scheduler's inner elements.

• Restore Width on Drag Cancel (Client-Side)

  • Use RadScheduler's client-side events to reset the appointment width if a drag operation is cancelled. You can store the original width before the drag starts and restore it if the move is not confirmed.

  Example approach:

  var originalWidth = null;
  
  function OnClientAppointmentMoveStart(sender, args) {
      var aptElement = args.get_appointment().get_element();
      originalWidth = aptElement.style.width;
  }
  
  function OnClientAppointmentMoveEnd(sender, args) {
      // Check if the move was cancelled
      if (!args.get_targetSlot()) {
          var aptElement = args.get_appointment().get_element();
          aptElement.style.width = originalWidth || '';
      }
  }
  

  Attach these handlers to your RadScheduler:
  
  

  <telerik:RadScheduler 
      OnClientAppointmentMoveStart="OnClientAppointmentMoveStart"
      OnClientAppointmentMoveEnd="OnClientAppointmentMoveEnd"
      ... />

• Upgrade to the latest version - https://www.telerik.com/products/aspnet-ajax/documentation/upgrade-compatibility/upgrading-instructions/upgrading-a-trial-to-a-developer-license-or-to-a-newer-version#upgrade-to-a-newer-version-of-telerik-ui-for-asp-net-ajax. 

Regards,
Rumen
Progress Telerik