Select a slot by right click

[Boris]

Hello,

I have a scheduler with context menu, which is displayed on mouse right click.

I have a problem with this scenario:

1. I select some slot in the scheduler by left mouse button.

2. I scroll the scheduler till the selected slot goes out of the current viewport and is not visible.

3. I right click some other slot.

Now I would like the slot where I right-clicked to be selected. Instead of this, the scheduler is automatically scrolled to display the previously selected slot and some other (totally different) slot is selected.

Is it possible to select a slot by right-click and to get rid of this automatic scrolling?

 

Boris

[Alexander Popov]

Hello,

You can try using the ContextMenu's open event to select the correct slot. For example: 

var slot = scheduler.slotByElement($(e.target));
scheduler.select({start: slot.startDate, end: slot.endDate});

Regards,
Alexander Popov
Telerik

 

 

[Boris]

The code you've posted doesn't work. It works for opening the menu with mouse left-click, but I'd like to open the menu on right click. In this case the Open event is called too late, after the scheduler scrolls. So in slot variable, there is a slot where the mouse is placed after the automatic scrolling. I need the slot where the mouse was right-clicked before the automatic scroll.

 Boris

[Alexander Popov]

Hi,

I apologize for misleading you. In that case you can try manually attaching a mousedown event handler to the table element used for rendering the view. For example: 

scheduler.view().table.on("mousedown", function(e) {
  if(e.which === 3) {
        var slot = scheduler.slotByElement($(e.target));
        scheduler.select({start: slot.startDate, end: slot.endDate});
  }
});

That will change the selection upon click, thus avoiding the scroll.

Regards,
Alexander Popov
Telerik

 

 

[Boris]

Hello,

thank you, your code helped me a lot. But I still have problems on the month view. It seems that the code is not working on this view, selection is not performed.

I modified the first scheduler demo (http://demos.telerik.com/kendo-ui/scheduler/index). I set selectable: true; to the scheduler and I put your code just behind the creation of the scheduler:

var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.view().table.on("mousedown", function(e) {
    if(e.which === 3) {
            var slot = scheduler.slotByElement($(e.target));
            scheduler.select({start: slot.startDate, end: slot.endDate});
    }
});

In month view, the code is not working. 

 

Boris

[Alexander Popov]

Hello,

This happens because the isAllDay option is not passed to the select method. Here is an improved example: 

scheduler.select({start: slot.startDate, end: slot.endDate, isAllDay: slot.isDaySlot});

Regards,
Alexander Popov
Telerik

 

 

[Jason]

I am facing the same issue and your solution is not working for me.  I am using kendo MVC

[Dimitar]

Hello Jason,

Could you confirm if the issue that you are facing is with initializing a ContextMenu over the Scheduler content as the initial post described? If this is the case, I would suggest referring to the following HowTo example that demonstrates a similar scenario:

• Editing Scheduler by using ContextMenu.

Regards,
Dimitar
Progress Telerik