How to drag and drop custom objects from a sfTreeView to a sfDiagram?

Hello Syncfusion Team,

I am trying to implement an UserControl in WPF that includes the following elements:

1) DockingManager
2) SfTreeView
3) SfDiagram(s)

The ContentControls contain the SfTreeView and the SfDiagram. The latter is added programmatically using C# into a ContentControl (in Document mode) and then into the DockingManager. Currently, I am working on the mechanism to drag&drop custom elements (using C#, and not AXML) from the sfTreeView to the sfDiagrams.  I followed the TreeViewToDiagram, and the CustomCommand examples, but my code continue without working. I would be extremely grateful if you could provide me with an example that allows me to solve this problem.

Best regards,

Tomas. 

  

6 Replies 1 reply marked as answer

KR Karkuvel Rajan Shanmugavel Syncfusion Team January 18, 2021 10:53 AM UTC

Hi Tomas, 
 
Thanks for contacting Syncfusion support. 
 
Requirement: How to drag and drop custom object from SfTreeView to SfDiagram in DockingManager. 
 
Currently we are working on your requirement. We will update you with more details or with sample for your requirement on 19th January 2020. 
 
Regards, 
Karkuvel Rajan S 



KR Karkuvel Rajan Shanmugavel Syncfusion Team January 19, 2021 10:39 AM UTC

Hi Tomas, 
 
Requirement: How to drag and drop custom object from SfTreeView to SfDiagram in DockingManager. 
 
We have prepared a simple sample for your requirement of using SfTreeView and SfDiagram in DockingManager and Drag and Drop of CustomObject from the SfTreeView to SfDiagram. We have also followed the instruction of adding Diagram in the Document State. Please find the sample in below.  
 
 
Regards, 
Karkuvel Rajan S 



TO Tomas January 19, 2021 06:14 PM UTC

Hello Karkuvel Rajan S.,

Thank you for the example. However, it uses TreeView instead of SfTreeView. So, SelectedItemChanged, the event that "translates" treeView's items to Diagram's objects, is not defined for SfTreeView. Is it possible you can help me with an example that employs SfTreeView?.

I apologize for the inconveniences.

Regards,

Tomas


KR Karkuvel Rajan Shanmugavel Syncfusion Team January 20, 2021 08:42 AM UTC

Hi Tomas, 
 
Requirement: How to drag and drop custom object from SfTreeView to SfDiagram in DockingManager. 
 
Sorry for the inconvenience caused. Please find the modified sample with SfTreeView in below. 
 
 
Regards, 
Karkuvel Rajan S 


Marked as answer

TO Tomas January 28, 2021 03:28 AM UTC

Hello Karkuvel Rajan,

I checked out the code you gave me, and though it shed light upon some of my doubts, it has not solved them completely. Now I have some extra ones.

For example, the following lines of code that are within Diagram_DragEnter(object sender, ItemDropEventArgs args) seem to be unnecessary.


object dataObject = (args.Source as System.Windows.DataObject).GetData(typeof(DragObject));
TreeViewNode treeViewItem = (dataObject as DragObject).Source;


TreeViewItem variable is always null.


Also, this example does not show how to render different nodes depending on the dragged TreeViewItem. In other words, it only inserts blue squares in it. I would appreciate it if you could provide me with a similar example, but that allows me to insert different types of nodes programmatically by dragging them from the sfTreeView. Additionally, I would like to know if it is possible to add a textbox to the nodes, similar to the annotation, but in a custom position.


Regards,


Tomas.



RA Ranjitha Amirthalingam Syncfusion Team January 28, 2021 12:01 PM UTC

Hi Tomas, 
 
Currently, when drag and drop node from the tree view to diagram it applied the common style to all the nodes. When applying different styles for each node, the style not preserved properly. This fix is included in our Vol4 SP release. Please use the latest SfDiagram(18.4.0.39) dll to achieve different style for node. We have used annotation view and edit template to achieve textbox style.We have provided the modified sample to represent this. Please refer to the sample from the following link. 
 
 
For more details , please visit the below link. 
 
 
 
Regards, 
Ranjitha A. 


Loader.
Up arrow icon