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

Michael

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:

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:

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

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.

Zarko

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.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.