TreeViewItems Drag Drop with MVVM

2 posts, 0 answers
  1. Kal Sir
    Kal Sir avatar
    5 posts
    Member since:
    Apr 2010

    Posted 21 Jun 2011 Link to this post

    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,
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 27 Jun 2011 Link to this post

    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
  3. DevCraft banner
Back to Top