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">  
                <ColumnDefinition Width="100" /> 
                <ColumnDefinition /> 
            <ListBox x:Name="listBox" > 
                    <Style TargetType="ListBoxItem">  
                        <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" /> 
                        <TextBlock Text="{Binding}" /> 
                <Controls:RadScheduler Grid.Column="1" Name="Scheduler" /> 
    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)  
                new Appointment()  
                    Start = timeSlotItem.TimeSlot.Start,  
                    End = timeSlotItem.TimeSlot.End,  
                    Subject = sourceListBoxItem.FindChildByType<TextBlock>().Text  

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!

About the Author

Rossitza Fakalieva

Rossitza Fakalieva is Manager of the Progress Desktop UI & Tools division, which develops the UI for WPF, UI for WinForms and Telerik Reporting products. She started her career on the Telerik ASP.NET team in 2006 as a support officer and passed through the position of software developer to the position of senior manager. Off work, she enjoys cooking, watching movies and reading books.

Related Posts


Comments are disabled in preview mode.