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

How to Specify What Shape ViewModel is Instantiated on Toolbox Drag & Drop

1 Answer 69 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 15 Jan 2015, 12:56 PM
Hello,

I have a diagram to which is bound an implementation of ObservableGraphSourceBase<>.  I have several implemetations of node view models which all ultimately inherit from NodeViewModelBase.  The following provides an indicator of the node and graph view models:

public class ColorViewModel : NodeViewModelBase {
    public string Label  { get;set;}  
    public bool IsEditable {get;set;
 }
 
public class RedViewModel : ColorViewModel {    }
 
public class BlueViewModel : ColorViewModel {    }
 
public class RainbowViewModel : ObservableGraphSourceBase<ColorViewModel, LinkViewModelBase<ColorViewModel>> { }

Many of the shapes in the diagram are being populated when the RainbowViewModel is populated and bound to the diagram.  So I create RedViewModel and BlueViewModel objects and bind them to the diagram and they display fine (a template and style selector are also used to select the appropriate display).  I also have a Diagram ToolBox from which the user can drag and drop additional shapes, these additional shapes are for the user to enter text (e.g. for comment boxes).  So far so good.  

When the user drags and drops a shape from the ToolBox onto the diagram, the type of view model that is instantiated is a ColorViewModel, because this is the type of view model declared with the ObservableGraphSourceBase.  But, I only want the dragged and dropped shapes to allow for text editing.  So what I end up doing is the following: when a RedViewModel or BlueViewModel is instantiated, I set the IsIEditable flag to false.  But what I would prefer is to do is have another view model, say:

public class CommentViewModel : ColorViewModel
{   
     // properties to support text formatting
}

But how to I enable instantiation of a CommentViewModel when a shape is dragged and dropped from the ToolBox? recall the implementation of ObservableGraphSourceBase is declared with the base view model (i.e. the RainbowViewModel). From the documentation (Custom Tool Box , about half way down), it would seem the approach is using an event handler such as 

private void RadDiagram_ShapeDeserialized(object sender, ShapeSerializationRoutedEventArgs e)
{
    e.Shape.Content = new CommentViewModel();
}

But is there a way to do this declaratively, and if not, is there a way to do this while still maintaining an MVVM approach?  Currently instantiation of any shape view model is being handled in the main view model and if possible I would like to maintain this.

Thanks,

Mike

1 Answer, 1 is accepted

Sort by
0
Accepted
Zarko
Telerik team
answered on 19 Jan 2015, 05:50 PM
Hi Michael,
If you're using an ObservableGraphSourceBase you can override the CreateNode method and create a CommentViewModel there:
// This is called on paste and drop.
public override object CreateNode(IShape shape)
{
    // Here you can create the view model that you want.
    NodeViewModelBase newItem = null;
    if (shape.Content != null)
    {
        // This should be copy/paste
        newItem = base.CreateNode(shape) as NodeViewModelBase;
        newItem.Content = shape.Content;
    }
    else
    {
        // This is drop
        newItem = new CommentViewModel();
        newItem.Content = "Something";
    }
 
    return newItem;
}
Please note that you can also use a SerializableGraphSourceBase and its Serialize and DeserializeNode methods to have a bigger(better) control over the creation and initialization of the viewModels.
As for the Custom Tool Box article - this is an easy way to transfer information from the toolBox to the RadDiagram but you don't have to use it if you don't want to.
I hope I was able to help you and if you have more questions please feel free to ask.

Regards,
Zarko
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Diagram
Asked by
Michael
Top achievements
Rank 1
Answers by
Zarko
Telerik team
Share this question
or