Scheduler for ASP.NET Web Forms - How to drop an appointment from Scheduler to an external control

This example demonstrates how to drag and drop appointment info from ASPxScheduler to an outside area.

Implementation Details

The built-in drag-and-drop functionality in the ASPxScheduler can conflict with a custom implementation. To resolve the conflict, add a div element (drag panel) to an appointment template and disable the built-in drag-and-drop functionality in its onmousedown event handler.

<div class="draggable" style="background: blue;" onmousedown="DragPanelHold();">

function DragPanelHold() {
    // disable built-in dragging logic
    setTimeout('scheduler.mouseHandler.SwitchToDefaultState();', 0);
}

Attach the Draggable jQuery interaction to the drag panel so that it can be dragged. Attach the Droppable jQuery interaction to a drop target - adiv element with the ASPxListBox inside.

<div class="droppable">
	<dx:ASPxListBox ID="ASPxListBox1" runat="server"  ClientInstanceName="listBox">
	    <Items>
	        <dx:ListEditItem Text="Drop appointments here" Value="Drop appointments here" />
	    </Items>
	</dx:ASPxListBox>
</div>

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...
            }
        }
    );
}

Call the InitalizejQuery method in the ASPxGlobalEvents.ControlsInitialized and ASPxGlobalEvents.EndCallback event handlers.

<dx:ASPxGlobalEvents ID="ASPxGlobalEvents1" runat="server">
    <ClientSideEvents ControlsInitialized="InitalizejQuery" EndCallback="InitalizejQuery" />
</dx:ASPxGlobalEvents>

Files to Review

• CustomVerticalAppointmentTemplate.ascx (VB: CustomVerticalAppointmentTemplate.ascx)
• Default.aspx (VB: Default.aspx)

Documentation

• How to: Customize Appointment Appearance via Templates

More Examples

• Text Box for ASP.NET Web Forms - How to apply the jQuery AutoComplete plugin to an editor
• Scheduler for ASP.NET Web Forms - How to drag a row from ASPxGridView to ASPxScheduler
• Scheduler for ASP.NET Web Forms - How to drag-and-drop an appointment from an external control