Drag and Drop between RadTreeView and RadListBox

[Kalle]

Hi!

I'm trying to get RadListBox accept items from RadTreeView but my RadListBox does not seem to accept drops from TreeView. Do I need to have somekind of converter even though the actual payload object is same as what I have loaded in the listbox. In treeview I'm using HierarchicalDataTemplate which shows individual users (User class) with some data from related entity tables. ListBox only shows user's username but it uses the same User class.

        <Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem">
            <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"/>
            <Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
            <Setter Property="telerik:DragDropManager.TouchDragTrigger" Value="TapAndHold"/>
        </Style>

        <DataTemplate x:Key="ListBoxItemTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Image Source="/Dashboard_UserExtension;component/Images/usericon.png" Margin="10 0 0 0" Width="16" Height="16" Grid.Column="0"
                        HorizontalAlignment="Left" />
                <TextBlock Text="{Binding Username}" FontSize="12" FontFamily="Segoe UI" Grid.Column="1" Margin="10 0 0 0" HorizontalAlignment="Left" />
            </Grid>
        </DataTemplate>

<telerik:RadListBox
                x:Name="AdminUserBox"
                AllowDrop="True"
                ItemTemplate="{StaticResource ListBoxItemTemplate}"
                ItemContainerStyle="{StaticResource DraggableListBoxItem}"
                HorizontalAlignment="Left"
                Margin="0,10,0,1"
                Width="150"
                ItemsSource="{Binding AdminUserList}" Drop="AdminUserBox_Drop">
                <telerik:RadListBox.DragVisualProvider>
                    <telerik:ScreenshotDragVisualProvider />
                </telerik:RadListBox.DragVisualProvider>
                <telerik:RadListBox.DragDropBehavior>
                    <telerik:ListBoxDragDropBehavior AllowReorder="True" />
                </telerik:RadListBox.DragDropBehavior>
            </telerik:RadListBox>

<telerik:RadTreeView x:Name="UserTreeView"
                                 HorizontalAlignment="Left"
                                 Margin="0,10,-2,0"
                                 Width="220"
                                 IsDragDropEnabled="True"
                                 ItemTemplate="{StaticResource UserTemplate}"
                                 ItemsSource="{Binding UserList}"
                                 IsLoadOnDemandEnabled="False"
                                 IsSingleExpandPath="True"
                                 ItemContainerStyle="{StaticResource UsersItemContainerStyle}"
                                 AllowDrop="False"
                                 >
            </telerik:RadTreeView>

My other problem is how to handle drop event when dragging item from listbox to another listbox. Both listbox have AllowDrop=true and items can be dropped to each other but I'm not sure how to handle drop event as it does not seem to fire on drop. Do I need to use this DragAndDropManager?

private void AdminUserBox_Drop(object sender, System.Windows.DragEventArgs e)
{
    MessageBox.Show("Drop!"); // Not shown when dropping to AdminUserBox
}

Drag and Drop problems

I tried to follow Telerik's DragAndDrop samples but I'm little bit confused if I should use DragAndDropManager or not...

I just saw a post about renewing the RadTreeView, maybe I need to wait for that.

Br,

Kalle

[Nick]

Hello Kalle,

Yes you will have to implement a DataConverter for the ListBoxBehavior to accept the data you are dropping over it.
As to the changes in the TreeView, some changes have been made in 2013 Q1 SP, you can try it and see if you get any improvements.

Hope this helps! 

Kind regards,
Nikolay Vasilev
the Telerik team

[Kalle]

Hi!

Could you please provide me some example about how to implement and use DataConverter to convert objects from RadTreeViewItem to RadListBoxItem?

This is my current implementation that only works for drag and drop between RadTreeView and RadListBox but I'd like it to also work between RadListBox and another RadListBox. I need to get it to convert RadTreeViewItem to RadListBoxItem so that both scenarios would work at the same time. Now it requires me to comment/uncomment some lines.

public UserManagementView()
{
    InitializeComponent();

    // ListBox
    DragDropManager.AddDragInitializeHandler(AdminUserBox, OnDragInitialize);
    DragDropManager.AddDragInitializeHandler(WriterUserBox, OnDragInitialize);
    DragDropManager.AddDragInitializeHandler(ReaderUserBox, OnDragInitialize);
    // Treeview
    DragDropManager.AddDragInitializeHandler(UserTreeView, OnDragInitialize);
    // ListBox
    DragDropManager.AddGiveFeedbackHandler(AdminUserBox, OnGiveFeedback);
    DragDropManager.AddGiveFeedbackHandler(WriterUserBox, OnGiveFeedback);
    DragDropManager.AddGiveFeedbackHandler(ReaderUserBox, OnGiveFeedback);
    // TreeView
    DragDropManager.AddGiveFeedbackHandler(UserTreeView, OnGiveFeedback);
    // ListBox
    DragDropManager.AddDragDropCompletedHandler(AdminUserBox, OnDragCompleted);
    DragDropManager.AddDragDropCompletedHandler(WriterUserBox, OnDragCompleted);
    DragDropManager.AddDragDropCompletedHandler(ReaderUserBox, OnDragCompleted);
    // TreeView
    DragDropManager.AddDragDropCompletedHandler(UserTreeView, OnDragCompleted);
    // ListBox
    DragDropManager.AddDropHandler(AdminUserBox, OnDrop);
    DragDropManager.AddDropHandler(WriterUserBox, OnDrop);
    DragDropManager.AddDropHandler(ReaderUserBox, OnDrop);
    // TreeView
    DragDropManager.AddDropHandler(UserTreeView, OnDrop, true);

}

[Import]
UserManagementViewModel ViewModel
{
    get { return this.DataContext as UserManagementViewModel; }
    set
    {
        this.DataContext = value;
        m_ViewModel = value;
    }
}

private void OnDragInitialize(object sender, DragInitializeEventArgs args)
{

    args.AllowedEffects = DragDropEffects.All;
    var payload = DragDropPayloadManager.GeneratePayload(null);
    payload.SetData("DragData", args.OriginalSource);
    args.Data = payload;

    //RadListBoxItem item = args.OriginalSource as RadListBoxItem;
    RadTreeViewItem item = args.OriginalSource as RadTreeViewItem;

    DashboardUser user = item.DataContext as DashboardUser;
    args.DragVisual = new ContentControl { Content = user, ContentTemplate = this.Resources["ListBoxItemTemplate"] as DataTemplate };
}

private void OnGiveFeedback(object sender, Telerik.Windows.DragDrop.GiveFeedbackEventArgs args)
{
    args.SetCursor(Cursors.Arrow);
    args.Handled = true;
}

private void OnDrop(object sender, Telerik.Windows.DragDrop.DragEventArgs args)
{
    RadListBox listBox = sender as RadListBox;
    if (listBox == null || listBox.ItemsSource == null) return;

    //RadListBoxItem item = ((DataObject)args.Data).GetData("DragData") as RadListBoxItem;
    RadTreeViewItem item = ((DataObject)args.Data).GetData("DragData") as RadTreeViewItem;

    DashboardUser user = item.DataContext as DashboardUser;

    // Do some stuff with user...
}

public void OnDragCompleted(object sender, Telerik.Windows.DragDrop.DragDropCompletedEventArgs args)
{
    RadListBox listBox = sender as RadListBox;
    if (listBox == null || listBox.ItemsSource == null) return;

    //RadTreeViewItem item = args.OriginalSource as RadTreeViewItem;
    RadListBoxItem item = args.OriginalSource as RadListBoxItem;

    DashboardUser user = item.DataContext as DashboardUser;

    // Do some stuff with user...
}

private void UserTreeView_PreviewDragEnded(object sender, RadTreeViewDragEndedEventArgs e)
{
    // Don't allow users to be removed from the treeview
    e.Handled = true;
}

I also haven't been able to upgrade to newer version of RadComponents for WPF because I can't see that "newer version available" balloon tip on Visual Studio anymore... I think newer version has some changes to RadTreeView, not sure if it has any effects on this implementation or not...

Br,

Kalle

[Nick]

Hi Kalle,

You can see a sample converter and how to set it to the ListBox here. 

As to the update problem, I suggest you open a support ticket under the relevant category in order to get a fast and accurate response! 

Hope this helps! 

Kind regards,
Nikolay Vasilev
the Telerik team