Implementing Drag & Drop in MVVM

9 posts, 0 answers
  1. Tom
    Tom avatar
    16 posts
    Member since:
    Sep 2012

    Posted 10 Jul 2012 Link to this post

    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
  2. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 12 Jul 2012 Link to this post

    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

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

  3. DevCraft banner
  4. Tom
    Tom avatar
    16 posts
    Member since:
    Sep 2012

    Posted 12 Jul 2012 Link to this post

    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<DiagramTaskDiagramConnector>
    {
    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);
    } }
  5. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 16 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Tom
    Tom avatar
    16 posts
    Member since:
    Sep 2012

    Posted 16 Jul 2012 Link to this post

    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>
    
    
  7. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 19 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 19 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  9. Tom
    Tom avatar
    16 posts
    Member since:
    Sep 2012

    Posted 19 Jul 2012 Link to this post

    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.   
     
  10. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 20 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner