Scroll Schedule when dragging appointment

[Simon]

Hi,

In week view, is it possible to auto scroll the schedule when dragging the appointment to the right or left edges of the current view, thus allowing appointments to be dragged into another week?

Does anyone have any working sample code?

Thanks

Simon

[Ivan Todorov]

Hello Simon,

Thank you for your question.

Currently, such functionality could not be implemented due to the internal implementation of RadScheduler. You are the first one to request such functionality and if more people request this, our team will consider implementing it in a future release.

I hope this information is useful.

Regards,
Ivan Todorov
the Telerik team

[Simon]

Hi,

When you say this can't be done. Which aspect cannot be done?
I can make the ActiveView.StartDate increment/decrement by 7 days when I drag an appointment close to the right or left hand edge. Then, I can update the Appointment Start and End to move to the next week.
However, unless I toggle the view, it does not seem to repaint the Appointment in its new position. It feels like I am close to getting this to work but need some help on the home stretch.

Regards

Simon Jackson

[Ivan Todorov]

Hi Simon,

I was able to achieve similar to the desired behavior by handling the MouseMove event of the RadScheduler control. Below is the implementation of it:

private void radScheduler1_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button == System.Windows.Forms.MouseButtons.Left &&
        this.radScheduler1.SchedulerElement.DragDropBehavior.IsDragging &&
        e.Location.X > this.radScheduler1.Size.Width)
    {
        IEvent draggedApp = this.radScheduler1.SchedulerElement.DragDropBehavior.ActiveFeedback.AssociatedAppointment;
        this.radScheduler1.SchedulerElement.DragDropBehavior.Drop();
        DateTime newStart = this.radScheduler1.ActiveView.EndDate.AddDays(1);
        TimeSpan oldDuration = draggedApp.Duration;
        draggedApp.Start = newStart;
        draggedApp.Duration = oldDuration;
        this.radScheduler1.ActiveView.StartDate = newStart;
    }
}

This code moves the appointment to the next week, but ends the drag operation. This is the closest to the desired behavior I could achieve.

The current architecture of RadScheduler is such that the drag operation cannot continue when the view is changed. In order to be able to implement such functionality, we need to replace the whole drag-and-drop logic which a fairly big task. That is why I cannot provide you with specific time frame in which we will address this request. I have logged this in our Public Issue Tracking System so you can subscribe to it and get notified about any changes of its status. Here is the link to the PITS item. As it gets more votes we will consider addressing it with higher priority.

I hope this is useful. Please let me know if you have any further questions.

Greetings,
Ivan Todorov
the Telerik team

[Simon]

Hi Ivan,

That is exactly what I was looking for.
Yes, I understand that your drag/drop is built around a single view. I hope you get chance to develop it further.

Kind regards

Simon

[Shawn Shaddock]

I also require this functionality.

For example:
I am using Resource grouping (for employees) and showing 4 resources. We need to be able to drag an appointment from one resource to another resource which is potentially not one of the 4 resources that are being displayed. Dragging to the edge and having the schedule scroll over to other resources would solve this issue.

[Ivan Todorov]

Hi Shawn,

By using the same approach as in my previous post, I have managed to create a working example. Here is the source code:

private void radScheduler1_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Left &&
                this.radScheduler1.SchedulerElement.DragDropBehavior.IsDragging &&
                (e.Location.X > this.radScheduler1.Size.Width || e.Location.X < 0))
            {
                int step = 1;
                if (e.Location.X < 0)
                {
                    step = -1;
                }

                IEvent draggedApp = this.radScheduler1.SchedulerElement.DragDropBehavior.ActiveFeedback.AssociatedAppointment;
                this.radScheduler1.SchedulerElement.DragDropBehavior.Drop();

                SchedulerDayViewGroupedByResourceElement dayView = this.radScheduler1.SchedulerElement.ViewElement as SchedulerDayViewGroupedByResourceElement;
                SchedulerMonthViewGroupedByResourceElement monthView = this.radScheduler1.SchedulerElement.ViewElement as SchedulerMonthViewGroupedByResourceElement;
                TimelineGroupingByResourcesElement timelineView = this.radScheduler1.SchedulerElement.ViewElement as TimelineGroupingByResourcesElement;

                if (dayView != null)
                {
                    dayView.NavigateToResource(dayView.ResourcesHeader.StartIndex + step);
                    draggedApp.ResourceId = this.radScheduler1.Resources[dayView.ResourcesHeader.StartIndex].Id;
                }
                if (monthView != null)
                {
                    monthView.NavigateToResource(monthView.ResourcesHeader.StartIndex + step);
                    draggedApp.ResourceId = this.radScheduler1.Resources[monthView.ResourcesHeader.StartIndex].Id;
                }
                if (timelineView != null)
                {
                    timelineView.NavigateToResource(timelineView.ResourcesHeader.StartIndex + step);
                    draggedApp.ResourceId = this.radScheduler1.Resources[timelineView.ResourcesHeader.StartIndex].Id;
                }

                this.radScheduler1.SchedulerElement.InvalidateMeasure(true);
                this.radScheduler1.SchedulerElement.UpdateLayout();
            }
        }

Hope you find it useful.

Greetings,
Ivan Todorov
the Telerik team

[Longnd]

Hi Ivan,

I try to do follow your code for scroll screen when drag & drop appointment but it can not run.
Could you attach your example program for me? I use Telerik Q3 2014 and Visual Studio 2010.
Thank you very much
Long

[Dess | Tech Support Engineer, Principal]

Hello Long,

Thank you for writing.

Note that the provided solution is applicable for 2011.2 11.831 version. Additionally, we introduced an improved RadScheduler in Q2 2014. You can find listed all addressed issues and new features in our release history.

When the RadScheduler.DragDropBehavior.AutoScrollDayViewOnDrag property is set to true, the appointment areas in DayView should be automatically scrolled in vertical direction when dragging off their bounds. However, in order to scroll horizontally to previous/next dates of the specific resource, you can set the RadScheduler.AllowViewNavigationOnDrag property to true.

In case you need to scroll to another resource when dragging horizontally, you can create a descendant of the AppointmentDraggingBehavior and override its HandleMouseMoveOutsideControlBounds. Thus, you can perform navigation to next/previous resource. Here is a sample code snippet:

public Form1()
{
    InitializeComponent();
    Color[] colors = new Color[]
    {
        Color.LightBlue, Color.LightGreen, Color.LightYellow,
        Color.Red, Color.Orange, Color.Pink, Color.Purple, Color.Peru, Color.PowderBlue
    };
    string[] names = new string[]
    {
        "Alan Smith", "Anne Dodsworth",
        "Boyan Mastoni", "Richard Duncan", "Maria Shnaider"
    };

    for (int i = 0; i < names.Length; i++)
    {
        Resource resource = new Resource();
        resource.Id = new EventId(i);
        resource.Name = names[i];
        resource.Color = colors[i];

        this.radScheduler1.Resources.Add(resource);
    }
    this.radScheduler1.GroupType = GroupType.Resource;
    this.radScheduler1.ActiveView.ResourcesPerView = 2;
    for (int i = 0; i < 5; i++)
    {
        Appointment app = new Appointment(DateTime.Now.AddHours(i), TimeSpan.FromMinutes(30),"App" + i ,"Info" + i);
        app.ResourceId = this.radScheduler1.Resources.First().Id;
        this.radScheduler1.Appointments.Add(app);
    }
    this.radScheduler1.DragDropBehavior.AutoScrollDayViewOnDrag = true;
    this.radScheduler1.AllowViewNavigationOnDrag = true;

    this.radScheduler1.SchedulerElement.DragDropBehavior = new CustomAppointmentDraggingBehavior(this.radScheduler1.SchedulerElement);
}

public class CustomAppointmentDraggingBehavior : AppointmentDraggingBehavior
{
    private DateTime lastAutoNavigation = DateTime.MinValue;

    public CustomAppointmentDraggingBehavior(SchedulerVisualElement activeOwner) : base(activeOwner)
    {
    }

    protected override void HandleMouseMoveOutsideControlBounds(Point mousePos, Rectangle controlRect)
    {
        if (DateTime.Now - lastAutoNavigation < this.DragNavigationInterval ||
            !this.Scheduler.AllowViewNavigationOnDrag ||
            this.ActiveFeedback.AssociatedAppointment.MasterEvent != null)
        {
            return;
        }

        lastAutoNavigation = DateTime.Now;

        if ((mousePos.X > controlRect.Right && this.Scheduler.ActiveViewType != SchedulerViewType.Month) ||
            (mousePos.Y > controlRect.Bottom && this.Scheduler.ActiveViewType == SchedulerViewType.Month))
        {
            this.Scheduler.SchedulerElement.NavigateToNextResource();
            this.MoveFeedback(null);
            typeof(AppointmentDraggingBehavior).GetField("lastDragOverCell", BindingFlags.NonPublic | BindingFlags.Instance).SetValue(this, null);
            this.SetAppointmentVisibility(this.ActiveFeedback.AssociatedAppointment, ElementVisibility.Collapsed);
        }
        else if ((mousePos.X < controlRect.Left && this.Scheduler.ActiveViewType != SchedulerViewType.Month) ||
                 (mousePos.Y < controlRect.Top && this.Scheduler.ActiveViewType == SchedulerViewType.Month))
        {
            this.Scheduler.SchedulerElement.NavigateToPreviousResource();
            this.MoveFeedback(null);
            typeof(AppointmentDraggingBehavior).GetField("lastDragOverCell", BindingFlags.NonPublic | BindingFlags.Instance).SetValue(this, null);
            this.SetAppointmentVisibility(this.ActiveFeedback.AssociatedAppointment, ElementVisibility.Collapsed);
        }
    }
}

I hope this information helps. Should you have further questions, I would be glad to help.

Regards,
Desislava
Telerik