custom nodes with multiple line connectors

[abc]

Hi,

We are evaluating this product and was wondering if diagrams in WPF can do the following

• Have 2 completely isolated controls: one for control palette(from where control will be dragged) and one for actual canvas (where control can be dropped in) 
• canvas should be an MDI window, user can have multiple diagrams opened at the same time
• Have user defined nodes (no standard/default nodes/shapes)
• Have multiple connectors to each node (2 as input and 2 as output) [I have seen one of the sample app where this can be done programmatically directly on the diagram view but not as predefined node type]
• Ability to define if the port should allow multiple connections or not. ie If it's not allowed each port can allow only one in OR one out connection

Thanks for your help

[Sudhakar C]

Dear Customer,

Please find the response for your queries in below.

Query	Response
Have 2 completely isolated controls: one for control palette(from where control will be dragged) and one for actual canvas (where control can be dropped in)	We can host the SymbolPalette and diagram page in a separate panels.     We have prepared a simple sample. In that sample, we have two grids. First grid contains the SymbolPalette and another grid contains the diagram control. Now, we can drag and drop the symbols as usual from SymbolPalette to Diagram Page.   For more information, please refer the following sample.     Sample Name: SymbolPaletteAndDiagramPageHostedInSeparatePanel.zip   Note: We can display the SymbolPalette in a diagram control itself by enabling the IsSymbolPaletteEnabled property of the diagram control.   For more information please refer online documentation from the below link.     Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!Documents/enabledisablesymbolp.htm
canvas should be an MDI window, user can have multiple diagrams opened at the same time	We have prepared a simple sample to meet this requirement. In that sample, we have created a DockingManger and docked with 3 different diagram controls. Now, we can access all the 3 diagram controls. And also, we have a common symbol palette for all the diagram controls to drag and drop the Symbols. For more information, please refer the following sample.     Sample Name: DockingManager.zip
Have user defined nodes (no standard/default nodes/shapes)	We are able to customize all the Shapes. Please refer the documentation from the below link. Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/4122customizetheappearanceofthepredefinedshape.htm And also, we are able to add the custom ConnectionPorts to Node and also we are able to customize the ConnectionPorts. Please refer the documentation from the below links. Link : http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/createconnectionport.htm http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/customizeportstyle.htm Customizing the Connection Port: We have sample in Dahsboard to customise the ConnectionPort. Path : Dashboard àWPFàDiagramàGettingStartedàConnectionPortDemo
Have multiple connectors to each node (2 as input and 2 as output) [I have seen one of the sample app where this can be done programmatically directly on the diagram view but not as predefined node type]	We can make more number of connections to each Node. We suspect that your requirement is to make the connection to ConnectionPort only.   For this scenario, we need to add the Connection Port to Node manually wherever we needed. We don’t have an option to add the ConnectionPort to the Node as predefined. However, we can add the ConnectionPort at runtime by enabling AddConnectionPortEnabled property of the node.   If we want to add the Port at run time, enable AddConnectionPortEnabled property and hold CTRL+SHIFT and click on the node. The connection port will be added in the position where you clicked on the node.   For more information, please refer our Syncfusion online documentation using the below link.   Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!Documents/4321addingconnectionportsatruntimetoanapplication.htm
Ability to define if the port should allow multiple connections or not. ie If it's not allowed each port can allow only one in OR one out connection	We have prepared a sample to meet this requirement. In that sample, we have created a custom port using the class “CustomPort” which is derived from ConnectionPort. In that custom class, we have created collection named “EdgeCollection” to store all the connections which are connected to the connection port. Using this collection, we can restrict each connection port to allow only 1 or 2 connections.     For more information, please refer the following sample.     Sample Name: RestrictNumberOfConnections.zip Video Name: RestrictNumberOfConnectionsVideo

 

Please let us know if you need further assistance on this.

Regards,

Sudhakar C

ForumSample_d62015f4.zip

[Parthiv]

Dear Customer,

Please find the response for your queries in below.

Query	Response
Have 2 completely isolated controls: one for control palette(from where control will be dragged) and one for actual canvas (where control can be dropped in)	We can host the SymbolPalette and diagram page in a separate panels.     We have prepared a simple sample. In that sample, we have two grids. First grid contains the SymbolPalette and another grid contains the diagram control. Now, we can drag and drop the symbols as usual from SymbolPalette to Diagram Page.   For more information, please refer the following sample.     Sample Name: SymbolPaletteAndDiagramPageHostedInSeparatePanel.zip   Note: We can display the SymbolPalette in a diagram control itself by enabling the IsSymbolPaletteEnabled property of the diagram control.   For more information please refer online documentation from the below link.     Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!Documents/enabledisablesymbolp.htm
canvas should be an MDI window, user can have multiple diagrams opened at the same time	We have prepared a simple sample to meet this requirement. In that sample, we have created a DockingManger and docked with 3 different diagram controls. Now, we can access all the 3 diagram controls. And also, we have a common symbol palette for all the diagram controls to drag and drop the Symbols. For more information, please refer the following sample.     Sample Name: DockingManager.zip
Have user defined nodes (no standard/default nodes/shapes)	We are able to customize all the Shapes. Please refer the documentation from the below link. Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/4122customizetheappearanceofthepredefinedshape.htm And also, we are able to add the custom ConnectionPorts to Node and also we are able to customize the ConnectionPorts. Please refer the documentation from the below links. Link : http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/createconnectionport.htm http://help.syncfusion.com/ug/wpf/diagram/default.htm#!documents/customizeportstyle.htm Customizing the Connection Port: We have sample in Dahsboard to customise the ConnectionPort. Path : Dashboard àWPFàDiagramàGettingStartedàConnectionPortDemo
Have multiple connectors to each node (2 as input and 2 as output) [I have seen one of the sample app where this can be done programmatically directly on the diagram view but not as predefined node type]	We can make more number of connections to each Node. We suspect that your requirement is to make the connection to ConnectionPort only.   For this scenario, we need to add the Connection Port to Node manually wherever we needed. We don’t have an option to add the ConnectionPort to the Node as predefined. However, we can add the ConnectionPort at runtime by enabling AddConnectionPortEnabled property of the node.   If we want to add the Port at run time, enable AddConnectionPortEnabled property and hold CTRL+SHIFT and click on the node. The connection port will be added in the position where you clicked on the node.   For more information, please refer our Syncfusion online documentation using the below link.   Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!Documents/4321addingconnectionportsatruntimetoanapplication.htm
Ability to define if the port should allow multiple connections or not. ie If it's not allowed each port can allow only one in OR one out connection	We have prepared a sample to meet this requirement. In that sample, we have created a custom port using the class “CustomPort” which is derived from ConnectionPort. In that custom class, we have created collection named “EdgeCollection” to store all the connections which are connected to the connection port. Using this collection, we can restrict each connection port to allow only 1 or 2 connections.     For more information, please refer the following sample.     Sample Name: RestrictNumberOfConnections.zip Video Name: RestrictNumberOfConnectionsVideo

 

Please let us know if you need further assistance on this.

Regards,

Sudhakar C

ForumSample_d62015f4.zip

How to access the samples mentioned here. Also it seems some links are breaks.

[Suresh Shanmugam]

Dear Customer, 

  

We couldn't able to download the sample from server location. So, we have prepared the sample. 

 

 

Query	Response
Have 2 completely isolated controls: one for control palette(from where control will be dragged) and one for actual canvas (where control can be dropped in)	We can host the SymbolPalette and diagram page in a separate panels.     We have prepared a simple sample. In that sample, we have two grids. First grid contains the SymbolPalette and another grid contains the diagram control. Now, we can drag and drop the symbols as usual from SymbolPalette to Diagram Page.     For more information, please refer the sample as below,     Sample Name : DockManagerSample-2115553693     Note: We can display the SymbolPalette in a diagram control itself by enabling the IsSymbolPaletteEnabled property of the diagram control.     For more information please refer online documentation from the below link.     Link: http://help.syncfusion.com/ug/wpf/diagram/default.htm#!Documents/enabledisablesymbolp.htm
canvas should be an MDI window, user can have multiple diagrams opened at the same time	In sample(DockManagerSample-2115553693), we have created a DockingManger and docked with 3 different diagram controls. Now, we can access all the 3 diagram controls. And also, we have a common symbol palette for all the diagram controls to drag and drop the Symbols. For more information, please refer the following sample.
Ability to define if the port should allow multiple connections or not. ie If it's not allowed each port can allow only one in OR one out connection	We have prepared a sample to meet this requirement. In that sample, we have created a custom port using the class “CustomPort” which is derived from ConnectionPort. we have restrict each connection port to allow only 1 or 2 connections.    For more information, please refer the sample as below,     Sample Name : PortRestriction

 

 

Sample location : 113625 

 

Please let us know if you have any concerns. 

  

Regards,  

Suresh Shanmguam