Implementing Drag & Drop in MVVM

[Tom]

I can't find any samples or figure out how to accomplish this....

There is a RadDiagram and a RadDiagramToolbox on a page.    They both load with custom images from a shared resource set.    The problem occurs when an item is dragged from the Toolbox to the Diagram.   The shape immediately reverts to the default shape format.   It doesn't appear to give any idea which of the items in the toolbox was selected.

Ideally....All that's needed is a way to pass along a single integer value with the drag/drop.   If that can somehow be made available when the ObservableGraphSource derived (the object the Diagram is bound to) --> AddNode event is called.  It would solve my problem.


Thanks

[Viktor Tsvetkov]

Hi Tom,

Could you please send us your sample project, thus we will be able to modify it and assist you better?

Kind regards,
Viktor Tsvetkov
the Telerik team

[Tom]

Here goes....

The toolbox is filled correctly, and displays the custom images.  The problem is that I can't find any hint of the image that was dropped onto the Diagram.

The object that shows up in the Diagram-->AddNode event (derived from NodeViewModelBase) has no values whatsoever.



----------------------------------
Loading the Toolbox
----------------------------------



var galleryCollection = new Gallery() { Header = "General"};
 
foreach (var control in controlList)
{
	var shape = new CustomShape();
	shape.Name = control.Key.ToString();
	shape.Content = control.Key;
	shape.Style = (Style)Application.Current.Resources[control.Value];
 
	var galleryItem = new GalleryItem(control.Key.ToString(), shape, control.Value);
 
	galleryCollection.Items.Add(galleryItem);
}
 
items.Add(galleryCollection);
 
ToolboxItems = items;   // Bound to the Toolbox
----------------------------------

XAML - DiagramToolbox & DataTemplate
----------------------------------

<telerik:RadDiagramToolbox 
    x:Name="ToolBox" 
    Title="Gallery" 
    Margin="0 0 -1 -1" 
    Grid.Row="1" 
    Grid.Column="1" 
    d:LayoutOverrides="Height" 
    Width="200" 
    HorizontalAlignment="Right" 
    ItemTemplate="{StaticResource itemTemplate}" 
    ItemsSource="{Binding ToolboxItems}"                                                         
    />

    <DataTemplate x:Key="ToolboxItemTemplate">
        <Border Background="Transparent" Margin="0 1 1 0" Width="76" Height="100">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Viewbox Width="60" Height="50" Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="5 10 5 0">
                    <telerik:RadDiagramShape Content="{Binding Shape}" x:Uid="{Binding UniqueId}" Width="60" Height="60" />
                </Viewbox>
                <TextBlock Grid.Row="1" Text="{Binding ItemType}" TextWrapping="Wrap" Padding="4 0" Margin="0 0 0 5"
                        TextAlignment="Center" FontFamily="Segoe UI Semibold" HorizontalAlignment="Center" />
            </Grid>
        </Border>
    </DataTemplate>
 
    <telerik:HierarchicalDataTemplate x:Key="itemTemplate" ItemsSource="{Binding Items}"
                                                        ItemTemplate="{StaticResource ToolboxItemTemplate}">
        <TextBlock Text="{Binding Header}" />
    </telerik:HierarchicalDataTemplate>
----------------------------------

Add Node Event
----------------------------------


ObservableGraphSourceBase
This is the Telerik base class for MVVM 2-way communication.


DiagramTask
Derived from NodeViewModelBase
DiagramConnector
Derived from LinkViewModelBase<DiagramTask>


---------

public class ObservableGraphSource : ObservableGraphSourceBase<DiagramTask, DiagramConnector>
{
	public override void AddNode(DiagramTask node)
	{

		if (node.Task == null)   // This is TRUE if the 'new task' was 
					 // drag/dropped from the ToolBar

		{			
			// This is where I'd like to know what image was dropped.
			// but the node (DiagramTask) object  has no values from the Toolbox

		}





		base.AddNode(node);
	}
}

[Viktor Tsvetkov]

Hello Tom,

Could you try to replace the RadDiagramShape inside the Viewbox with a ContentControl and tell me if this works for you?

Regards,
Viktor Tsvetkov
the Telerik team

[Tom]

Still no luck.    

When the object is dropped on the Diagram, it arrives in the AddNode 
event without a hint of what shape was selected.

Here's what I replaced the template with (one of a number of attempts, 
actually):



---------------------------------

<DataTemplate x:Key="ToolboxItemTemplate">
    <Border Background="Transparent" Margin="0 1 1 0" 
				Width="76" Height="100">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Viewbox Width="60" Height="60" Stretch="Uniform" 
			VerticalAlignment="Top" HorizontalAlignment="Center" 
		 	Margin="5 10 5 0">
                <ContentControl Content="{Binding Shape}" 
				Width="60" Height="60" />
            </Viewbox>
            <TextBlock Grid.Row="1" Text="{Binding ItemType}" 
		    TextWrapping="Wrap" Padding="4 0" Margin="0 0 0 5"
                    TextAlignment="Center" FontFamily="Segoe UI Semibold" 
		    HorizontalAlignment="Center" />
        </Grid>
    </Border>
</DataTemplate>

<telerik:HierarchicalDataTemplate x:Key="itemTemplate" 
			ItemsSource="{Binding Items}"
                        ItemTemplate="{StaticResource ToolboxItemTemplate}">
    <TextBlock Text="{Binding Header}" Name="Test" />
</telerik:HierarchicalDataTemplate>

[Viktor Tsvetkov]

Hello Tom,

Please accept my apologies for the misunderstanding. Currently this scenario is not supported when the RadDiagram has a databound GraphSource. I have logged this issue in our PITS under the name "DiagramToolbox: Allow dragging custom shapes in RadDiagram when it's GraphSource is databound" and it will be ready for tracking and voting tomorrow the latest. Thank you for your cooperarion, I have updated your Telerik points.

Kind regards,
Viktor Tsvetkov
the Telerik team

[Viktor Tsvetkov]

Hi Tom,

Actually there is un updated on this issue - in the latest binaries (from the internal build) you can find a CreateNode method in the ObservableGraphSourceBase class which helps you achieve what you want. I have created a sample project demonstrating the mentioned approach, so could you please examine it and tell me if it works for you?

All the best,
Viktor Tsvetkov
the Telerik team

[Tom]

Viktor -

Thanks for the help.   Yes, that looks like it would solve the problem, based on the code.

I'm guessing this change won't be available until the next quarterly release though?    Is there a way to get this early, and would it be safe to swap out a single assembly (or just the pieces directly related to RadDiagram)?    

Note that I'm working on a project with a large development team, and we use the Telerik Silverlight components extensively.   The most I could possibly get away with is swapping out the RadDiagram pieces.   
 

[Viktor Tsvetkov]

Hi Tom,

Till the end of this month we will release Q2 2012 Service Pack which will include this change.

Greetings,
Viktor Tsvetkov
the Telerik team