Scheduler Scrolling to Top when clicking on the appointment and opening context

[AsgParticipant]

I was trying to implement the context menu when the user clicks on a button on an appointment. As we can’t add buttons in appointment customization
I implemented a way to check if the user clicked on the upper left corner of the appointment, where my button is located but when I try to open the context menu there with the “openMenu” method then the context menu opens for a second and also the scheduler scrolls to the top and then back to the appointment, which causes the context menu to loses focus and it closes.

Is there a way to stop that scrolling and stay on the appointment so that the context menu remains open.

Here is My code

appointmentClick(event) {
     
     // for checking if the user clicked on the top left of the appointment
     if (event.args.owner.mouseDown.top - event.args.owner.selectedAppointmentBounds.top < 20 && event.args.owner.mouseDown.left - 
         event.args.owner.selectedAppointmentBounds.left < 25)  {
          //opening the context menu at that position
          this.scheduler.openMenu(event.args.owner.mouseDown.left, event.args.owner.mouseDown.top);
      }
}

The scroll is not triggered by any other element on the page it is the scheduler that does the scroll.

[adminKeymaster]

Hi Asg,

The appointment customization dialog can be extended as shown in this demo: https://www.jqwidgets.com/angular/angular-scheduler/angular-scheduler-editdialog.htm?material. The demo shows how to add custom button in the dialog.

As for the context menu, you need to handle the contextMenuCreate and contextMenuOpen events: https://www.jqwidgets.com/angular/angular-scheduler/angular-scheduler-contextmenu.htm?material.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[AsgParticipant]

Hello Hristo,

I think you didn’t understand me clearly as I was talking about customizing the appointment instead of the appointment dialog. As demonstrated in this example: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/scheduler-appointment-customization.htm?material .

I like to insert a button or just open the context menu when the user clicks on the upper-left corner of the appointment. For now, it works but does not retain the focus as the scheduler scrolls up when I click on the appointment and open the menu. I am also handling contextMenuCreate and contextMenuOpen methods.

I just want to disable that scroll and just open the context menu on left click on the top-right corner of the appointment and they should retain there focus and do not disappear.

The scroll is not triggered by any other element on the page it is the scheduler that does the scroll.

[adminKeymaster]

Hi Asg,

Actually, I am Peter. Hristo and Martin are my colleagues from the jQWidgets support team, who can assist you in the Forum or in the support email.
The scrolling comes from the Scheduler, indeed. That scrolling ensures that the appointment is in the view, when you select the appointment. If you insert a custom button, its Click event, which you probably handle in your code bubbles up in the DOM as the javascript events bubble up to the Document element. In order to stop this, in your click handler, you can use event.stopPropagation(); and event.preventDefault();

Hope this helps.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts