drag from a tree, drop only inside a dock panel

4 posts, 1 answers
  1. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 22 May Link to this post

    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

  2. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 22 May in reply to Jacob Link to this post

    I tried setting AllowDrop to False in the Tree and children nodes, but it makes no difference
  3. Answer
    Martin Ivanov
    Admin
    Martin Ivanov avatar
    1402 posts

    Posted 25 May Link to this post

    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.
  4. Jacob
    Jacob  avatar
    49 posts
    Member since:
    Apr 2016

    Posted 26 May in reply to Martin Ivanov Link to this post

    Thank you again, Martin. Works perfectly!!

Back to Top