Drag and drop items onto RadScheduler for Silverlight

We all are aware that users tend to look for the easiest and most rational way to do something. That is why developers always strive to create their products' interface as intuitive as possible. Speaking in this context, dragging and dropping helps us improve user experience significantly and make end users happier.

In this blog post I will explain how we can use RadDragAndDrop to enable users drag items from a certain control and drop them over RadScheduler, while notifying about that. Of course, the described scenario could be extended to act in many different scenarios.

1. Let us say we will drag items from a listbox to a scheduler control. The xaml should look like:
   

   <Grid x:Name="LayoutRoot">

   <Grid.ColumnDefinitions>

   <ColumnDefinition Width="100" />

   <ColumnDefinition />

   </Grid.ColumnDefinitions>

   <ListBox x:Name="listBox" >

   <ListBox.ItemContainerStyle>

   <Style TargetType="ListBoxItem">

   <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" />

   </Style>

   </ListBox.ItemContainerStyle>

   <ListBox.ItemTemplate>

   <DataTemplate>

   <TextBlock Text="{Binding}" />

   </DataTemplate>

   </ListBox.ItemTemplate>

   </ListBox>

   <Controls:RadScheduler Grid.Column="1" Name="Scheduler" />

   </Grid>

   Please note that we must set the RadDragAndDropManager.AllowDrag attached property to True for each ListBoxItem to "activate" the drag functionality.
2. To enable drop onto the TimeSlotItem elements in our RadScheduler control, we find them in the code behind and set the RadDragAndDropManager.AllowDropProperty to true:
   

   private void InitializeTimeSlotItems()

   {

   this.timeSlotItems = this.Scheduler.ChildrenOfType<TimeSlotItem>();

   foreach (TimeSlotItem item in this.timeSlotItems)

   {

   item.SetValue(RadDragAndDropManager.AllowDropProperty, true);

   }

   }

3. Additionally, to enable users to drag and drop, in the constructor of the Page just add handlers needed by RadDragAndDropManager: 

   RadDragAndDropManager.AddDragQueryHandler(this, OnDragQuery);

   RadDragAndDropManager.AddDropQueryHandler(this, OnDropQuery);

   RadDragAndDropManager.AddDropInfoHandler(this, OnDropInfo);

4. And On Drop Info we add a new appointment over the corresponding TimeSlotItem, and delete the dragged ListBoxItem in this way:
   

   private void OnDropInfo(object sender, DragDropEventArgs e)

   {

   var sourceListBoxItem = e.Options.Source as System.Windows.Controls.ListBoxItem;

   var timeSlotItem = e.Options.Destination as TimeSlotItem;

   if (e.Options.Status == DragStatus.DropComplete && timeSlotItem != null)

   {

   this.Scheduler.Appointments.Add(

   new Appointment()

   {

   Start = timeSlotItem.TimeSlot.Start,

   End = timeSlotItem.TimeSlot.End,

   Subject = sourceListBoxItem.FindChildByType<TextBlock>().Text

   }

   );

   this.source.Remove(sourceListBoxItem.Content.ToString());

   }

   }

Here is the example project including the above described implementation of RadScheduler, Listbox and RadDragAndDrop for Silverlight. For more info on how you can use and customize RadDragAndDrop and RadScheduler for Silverlight, refer to Telerik's online demos and help.

Hope this will be of use!