drag and drop to RadDocking

13 posts, 1 answers
  1. Tamas
    Tamas avatar
    33 posts
    Member since:
    Jun 2010

    Posted 08 Nov 2010 Link to this post

    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
  2. George
    Admin
    George avatar
    1332 posts

    Posted 10 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Tamas
    Tamas avatar
    33 posts
    Member since:
    Jun 2010

    Posted 10 Nov 2010 Link to this post

    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
  5. George
    Admin
    George avatar
    1332 posts

    Posted 12 Nov 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Tamas
    Tamas avatar
    33 posts
    Member since:
    Jun 2010

    Posted 15 Nov 2010 Link to this post

    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"
        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
  7. Answer
    George
    Admin
    George avatar
    1332 posts

    Posted 18 Nov 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for Silverlight
  8. Tamas
    Tamas avatar
    33 posts
    Member since:
    Jun 2010

    Posted 18 Nov 2010 Link to this post

    Hi George,

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

    Best regards,
    Tamas
  9. Ofer
    Ofer avatar
    1 posts
    Member since:
    Aug 2008

    Posted 10 Mar 2011 Link to this post

    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
  10. George
    Admin
    George avatar
    1332 posts

    Posted 16 Mar 2011 Link to this post

    Hi Ofer,

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

    Greetings,
    George
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  11. Muhammad Irfan
    Muhammad Irfan avatar
    18 posts
    Member since:
    Jan 2010

    Posted 18 Aug 2011 Link to this post

    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,
  12. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 23 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  13. Muhammad Irfan
    Muhammad Irfan avatar
    18 posts
    Member since:
    Jan 2010

    Posted 23 Aug 2011 Link to this post

    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.
  14. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 24 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top
DevCraft banner