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

Drag Drop MVVM

20 Answers 675 Views
DragAndDrop
This is a migrated thread and some comments may be shown as answers.
Bill Sivill
Top achievements
Rank 1
Bill Sivill asked on 06 May 2010, 04:22 PM
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? 

20 Answers, 1 is accepted

Sort by
0
Miroslav
Telerik team
answered on 12 May 2010, 12:09 PM
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.
0
mark baer
Top achievements
Rank 1
answered on 20 Sep 2010, 06:24 PM
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
0
James Denning
Top achievements
Rank 1
answered on 21 Sep 2010, 04:34 PM
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
0
mark baer
Top achievements
Rank 1
answered on 21 Sep 2010, 05:31 PM
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
0
James Denning
Top achievements
Rank 1
answered on 21 Sep 2010, 05:47 PM
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

0
mark baer
Top achievements
Rank 1
answered on 21 Sep 2010, 11:26 PM
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

0
James Denning
Top achievements
Rank 1
answered on 22 Sep 2010, 03:55 PM
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
0
mark baer
Top achievements
Rank 1
answered on 22 Sep 2010, 04:35 PM
Thanks James, I appreciate the information you provided.

Mark 
0
Tsvyatko
Telerik team
answered on 23 Sep 2010, 09:27 AM
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
0
mark baer
Top achievements
Rank 1
answered on 25 Sep 2010, 12:49 AM
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
0
Tsvyatko
Telerik team
answered on 30 Sep 2010, 11:29 AM
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
0
mark baer
Top achievements
Rank 1
answered on 30 Sep 2010, 05:39 PM
Cool, thanks again.

mark
0
ITC
Top achievements
Rank 1
answered on 17 Nov 2010, 03:51 PM

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

0
ITC
Top achievements
Rank 1
answered on 17 Nov 2010, 06:28 PM
I WAS missing something obvious. Didn't realise the DragDropQueryRoutedEventTrigger was a custom class, thought it was part of the MVVM Light Toolkit
0
Steve
Top achievements
Rank 1
answered on 22 Jul 2011, 12:43 PM
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
0
Tsvyatko
Telerik team
answered on 22 Jul 2011, 02:00 PM
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!

0
Steve
Top achievements
Rank 1
answered on 22 Jul 2011, 03:38 PM
Tsvyatko,

Thanks for the quick reply. It works great.

Thanks,
Steve
0
recotech
Top achievements
Rank 1
answered on 02 Feb 2012, 06:14 PM
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?
0
Tsvyatko
Telerik team
answered on 03 Feb 2012, 10:41 AM
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 >>

0
recotech
Top achievements
Rank 1
answered on 16 Feb 2012, 09:05 AM
thanks, i will test it!
Tags
DragAndDrop
Asked by
Bill Sivill
Top achievements
Rank 1
Answers by
Miroslav
Telerik team
mark baer
Top achievements
Rank 1
James Denning
Top achievements
Rank 1
Tsvyatko
Telerik team
ITC
Top achievements
Rank 1
Steve
Top achievements
Rank 1
recotech
Top achievements
Rank 1
Share this question
or