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

TreeViewItems Drag Drop with MVVM

1 Answer 318 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Kal Sir
Top achievements
Rank 1
Kal Sir asked on 21 Jun 2011, 08:19 PM
Hello,

I am using MVVM to implement my Drag and Drop in my TreeView. I am using eventtrigger to bind my command when DragEnd event takes place. In Viewmodel, when the command calls my update method to call the appropriate service. But my issue is figuring out the previous and the new parent of the child/node/radtreviewitem that had been dragged and dropped. So that when i call my service I can tell what parent child is being deleted and which parent is getting a new child. I hope i am making sense here and your help ASAP is very much appreciated.

I am attaching sample of my code. Hope this helps. Thank You very much.

<telerik:RadTreeView   x:Name="tlrkTree"
                                       ItemsSource="{Binding TreeData, Mode=TwoWay}" BorderBrush="Gray" 
                                       BorderThickness="1" Grid.Row="2" 
                                       ItemContainerStyle="{StaticResource RadTreeViewStyle}" 
                                       Width="Auto" Height="400"  Margin="2,2,2,2"                                        
                                       IsDragDropEnabled="True" IsDragTooltipEnabled="True" 
                                       IsDropPreviewLineEnabled="True" 
                                       SelectedItem="{Binding SelectedTreeNode, Mode=TwoWay}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="DragEnded" >
                            <i:InvokeCommandAction Command="{Binding DragEndCommand}" CommandParameter="{Binding}"   />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <telerik:RadTreeView.ItemTemplate>
                        <telerik:HierarchicalDataTemplate ItemsSource="{Binding Children}" >
                            <StackPanel>
                                <TextBlock x:Name="textBlock">
                                     <Run Text="{Binding Name, Mode=TwoWay}"/>
                                </TextBlock>
                            </StackPanel>
                        </telerik:HierarchicalDataTemplate>
                    </telerik:RadTreeView.ItemTemplate>
                </telerik:RadTreeView>


private readonly ITreeDataService _treeDataService ;
private TreeNodeItemData  _selectedTreeNode;
private DelegateCommand<object> _dragEndCommand;
  
        [ImportingConstructor]
        public TreeDataViewModel( ITreeDataService treeDataService)
        {
            _treeDataService = treeDataService;
            _dragEndCommand = new DelegateCommand<object>(DragEnded);
        }
  
       public ICommand DragEndCommand
        {
            get { return _dragEndCommand; }
        
  
        public TreeNodeItemData  SelectedTreeNode
        {
            get
            {
                return _selectedTreeNode;
            }
            set
            {
                _selectedTreeNode= value;
            }
  
        }
  
        public void DragEnded(object selectedItems)
        {
            //Previous Parent and the New Parent Node of the Selected Item - SelectedTreeNode
        }


Thank You in advance,

1 Answer, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 27 Jun 2011, 12:01 PM
Hi Kal Sir,

Please accept our apology for the delayed response. In your scenario there are two approaches that you can take.

The first approach is to create your ViewModels so that they can keep all the information that you need. For example each item to keep a reference to its parent item so that you can use the ViewModel to get the dragged item parent item as well as the destination item.

The other approach is to take advantage of the RadTreeView.DragEnded event arguments. In order to do so, you can take advantage of the MVVM Light Toolkit. It exposes a EventToCommand behavior. If you decide to use it you can pass the event's arguments to a command. However, in this case you need to keep in mind that the default drag/drop behavior of the RadTreeView is such that it keeps a collection of the DraggedItems but in DataBound scenarios this collection holds the business objects. And you will need to get the RadTreeViewItem container of the dragged busies item in order to find its parent. But if you attach a command to the DragEnded event you won't be able to get the RadTreeViewItem that is dragged since it is removed from the RadTreeView's Items collection. This is why if you decide to take advantage of the EventToCommand behavior, I'd suggest you to attach a command to the RadTreeView.PreviewDragEnded event instead. Its arguments can give you access to the dragged business item, to its RadTreeViewItem container and to the destination RadTreeViewItem. I attached a sample project illustrating this approach.

I hope this info will help you implement your scenario. Please let us know if we can further assist you.

Greetings,
Tina Stancheva
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
Tags
TreeView
Asked by
Kal Sir
Top achievements
Rank 1
Answers by
Tina Stancheva
Telerik team
Share this question
or