HowTo: Drag and Drop with RadScheduler

We had a post on how to create advanced Calendars in your Essence Portal. A lot of the questions we got about this post was: how to enable Drag & Drop in such a Calendar? In this post we will show you how to do just that. First let's look at the actual Calendar that we used for this post:

Setting up the Calendar

By default the Telerik RadScheduler we use supports Drag & Drop. So without too much lines of code you are good to go. First thing you need to do is add some Event Handlers to the Calendar itself.

The OnClientAppointmentMoveStart is fired when the user starts dragging an Appointment from the Calendar. The OnClientAppointmentMoveEnd is fired when the user drops the Appointment on another timeslot from the Calendar. This will all happen on the Client Side, and to do the actual update of the Appointment from the code behind, you must specify the OnAppointmentUpdate Event Handler.

Be sure to set ReadOnly to false. If the Calendar has ReadOnly set to true, Drag & Drop is disabled all together.

Handle the Client Events

The Events are fired on the Client Side. So you need to do some Javascript there to handle the Events.

As you can see I did nothing here with the OnClientAppointmentMoveStart. It's just there to show you that you could do something here. Like using the Javascript to change some CSS classes or otherwise signal the user that something is happening. The real thing happening here is in the OnClientAppointmentMoveEnd. So let's break that one up.

OnClientAppointmentMoveEnd = function (sender, args) {
   var appointment = args.get_appointment();
   var newStartTime = args.get_newStartTime();
   appointment.set_start(newStartTime);
   showWait();
}

First you get the Appointment from the args. Next you get the new start time, which is the date and start time associated with the time slot where the Appointment was dropped. Last thing that should be done is to set the original start time to the new start time. Basically, that's all there is to it.

The update from the Appointment will be done in the code behind. So here I finish of the client script by showing a Wait animation so the user knows that something is happening in the backgorund.

Updating the Appointment from Code Behind

Once the Client Side Event is done, the Server Side OnAppointmentUpdate Event is executed. Here's what's happening there.

To update the Appointment, a few values are needed. First the ID of whatever you want to update. Next the new Start Date and Time. And with those two you have enough information to call a function where the actual update takes place. Here is, as an example, what happens in this case.

First we fetch the data from the item that should be updated. But in this case, that is not the actual item that needs an update. that's because we have an aggregation of different item plannings: Shipments, Arrivals and Deliveries.

So, based on what the source actually is, we fetch the source item. Set the property that contains the associated date and then do the update.

Since this may effect multiple items on the Calendar, we do a reload of the Calendar using the GetItemPlannings() that was also used when building the Calendar on first load.

One tricky thing though

Of course, there is always a tricky thing. To enable Drag & Drop for the Calendar, you must set ReadOnly to false. To make it is possible to click an Appointment and then go to that Appointment, you must set ReadOnly to true. So basically you should choose either one of them. But there is a way around that, and it even looks better too.

The way to go around is, it to place a LinkButton in the AppointmentTemplate:

This LinkButton Click can now be used instead of the Appontment Click. For that you need to assing the ID of the Appointment to the LinkButton's CommandArgument. This can be done in the rsItemPlannings_AppointmentCreated Event.

You can use FindControl to get the right LinkButton and then assign the ID to the CommandArgument. Once the LinkButton is clicked, you can then get the CommandArgument from that button and use it to execute the function you need.

Let's wrap it up

To enable Drag & Drop for the Calendar, you need to assign the associated Event Handlers in the RadScheduler and make sure you have set ReadOnly to false. Then you can handle the user actions for the Drag and the Drop Events. In the Drop Event you can prepare the update of the Appointmet. The actual update is then handled in the Code Behind.

That's all there is to it. Just a few lines of code that deliver maximum results and that will definitely make your users very happy.