Drag and Drop between RadTreeView and RadListBox

4 posts, 0 answers
  1. Kalle
    Kalle avatar
    26 posts
    Member since:
    Feb 2013

    Posted 23 Apr 2013 Link to this post

    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
  2. Nick
    Admin
    Nick avatar
    593 posts

    Posted 25 Apr 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Kalle
    Kalle avatar
    26 posts
    Member since:
    Feb 2013

    Posted 29 Apr 2013 Link to this post

    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
  5. Nick
    Admin
    Nick avatar
    593 posts

    Posted 01 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top