Implement Drag and Drop to WebScheduler using WebDragDropExtender

In WebScheduler, events can be dragged and dropped from one cell to another cell in scheduler area. Related to this functionality, we have received requests to support drag and drop behavior from another control to WebScheduler where a new event will be created upon the drop action. Using Build 217 or higher, it is now possible to implement drag and drop behavior from another control to WebScheduler, with the help of WebDragDropExtender control.

WebDragDropExtender allows you to add drag and drop behavior between server or HTML controls. When implementing drag and drop behavior to WebScheduler, you can use any controls as DragControl as long as the drag behavior has been implemented in that control. In this blog, WebGrid is used as DragControl, as the drag behavior is a built-in implementation in WebGrid.

First, add WebScheduler and WebGrid to a page. Ensure all the events and data is displayed properly in both controls before you continue to the next step.

In WebScheduler, the AllowDropFromExtender property needs to be enabled and the editing capabilities need to be enabled as well.

Next, add WebDragDropExtender control to the page. Add WebGrid in DragControls collection and WebScheduler in DropControls collection of WebDragDropExtender.

The following steps are needed to add WebGrid in DragControls collection:

1. Choose DragControls property and open WebDragControl Collection Editor dialog box.
2. Set WebGrid’s ID as the value of ControlID property.
3. Choose AdvancedProperties and AdvancedProperties dialog box will be opened.
4. Check Enable special integration with Intersoft control checkbox and check Allow dragging on checked rows checkbox. Note that WebGrid should have rowchecker-typed column.
5. Press OK in both dialog boxes.
   

   WebDragControl Collection Editor dialog box

Â
The following steps are needed to add WebScheduler in DropControls collection:

1. Choose DropControls property and open WebDropControl Collection Editor dialog box.
2. Set WebScheduler’s ID as the value of ControlID property.
3. Type the following attributes: Type=Custom,ComponentType=WebScheduler,DropableOnCell=True, in AdvancedProperties property.
4. Press OK.
   

   WebDropControl Collection Editor dialog box

Â
Finally, add OnDragStart and OnDragDrop client-side events in WebDragDropExtender control. 

Add the following code in OnDragStart client-side event. The code will reinitialize drop controls every time the drag behavior started. This is needed because the selected view mode in WebScheduler might be different every time a drag behavior started, e.g: when user first drags a row and drop it to WebScheduler, the active view mode is Day view. Then, he changes the view mode to Month view. In this case, the drop controls needs to be reinitialized in order for the drag and drop behavior to work perfectly.

In OnDragDrop client-side event, you can implement the drop action according to your scenario. In this case, we will implement the code to add a new event according to the active view mode.

Now, you can drag a row from WebGrid and drop it to WebScheduler in any cell area that you want. The selected dropped area is indicated by a dashed line border in the cell, enabling user to easily see whether or not the selected droppable area is the correct date and time to drop the object.

When the row is dropped, a new event will be created in the selected cell area. Note that previously abc row is dragged from WebGrid and dropped to 12 PM cell area. After it’s dropped, a new event with abc as its subject, will be created in 12 PM cell area with 30 minutes duration (can be specified in the code).

This drag and drop behavior is applicable in view modes that include cells in its layout, so Agenda, Year, and Quarter views are not supported. You can download the sample here. Feel free to give feedback or comments. Have a great day !