drag from a tree, drop only inside a dock panel

[Jacob]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DashboardGrid"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        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

[Jacob]

I tried setting AllowDrop to False in the Tree and children nodes, but it makes no difference

[Martin Ivanov]

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

[Jacob]

Thank you again, Martin. Works perfectly!!