How to drop an appointment from ASPxScheduler to an external control

This example illustrates how to drag and drop appointment info outside the ASPxScheduler area. The main difficulty of implementing this functionality is that the capability to drag appointments within the ASPxScheduler is built-in (see Appointments) and can conflict with our implementation. Of course, we can disable this capability by setting the SchedulerOptionsCustomization.AllowAppointmentDrag Property to the UsedAppointmentType.None value. However, it is not an elegant solution. Instead, we will add a special "Drag panel" DIV to an appointment template (see How to: Customize Appointment Appearance via Templates) and disable the built-in drag-and-drop functionality in its client-side onmousedown event handler by executing the following code:

[JScript]
setTimeout('if (__aspxDragHelper != null) __aspxDragHelper.cancelDrag();', 0);

We attach Draggable interaction from jQuery to our "Drag panel" so that it can be dragged. The DIV with the ASPxListBox inside (in the main page' markup) serves as a drop target. We attach Droppable interaction to it. The source code looks pretty simple:

[JScript]
function InitalizejQuery(s, e){
                $('.draggable').draggable({ helper: 'clone', appendTo: 'body', zIndex: 100 });
                $('.droppable').droppable({
                        activeClass: "dropTargetActive",
                        hoverClass: "dropTargetHover",
                        drop: function(ev, ui){var appointmentId = $(ui.draggable).find("input[type='hidden']").val();
                            listBox.AddItem(appointmentId);// Additional logic goes here...}});}

The appointment Id is passed via the hidden field.

The InitalizejQuery method is called from the client-side ControlsInitialized and EndCallback event handlers of the ASPxGlobalEvents Class. It is a recommended technique to perform jQuery-related actions with our controls (see ASPxTextBox - How to attach the jQuery AutoComplete plugin).

Here is a screenshot that illustrates a sample application in action during our custom drag-and-drop operation:

See Also:

ASPxScheduler - How to drag a row from ASPxGridView and create an appointment based on its values