RadScheduler calendar item jumps when dragging to a different time slot

[Ahmed]

Hi all.

 

A client of ours is using the RadScheduler control in ASP.NET Webforms and have noticed an issue where if we:

 

- create a new entry

- drag the entry to, say, the end of the day (i.e 5pm)

- CLICK on it again to drag, it will jump to further up the page (the entry) which is incorrect.

 

Why would this behavior occur and what is the fix for this?

 

I have attached a video for illustration. As you can see, after there is an entry and I click on it to move to a different time slot, it immediately jumps further up the page when it should not.

 

Here is the code:

 

<telerik:RadScheduler ID="RadScheduler1" runat="server" Height="100%"
                RowHeight="22" Skin="Web20" EnableEmbeddedSkins="false" SelectedView="MonthView"
                DayStartTime="07:00:00" DayEndTime="18:00:00" WorkDayStartTime="07:00:00" WorkDayEndTime="17:00:00"
                HoursPanelTimeFormat="hh:mm tt" TimeLabelRowSpan="4" MinutesPerRow="15" NumberOfHoveredRows="1"
                TimelineView-UserSelectable="false" MonthView-AdaptiveRowHeight="false" MonthView-VisibleAppointmentsPerDay="2"
                MonthView-HeaderDateFormat="MMMMMMMMM, yyyy" AdvancedForm-Enabled="false" AdvancedForm-ZIndex="-1"
                StartInsertingInAdvancedForm="true" StartEditingInAdvancedForm="true"

                OnClientAppointmentInserting="InterceptNewAppointmentEvent"
                OnClientAppointmentClick="InterceptAppointmentClickEvent"
                OnClientAppointmentDoubleClick="InterceptAppointmentClickEvent"
                OnClientAppointmentEditing="InterceptAppointmentEditingEvent"
                OnClientAppointmentDeleting="ConfirmAppointmentDelete"
                OnClientAppointmentMoving="AdjustTargetSlotForScroll"
                OnClientAppointmentMoveEnd="ConfirmAppointmentMove"
                OnClientAppointmentResizeEnd="ConfirmAppointmentDurationChange"

                OnAppointmentCreated="RadScheduler1_AppointmentCreated"
                OnAppointmentDelete="DeleteAppointment"
                OnAppointmentUpdate="UpdateAppointment"
                OnAppointmentContextMenuItemClicking="RadScheduler1_AppointmentContextMenuItemClicking"

                OnNavigationComplete="NavigationComplete"

                DisplayDeleteConfirmation="false" DisplayRecurrenceActionDialogOnMove="false"
                >
                <AppointmentContextMenuSettings EnableDefault="true" />
                <TimelineView SlotDuration="00:15:00" GroupingDirection="Vertical"  />
                <AppointmentContextMenus>
                    <telerik:RadSchedulerContextMenu ID="RadSchedulerAppointmentContextMenu1" runat="server">
                        <Items>
                            <telerik:RadMenuItem Text="Duplicate" Value="Duplicate">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadSchedulerContextMenu>
                </AppointmentContextMenus>
            </telerik:RadScheduler>
            </div>
            <telerik:RadWindowManager ID="radWindowManager" runat="server">
                <Windows>
                    <telerik:RadWindow ID="radDialog" runat="server" Title="" Width="600" Height="644"
                        InitialBehaviors="None" Behaviors="None" BorderWidth="0" KeepInScreenBounds="true"
                        VisibleOnPageLoad="false" VisibleStatusbar="false" VisibleTitlebar="false" Skin="Web20" EnableEmbeddedBaseStylesheet="false"
                        NavigateUrl="" Modal="true" DestroyOnClose="false" ShowContentDuringLoad="false"
                        OnClientClose="ReloadSchedule"  OnClientBeforeShow="document.documentElement.focus();">
                    </telerik:RadWindow>
                </Windows>
            </telerik:RadWindowManager>

 

 

This *could* also be of interest

 

 
/* There was bug in the RadScheduler that offset the floating appointment when the scroll area was anywhere
         * but the top. This function is an attempt to correct that using the element the mouse is currently over,
         * which was still registering correctly. */
function AdjustedTargetSlot(schedulerControl, x, y) {
            elementMouseIsOver = document.elementFromPoint(x, y);
            var adjustedTargetSlot = schedulerControl.get_activeModel().getTimeSlotFromDomElement(elementMouseIsOver);
            return adjustedTargetSlot;
        }
 
function AdjustTargetSlotForScroll(schedulerControl, event) {

            var scrollDepth = schedulerControl.get_scrollTop()
            var x = window.event.clientX;
          
            var y = window.event.clientY;

            var elementMouseIsOver = document.elementFromPoint(x, y);

            event._targetSlot = schedulerControl.get_activeModel().getTimeSlotFromDomElement(elementMouseIsOver);
            var appointmentObj = event.get_appointment();
            var appointmentElem = appointmentObj.get_element();
            appointmentElem.style.top += scrollDepth;
            return;
        }
        function MoveAppointment() {

            // Adjusts the target time slot for the appoinment to the slot under the cursor.
            var x = window.event.clientX;
            var y = window.event.clientY;
            globalEvent._targetSlot = AdjustedTargetSlot(globalSchedulerControl, x, y);
            globalEvent._newStartTime = event.get_targetSlot().get_startTime();
            var appointment = globalEvent.get_appointment();

            var parameters = new Object();
            parameters.Command = "Move";
            parameters.AppointmentID = appointment.get_internalID();
            parameters.EditSeries = false;
            parameters.SourceSlotIndex = appointment.get_timeSlot().get_index();
            parameters.TargetSlotIndex = globalEvent.get_targetSlot().get_index();
            __doPostBack("RadScheduler1", JSON.stringify(parameters));

            return false;
        }

 

[Peter Milchev]

Hi Ahmed, can you please verify if this is replicated in all browsers? 

Also, there used to be an issue with the scroll position introduced by a browser's breaking change but it is fixed in the later versions. Is the application you have with a recent version(e.g. after R1 2018)?

• https://www.telerik.com/forums/known-issues-and-important-changes#4364418 

[Ahmed]

Thank you. Yes, this happens on all browsers. Edge and Chrome are the primary browsers

[Peter Milchev]

Hi Ahmed,

Please try the attached project and see if the issue is replicated with it. If it is, please share more details on

• the device you use,
• the monitor specification (size and resolution) 
• the resolution and zoom set for the Windows
• the browser zoom
• is the issue replicated in FireFox

If you cannot replicate the issue with the attached project, please modify it so it starts exhibiting the issue. Then please share a video so we can follow your exact steps and the modified aspx and aspx.cs files. 

Regards,
Peter Milchev
Progress Telerik