drag and drop to RadDocking

[Tamas]

Hi,

I have a problem with dragging items from a RadTreeView onto RadPanes in a RadDocking control. I tried to follow your articles and help to implement the drag and drop with the DragDropManager. It works in a way that every event is triggered fine, but the drop target is always the RadSplitContainer, where my RadPaneGroups reside (which hold the RadPanes). I would like to drop the tree items to the RadPanes instead of the only RadSplitContainer.

Is there any way to do this?

Many thanks and best regards,
Tamas

[George]

Hello Tamas,

The RadPanes represent the small tab items in the RadDocking control. Could you please explain why do you need to drop the tree items to the RadPane? If you give us more information about this, it would be very helpful.

Best wishes,
George
the Telerik team

[Tamas]

Hi George,

I'd like to define the content of the RadPanes by dragging and dropping certain tree nodes to the RadPane during runtime. I do not use the RadDocking with a document host. I have all my radpanes as you can see in the attached screenshot.

Is it possible to drop items on the RadPanes?

Thanks and best regards,
Tamas

[George]

Hi Tamas,

I guess you have 3 RadPaneGroups with a RadPane in each one. In this scenario, the RadPane is collapsed and you don't see the small tabs. Please, refer to the RadDocking visual structure for more information - http://www.telerik.com/help/silverlight/raddocking-visual-structure.html

Kind regards,
George
the Telerik team

[Tamas]

Hi George,

I have only one RadPaneGroup. Here is my code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.IO.IsolatedStorage;

using Telerik.Windows.Controls;

using System.IO;

using Telerik.Windows.Controls.DragDrop;

using Telerik.Windows.Controls.TreeView;

using System.Collections.ObjectModel;

 

namespace RadDockingAddContainerIssue

{

    public partial class MainPage : UserControl

    {

        private ObservableCollection<TreeLevel> treeLevels;

 

        public MainPage()

        {

            InitializeComponent();

            CreateContainers();

 

            treeLevels = new ObservableCollection<TreeLevel>();

 

            TreeLevel treeLevel = new TreeLevel("Level 1");

            treeLevel.TreeLevels.Add(new TreeLevel("Level 2 A"));

            treeLevel.TreeLevels.Add(new TreeLevel("Level 2 B"));

            treeLevel.TreeLevels.Add(new TreeLevel("Level 2 C"));

             

            treeLevels.Add(treeLevel);

 

            radTreeView.ItemsSource = treeLevels;

 

            RadDragAndDropManager.SetAllowDrop(RadPaneGroup, true);

            RadDragAndDropManager.SetAllowDrop(RadSplitContainer, true);

 

            RadDragAndDropManager.AddDropQueryHandler(RadSplitContainer, new EventHandler<DragDropQueryEventArgs>(this.Pane_OnDropQuery));

            RadDragAndDropManager.AddDropInfoHandler(RadSplitContainer, new EventHandler<DragDropEventArgs>(this.Pane_OnDropInfo));

            RadDragAndDropManager.AddDragQueryHandler(radTreeView, new EventHandler<DragDropQueryEventArgs>(OnTreeViewItemDragQuery));

         

        }

     

 

        private void CreateContainers()

        {

            RadPane newpane;

 

            newpane = new RadPane() { CanUserClose = false, Header = "Pane 1" };

            RadDocking.SetSerializationTag(newpane, System.Guid.NewGuid().ToString());

            RadDragAndDropManager.SetAllowDrop(newpane, true);

            RadDragAndDropManager.AddDropQueryHandler(newpane, new EventHandler<DragDropQueryEventArgs>(this.Pane_OnDropQuery));

            RadDragAndDropManager.AddDropInfoHandler(newpane, new EventHandler<DragDropEventArgs>(this.Pane_OnDropInfo));

 

            RadPaneGroup.AddItem(newpane, Telerik.Windows.Controls.Docking.DockPosition.Left);

             

            newpane = new RadPane() { CanUserClose = false, Header = "Pane 2" };

            RadDocking.SetSerializationTag(newpane, System.Guid.NewGuid().ToString());

            RadDragAndDropManager.SetAllowDrop(newpane, true);

            RadDragAndDropManager.AddDropQueryHandler(newpane, new EventHandler<DragDropQueryEventArgs>(this.Pane_OnDropQuery));

            RadDragAndDropManager.AddDropInfoHandler(newpane, new EventHandler<DragDropEventArgs>(this.Pane_OnDropInfo));

             

            RadPaneGroup.AddItem(newpane, Telerik.Windows.Controls.Docking.DockPosition.Center);

 

            newpane = new RadPane() { CanUserClose = false, Header = "Pane 3" };

            RadDocking.SetSerializationTag(newpane, System.Guid.NewGuid().ToString());

            RadDragAndDropManager.SetAllowDrop(newpane, true);

            RadDragAndDropManager.AddDropQueryHandler(newpane, new EventHandler<DragDropQueryEventArgs>(this.Pane_OnDropQuery));

            RadDragAndDropManager.AddDropInfoHandler(newpane, new EventHandler<DragDropEventArgs>(this.Pane_OnDropInfo));

 

            RadPaneGroup.AddItem(newpane, Telerik.Windows.Controls.Docking.DockPosition.Right);

        }

 

 

        private void Pane_OnDropInfo(object sender, DragDropEventArgs e)

        {

 

            if (e.Options.Status == DragStatus.DropComplete)

            {

                MessageBox.Show(e.Options.Status.ToString() + " " + e.Options.Destination.Name);

 

                var treeLevel = e.Options.Payload as TreeLevel;

                if (treeLevel != null)

                {

                    var pane = e.Options.Destination as RadPane;

                    if (pane != null)

                        MessageBox.Show("TreeLevel dropped: " + treeLevel.Caption);

                }

                 

            }

        }

 

        private void OnTreeViewItemDragQuery(object sender, DragDropQueryEventArgs e)

        {

            if (e.Options.Status == DragStatus.DragQuery)

            {

                e.QueryResult = true;

                e.Handled = true;

                var payload = e.OriginalSource;

                e.Options.Payload = payload;

            }

            if (e.Options.Status == DragStatus.DropSourceQuery)

            {

                e.QueryResult = true;

                e.Handled = true;

            }

        }

 

        public void Pane_OnDropQuery(object sender, DragDropQueryEventArgs e)

        {

//            if (e.Options.Destination is RadPane)

            {

                e.QueryResult = true;

            }

        }

 

 

    }

 

    public class TreeLevel

    {

        public string Caption

        {

            set;

            get;

        }

 

        public ObservableCollection<TreeLevel> TreeLevels

        {

            get;

            set;

        }

 

        public TreeLevel(string caption)

        {

            this.Caption = caption;

            this.TreeLevels = new ObservableCollection<TreeLevel>();

        }

    }

 }

And the XAML:

<UserControl x:Class="RadDockingAddContainerIssue.MainPage"
    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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>

        <telerik:HierarchicalDataTemplate x:Key="TreeLevel"
                                          ItemsSource="{Binding TreeLevels}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Caption}"/>
            </StackPanel>
        </telerik:HierarchicalDataTemplate>

        <telerik:HierarchicalDataTemplate x:Key="TreeLevels"
            ItemTemplate="{StaticResource TreeLevel}"
                                          ItemsSource="{Binding TreeLevels}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Caption}"/>
            </StackPanel>
        </telerik:HierarchicalDataTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <telerik:RadTreeView Grid.Column="0" Name="radTreeView" IsDragDropEnabled="True"
                                         ItemTemplate="{StaticResource TreeLevels}"  >
        </telerik:RadTreeView>
        <telerik:RadDocking  Grid.Column="1" Name="RadDocking" HasDocumentHost="False">
                <telerik:RadSplitContainer Name="RadSplitContainer" >
                <telerik:RadPaneGroup Name="RadPaneGroup" >

                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>
    </Grid>
</UserControl>

 

Thanks and best regards,
Tamas

[George]

Hi Tamas,

I would suggest you to use PaneGroupExtensions class in order to implement RadDocking with MVVM pattern. After that, when you drag and drop an item in the RadPaneGroup, you could add it in the PaneGroupExtensions.ItemsSource collection and this creates a new RadPane in the group.

Attached you can find the sample. I hope this helps.

Regards,
George
the Telerik team

[Tamas]

Hi George,

Many thanks for this great sample project! This helps a lot.

Best regards,
Tamas

[Ofer]

Hi George,

I doing similar darg and drop application. However on drop I want to create a floating pane (view) at a default size and  at the  mouse drop location. Getting the mouse location is not a problem, however I failed following other examples using SetFloatingLoaction and MakeFloatingDockable or even toolwindow.HorizontalOffset.

Please point me to the correct way to do this.

Thanks

Ofer

[George]

Hi Ofer,

 
Attached you can find a sample demonstrating how to accomplish this. I hope this helps.

Greetings,
George
the Telerik team

[Muhammad Irfan]

Hello George, I am using the same logic as you gave in attached file. However my requirements is slightly change that if any Pane is visible already then it should not add a new tab again, instead just highlight (select) previously added Pane.
For this I am holding a Dictionary that which Pane is visible but I can't find any way that when user close Pane from RadDocking then how can I capture this event so that I can remove the object from my dictionary.

Many Thanks,

[Miroslav Nedyalkov]

Hello Muhammad,

 When a Pane is closed by the user the RadDocking control throws the PrevewClose and Close events. The affected panes are in the event arguments. The PreviewClose event can be stopped using its arguments.

Hope this helps.

Kind regards,
Miroslav Nedyalkov
the Telerik team

[Muhammad Irfan]

Thank you Miroslav for your response. How can I handle these events in MVVM pattern (i.e. using Binding)? Any sample code snippet will be highly appreciateable.

[Miroslav Nedyalkov]

Hi Muhammad,

 You cannot handle such events using bindings, but you could use the IsHidden property of the RadPane which sets it to true when closed. You should also notice that the pane doesn't inherit the DataContext of the Docking control when closed and when floating so you should handle this situation. Unfortunately we don't have a sample for this.

All the best,
Miroslav Nedyalkov
the Telerik team