Drag Drop MVVM

[Bill Sivill]

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? 

[Miroslav]

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.

[mark baer]

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

[James Denning]

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

[mark baer]

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

[James Denning]

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

[mark baer]

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

[James Denning]

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

[mark baer]

Thanks James, I appreciate the information you provided.

Mark 

[Tsvyatko]

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

[mark baer]

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

[Tsvyatko]

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

[mark baer]

Cool, thanks again.

mark

[ITC]

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

[ITC]

I WAS missing something obvious. Didn't realise the DragDropQueryRoutedEventTrigger was a custom class, thought it was part of the MVVM Light Toolkit

[Steve]

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

[Tsvyatko]

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

[Steve]

Tsvyatko,

Thanks for the quick reply. It works great.

Thanks,
Steve

[recotech]

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?

[Tsvyatko]

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

[recotech]

thanks, i will test it!