Select a slot by right click

6 posts, 0 answers
  1. Boris
    Boris avatar
    15 posts
    Member since:
    Aug 2015

    Posted 27 Jan Link to this post

    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

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 29 Jan Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Boris
    Boris avatar
    15 posts
    Member since:
    Aug 2015

    Posted 03 Feb in reply to Alexander Popov Link to this post

    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

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 05 Feb Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Boris
    Boris avatar
    15 posts
    Member since:
    Aug 2015

    Posted 09 Feb Link to this post

    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

  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 11 Feb Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready