This is a migrated thread and some comments may be shown as answers.

drag from a tree, drop only inside a dock panel

3 Answers 121 Views
DragAndDrop
This is a migrated thread and some comments may be shown as answers.
Jacob
Top achievements
Rank 1
Jacob asked on 22 May 2017, 12:29 PM

Hello Telerik,

 

I am implementing a feature which consists of a list of user controls that can be dragged to dock panels.

At the moment there are two feature I need to implement. I've described the first one here http://www.telerik.com/forums/remove-the-not-allowed-icon-on-drag

then I also need to prevent the drag & drop of an item of the tree to itself.

Basically I need to restrict the drag&drop from tree to dockpanels only.

  

I will attach a screen shot of what i wish to prevent and my source code below

XAML

<Window x:Class="DashboardGrid.MainWindow"
        xmlns:local="clr-namespace:DashboardGrid"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
 
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <telerik:RadDocking Grid.Row="0" Grid.Column="0" Drop="RadDocking_Drop" AllowDrop="True">
                <telerik:RadSplitContainer >
                    <telerik:RadPaneGroup>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
            <telerik:RadDocking Grid.Row="1" Grid.Column="0" Drop="RadDocking_Drop" AllowDrop="True">
                <telerik:RadSplitContainer >
                    <telerik:RadPaneGroup>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
            <telerik:RadDocking Grid.Row="2" Grid.Column="0" Drop="RadDocking_Drop" AllowDrop="True">
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
            <telerik:RadDocking Grid.Row="0" Grid.Column="1" Drop="RadDocking_Drop" AllowDrop="True">
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
            <telerik:RadDocking Grid.Row="1" Grid.Column="1" Drop="RadDocking_Drop" AllowDrop="True">
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
            <telerik:RadDocking Grid.Row="2" Grid.Column="1" Drop="RadDocking_Drop" AllowDrop="True">
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
            <telerik:RadDocking Grid.Row="0" Grid.Column="2" Drop="RadDocking_Drop" AllowDrop="True">
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
            <telerik:RadDocking Grid.Row="1" Grid.Column="2" Drop="RadDocking_Drop" AllowDrop="True">
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
            <telerik:RadDocking Grid.Row="2" Grid.Column="2" Drop="RadDocking_Drop" AllowDrop="True">
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking>
        </Grid>
 
        <Grid Grid.Column="1">
 
            <telerik:RadTreeView Grid.Row="1" Margin="5"
                            VerticalAlignment="Stretch" AllowDrop="True"
                            IsLineEnabled="False" IsEditable="True" IsDragDropEnabled="True">
                <telerik:RadTreeViewItem Header="Telerik Input 2012 Q2" IsExpanded="true" AllowDrop="True">
                    <telerik:RadTreeViewItem Header="RadPdfViewer" AllowDrop="True"  Name="RadPdfViewer"  />
                </telerik:RadTreeViewItem>
 
                <telerik:RadTreeViewItem Header="Telerik Visualization 2012 Q2" IsExpanded="true">
                    <telerik:RadTreeViewItem Header="RadChartview" Name="RadChartview" />
                </telerik:RadTreeViewItem>
 
                <telerik:RadTreeViewItem Header="Telerik Data 2012 Q2" IsExpanded="true">
                    <telerik:RadTreeViewItem Header="RadDataFilter"  Name="RadDataFilter"  />
                </telerik:RadTreeViewItem>
            </telerik:RadTreeView>
        </Grid>
 
    </Grid>
</Window>

 

Code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.TreeView;
 
namespace DashboardGrid
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
         
         
         
        private void RadDocking_Drop(object sender, DragEventArgs e)
        {
 
            var formats = e.Data.GetFormats();
            var data = e.Data.GetData("TreeViewDragDropOptions");
            var item = ((TreeViewDragDropOptions)data).DraggedItems.First();
            var splitter = ((RadDocking)sender).Items[0];
            RadPaneGroup group = (RadPaneGroup)((RadSplitContainer)splitter).Items[0];
            switch (((RadTreeViewItem)item).Name)
            {
                case "RadPdfViewer":
                    group.AddItem(new RadPane() { Content = new UserControl1(), Header = "uc1" }, Telerik.Windows.Controls.Docking.DockPosition.Center);
                    break;
 
                case "RadChartview":
                    group.AddItem(new RadPane() { Content = new UserControl2(), Header = "uc2" }, Telerik.Windows.Controls.Docking.DockPosition.Center);
                    break;
 
                case "RadDataFilter":
                    group.AddItem(new RadPane() { Content = new UserControl3(), Header = "uc3" }, Telerik.Windows.Controls.Docking.DockPosition.Center);
                    break;
 
            }
        }
 
        private void RadTreeView_DragOverTree(object sender, DragOverTreeEventArgs e)
        {
            e.Handled = true;
            e.IsCanceled = true;
        }
    }
}

Thank you

3 Answers, 1 is accepted

Sort by
0
Jacob
Top achievements
Rank 1
answered on 22 May 2017, 12:34 PM
I tried setting AllowDrop to False in the Tree and children nodes, but it makes no difference
0
Accepted
Martin Ivanov
Telerik team
answered on 25 May 2017, 10:38 AM
Hello Jacob,

There are two options which I can suggest you.
  • Subscribe the treeview to the DragDropManager.DragOver event and set the TreeViewDragDropOptions DropAction to None. 
    DragDropManager.AddDragOverHandler(this.tree, OnTreeDragOver, true);

    private void OnTreeDragOver(object sender, Telerik.Windows.DragDrop.DragEventArgs e)
    {
        var options = DragDropPayloadManager.GetDataFromObject(e.Data, TreeViewDragDropOptions.Key) as TreeViewDragDropOptions;
        if (options != null)
        {
            options.DropAction = DropAction.None;
            options.UpdateDragVisual();               
        }
    }
  • Or disable the default treeview drag/drop behavior and implement a custom one from scratch using the DragDropManager.

Regards,
Martin Ivanov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Jacob
Top achievements
Rank 1
answered on 26 May 2017, 09:29 AM

Thank you again, Martin. Works perfectly!!

Tags
DragAndDrop
Asked by
Jacob
Top achievements
Rank 1
Answers by
Jacob
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or