RadScheduler calendar item jumps when dragging to a different time slot

1 Answer 15 Views
Scheduler
Ahmed
Top achievements
Rank 1
Iron
Ahmed asked on 25 Apr 2022, 10:25 PM | edited on 25 Apr 2022, 10:39 PM

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
Telerik team
commented on 28 Apr 2022, 02:05 PM

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)?

Ahmed
Top achievements
Rank 1
Iron
commented on 28 Apr 2022, 04:10 PM

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

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 21 Jun 2022, 03:12 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Scheduler
Asked by
Ahmed
Top achievements
Rank 1
Iron
Answers by
Peter Milchev
Telerik team
Share this question
or