Telerik blogs
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!


Rossitza-Fakalieva
About the Author

Rossitza Fakalieva

Rossitza Fakalieva is a Technical Manager, Microsoft MVP in Developer Technologies and a Director of the Bulgarian chapter of the global Women Who Code organization. She previously worked on the Telerik engineering team and defines herself as .NET enthusiast. She loves to empower others to grow in their career and in the tech field—by teaching, by delivering courses and presentations, and as part of her daily job.

Comments

Comments are disabled in preview mode.