Drag Drop MVVM

21 posts, 0 answers
  1. Bill Sivill
    Bill Sivill avatar
    4 posts
    Member since:
    May 2009

    Posted 06 May 2010 Link to this post

    Hey guys,  I am tyring to capture the drop event in my viewModel using MVVM with the RadDragAndDropManager.  Is it possible to configure the RadDragAndDropManager in XAML such that I can define the handler of the event?

    For example, I tried something like this:

            <Style TargetType="telerik:GridViewRow" x:Key="OrderItemStyle">  
                <Setter Property="dragDrop:RadDragAndDropManager.AllowDrop" Value="True" /> 
                <Setter Property="dragDrop:RadDragAndDropManager.DropQueryEvent" Value="OnRowDropQuery" /> 
                <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" /> 
            </Style> 
     

    but the DropQueryEvent is not recognized as being available in the RadDragAndDropManager.

    Any ideas? 
  2. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 12 May 2010 Link to this post

    Hi Bill Sivill,

    I am sorry for the delayed reply!

    Yes, event handlers can be assigned in xaml. The correct syntax in WPF is:

    <Window.Resources>
      
        <Style TargetType="ListBoxItem" x:Key="OrderItemStyle">
            <Setter Property="dragDrop:RadDragAndDropManager.AllowDrop" Value="True" />
            <!--<Setter  Property="dragDrop:RadDragAndDropManager.DropQueryEvent" Value="OnRowDropQuery" />-->
              
            <!--Handler in a setter:-->
            <EventSetter Event="dragDrop:RadDragAndDropManager.DropQuery"
                    Handler="OnRowDropQuery" />
            <Setter Property="dragDrop:RadDragAndDropManager.AllowDrag" Value="True" />
        </Style>
      
    </Window.Resources>
    <Grid>
        <!--Handler in xaml:-->
        <ListBox dragDrop:RadDragAndDropManager.DragQuery="OnRowDropQuery" />
    </Grid>

    Hopefully this will help you,

    Sincerely yours,
    Miroslav
    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. UI for WPF is Visual Studio 2017 Ready
  4. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 20 Sep 2010 Link to this post

    Miroslav, I am learning MVVM light and trying to implement drag and drop as well, but I'm not sure how to integrate the dragandrop manager with my ModelView...I am basically trying to drag a listbox item to a ScrollViewer or Stackpanel...I understand your demo code, but I'm not sure how to pass the Item from the Listbox to the StackPanel or ScrollViewer using your RadDragDropManager and MVVM light.  Do you guys have any sample code I could look at?

    thanks

    mark
  5. James Denning
    James Denning avatar
    24 posts
    Member since:
    Apr 2009

    Posted 21 Sep 2010 Link to this post

    Assuming you're using MVVM in a similar fashion to us in WPF, where actions in the view invoke publicly exposed ICommands (implemented as DelegateCommands) on the Model, you need to create a WPF Behavior that allows you to effectively bind the event to the command in the model. Numerous mechanisms exist including  general mechanisms and specifc mechanisms focusing on the control (and event) in question.
    Here's some links:
    http://geekswithblogs.net/HouseOfBilz/archive/2009/08/27/adventures-in-mvvm-ndash-binding-commands-to-any-event.aspx
    http://marlongrech.wordpress.com/2008/12/13/attachedcommandbehavior-v2-aka-acb/

    Regards
    James
  6. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 21 Sep 2010 Link to this post

    I'm using the MVVM Light Toolkit which uses a "RelayCommand".  I think this is similar to what you are talking about.  I get confused though because in your site demo/example, you have DragDropEventArgs but in many of the MVVM Samples, they pass around the object like "MyEntityObject" that is bound to a listboxitem, textblock, etc...I'm just not quite sure how to combine the two.

    thanks

    mark
  7. James Denning
    James Denning avatar
    24 posts
    Member since:
    Apr 2009

    Posted 21 Sep 2010 Link to this post

    Not familiar with MVVM Light but a quick check shows that it imlements the EventToCommand behavior (documented at http://www.galasoft.ch/mvvm/getstarted/) - so you use that behaviour to bind to the RelayCOmmand on your view model and the arguments to pass to the Command would be defined in the <T> parameter if you use the RelayCommand<T> - then you just ensure your binding passes the right parameter - bear in mind you can pass any relative element (i,e, a control) or a property of it to  pass to the command by using the right binding syntax e.g. For a property of a control:

    CommandParamerter="{Binding

     

     

    ElementName=radDataFilter, Path=FilterDescriptors}"

     

    Saying that the parameter should be superfluous because you're telling the ViewModel to do something with data that has already been stored on it as it is a property or colleciton of the ViewModel that is bound to by another control.

    James

  8. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 21 Sep 2010 Link to this post

    I am starting to get it, but when I look at the Telerik example, I see this in the class constructor:

    RadDragAndDropManager.AddDragQueryHandler(this, OnDragQuery);
    RadDragAndDropManager.AddDragInfoHandler(this, OnDragInfo);
    RadDragAndDropManager.AddDropQueryHandler(this, OnDropQuery);
    RadDragAndDropManager.AddDropInfoHandler(this, OnDropInfo);

    I know how to use the EventToCommand in MVVM Light, but in the Telerik example, the above code runs in the "View"...I'm not sure what I set the EventToCommands to or what I bind them to using MVVM Light.  That is, do I add them to the Layout Root?  The Listbox I am dragging from, etc...If I'm not using MVVM(light), I understand your example with Delegates, etc...I just get confused when I'm trying to implement your controls into this pattern. 

    thanks

    mark

  9. James Denning
    James Denning avatar
    24 posts
    Member since:
    Apr 2009

    Posted 22 Sep 2010 Link to this post

    Sorry I'm not a Telerik employee and the DragAndDrop sample is missing the XAML in the XBAP View Code section so I can't tell but I would hazard a guess that instead of .Add* ,methods in the CodeBehind/CodeBeside of the view you can write a XAML equivalent using hte attachedbehaviors e.g.
    EventCommandBehavior.EventName="DropInfo" EventCommandBehavior.Command="{Binding DropInfoCommand}"  EventCommandBehavior.CommandParameter="{Binding ElementName=whichevercontrolyouwant,Path=whicheverproperty}" 

    or

    EventCommandBehavior.CommandParameter="{Binding whichevermodelpropertyyouwant}" 

    James
  10. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 22 Sep 2010 Link to this post

    Thanks James, I appreciate the information you provided.

    Mark 
  11. Tsvyatko
    Admin
    Tsvyatko avatar
    832 posts

    Posted 23 Sep 2010 Link to this post

    Hi mark baer,

    James pointed the right solution in this case. You can create attached behavior that will attach to the specified events and invoke  the commands as needed.

    Since you are using MVVM light I can also suggest the approach used in the attached example. It demonstrate how to use directly EventToCommand action provided by the toolkit. The project introduces RoutedEventTrigger class that allows you to connect directly to the routed events that does have the corresponding regular event.

    Kind regards,
    Tsvyatko
    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
  12. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 24 Sep 2010 Link to this post

    Okay, thanks for your input everybody...I think I am close.  From looking at the sample project, I understand most of it, but in the sample, it's a WPF application and not Silverlight so VS is not letting me build this code:

     

     

    protected virtual void SubscribeToEvent()

     

    {

     

     

    var routedEvent = EventManager.GetRoutedEventsForOwner(this.EventOwnerType).Where(c => c.Name == this.EventName).First();

     

     

     

    if (routedEvent != null)

     

    {

     

     

    Type handlerType = routedEvent.HandlerType;

     

     

     

    var del = Delegate.CreateDelegate(handlerType, this, "OnEventInvoked");

     

     

     

    if (this.AssociatedObject is UIElement)

     

    {

    ((

     

    UIElement)this.AssociatedObject).AddHandler(routedEvent, del);

     

    }

    }

    }


    How do I change the line with the EventManager.GetRoutedEventsForOwner method?  I found a Telerik version, but it looks fairly different and I'm not sure how to use it.

    thanks

    mark
  13. Tsvyatko
    Admin
    Tsvyatko avatar
    832 posts

    Posted 30 Sep 2010 Link to this post

    Hello mark baer,

    Please, excuse us for the misunderstanding. I had prepared the sample application in WPF since this thread is in the WPF section.

    I have modified the example to work in Silverlight environment. Please have a look and let me know if this works for you.


    All the best,
    Tsvyatko
    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
  14. mark baer
    mark baer avatar
    142 posts
    Member since:
    Sep 2009

    Posted 30 Sep 2010 Link to this post

    Cool, thanks again.

    mark
  15. ITC
    ITC avatar
    19 posts
    Member since:
    Nov 2010

    Posted 17 Nov 2010 Link to this post

    Hi

    I am trying to implement drag and drop functionality using Telerik controls using the MVVM pattern.

    I have an example of it working with the MVVM Light Toolkit as follows:

    <i:Interaction.Triggers>
            <local:DragDropQueryRoutedEventTrigger EventName="DragQuery" EventOwnerType="{x:Type telerik:RadDragAndDropManager}">
            	<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding Command}" PassEventArgsToCommand="true"/>
            </local:DragDropQueryRoutedEventTrigger>
    </i:Interaction.Triggers>
    

    I would like to do something similar using Caliburn Micro as follows

    <i:EventTrigger EventName="DragQuery">
        <cal:ActionMessage MethodName="DragQuery" >
            <cal:Parameter Value="$eventArgs" />
        </cal:ActionMessage>
    </i:EventTrigger>

    The problem with the above code is that Caliburn Micro is looking for the DragQuery event on my RadGridView control, but the event is actually being raised on the RadDragAndDropManager as specified in the EventOwnerType property from the MVVM Light Toolkit code block.

    Is there some way of telling the ActionMessage to go look for the event on a specific Type or am I missing something obvious?

    Regards

    Dirk

  16. ITC
    ITC avatar
    19 posts
    Member since:
    Nov 2010

    Posted 17 Nov 2010 Link to this post

    I WAS missing something obvious. Didn't realise the DragDropQueryRoutedEventTrigger was a custom class, thought it was part of the MVVM Light Toolkit
  17. Steve
    Steve avatar
    4 posts
    Member since:
    Jul 2010

    Posted 22 Jul 2011 Link to this post

    I have tried using this example on the dropinfo and dropquery events but they are not firing.  I have a RadTreeView that is dragdrop enabled and i am trying to drop the treeviewitem that is being dragged onto a dropzone (Stackpanel, Textblock, whatever). Any ideas?

    This is in silverlight using the MVVM Light Toolkit.

    <StackPanel x:Name="ExportDropPanel"
                Height="100"
                Width="100"
                Background="Blue"
                Margin="5"
                telerik:RadDragAndDropManager.AllowDrop="True">
        <i:Interaction.Triggers>
            <dblocal:DropInfoRoutedEventTrigger EventName="DropInfo">
                <cmd:EventToCommand Command="{Binding ExportOnDropInfoCommand, Mode=OneWay}" PassEventArgsToCommand="True"/>
            </dblocal:DropInfoRoutedEventTrigger>
            <dblocal:DropQueryRoutedEventTrigger EventName="DropQuery">
                <cmd:EventToCommand Command="{Binding ExportOnDropQueryCommand, Mode=OneWay}" PassEventArgsToCommand="True"/>
            </dblocal:DropQueryRoutedEventTrigger>
        </i:Interaction.Triggers>
     
    </StackPanel>

    And the following is the code in the viewmodel:

    ExportOnDropInfoCommand = new RelayCommand<DragDropEventArgs>(OnDropInfo);
    ExportOnDropQueryCommand = new RelayCommand<DragDropQueryEventArgs>(OnDropQuery);

    Thanks
    Steve
  18. Tsvyatko
    Admin
    Tsvyatko avatar
    832 posts

    Posted 22 Jul 2011 Link to this post

    Hi Steve,

     Since treeview handles some of the Drag Drop events internally the subscription to the events should listen for handled ones as well.

    Here is sample code how to achieve this:

    protected override void SubscribeToEvent()
    {
        this.AssociatedObject.AddHandler(RadDragAndDropManager.DropQueryEvent,new EventHandler<DragDropQueryEventArgs>(OnEventInvoked), true);
    }

    Greetings,
    Tsvyatko
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  19. Steve
    Steve avatar
    4 posts
    Member since:
    Jul 2010

    Posted 22 Jul 2011 Link to this post

    Tsvyatko,

    Thanks for the quick reply. It works great.

    Thanks,
    Steve
  20. Sebastian
    Sebastian avatar
    12 posts
    Member since:
    Oct 2010

    Posted 02 Feb 2012 Link to this post

    Hello,

    I tested the example 'mvvmlight2.zip' (Posted on Sep 23, 2010 , Drag&Drop with MVVMLight) but i need this with .net 3.5 (not .net 4.0).

    When i change to 3.5, it doesn't work. The error message is: Can't find DragDrop Event.

    Can everybody help?
  21. Tsvyatko
    Admin
    Tsvyatko avatar
    832 posts

    Posted 03 Feb 2012 Link to this post

    Hello,

     I have modified the project to work with WPF3.5 please have alook and let us know if you have any further quetstions.

    Regards,
    Tsvyatko
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  22. Sebastian
    Sebastian avatar
    12 posts
    Member since:
    Oct 2010

    Posted 16 Feb 2012 Link to this post

    thanks, i will test it!
Back to Top
UI for WPF is Visual Studio 2017 Ready