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

ERD

4 Answers 167 Views
Diagram, DiagramRibbonBar, DiagramToolBox
This is a migrated thread and some comments may be shown as answers.
Jarrod
Top achievements
Rank 1
Jarrod asked on 29 Jan 2018, 06:34 PM
I'm trying to use the RadDiagram to create an ERD that shows a root entity and all of its first level relationships. The goal is to have the related entities placed in a circle around the root entity. This is easily enough accomplished with the RadialTree layout. The second requirement is that the layout use orthogonal lines. Is there a way to achieve both of these goals in conjunction?

4 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 30 Jan 2018, 11:38 AM
Hello Jarrod,

Thank you for writing.

I am glad that the RadialTree layout is working well in your actual project. Regarding the connectors, you can have orthogonal lines by using a the AStarRouter. You can set it this way: 
this.radDiagram1.RouteConnections = true;
this.radDiagram1.RoutingService.Router = new AStarRouter(this.radDiagram1.DiagramElement) { WallOptimization = true };
this.radDiagram1.RoutingService.FreeRouter = new AStarRouter(this.radDiagram1.DiagramElement) { WallOptimization = true };

Setting the WallOptimization property to true will result in the lines having less bends.

I hope this helps. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jarrod
Top achievements
Rank 1
answered on 31 Jan 2018, 04:39 PM
Hi Hristo, thanks for this! It is pretty close to what we want except we'd like to not have any "shared" connectors coming from the root object like the AStartRouter seems to rely heavily on. Is there a way to get all connections to connect at unique points on the root object, use orthogonal lines, and have overlap a minimum?
0
Jarrod
Top achievements
Rank 1
answered on 31 Jan 2018, 05:40 PM
Something like the attached from an Entity Framework Diagram.
0
Hristo
Telerik team
answered on 02 Feb 2018, 10:58 AM
Hi Jarrod,

The root shape is only having the default connectors at positions: Left, Top, Right, and Bottom. In order to have the connections similar to the screenshot you have attached, you will need to add additional connectors to your root: 
IShape root = this.radDiagram1.Shapes[0];
var connectorRightUp = new RadDiagramConnector() { Offset = new Telerik.Windows.Diagrams.Core.Point(1, 0.25), Name = root.Name + "Connector1" };
var connectorRightDown = new RadDiagramConnector() { Offset = new Telerik.Windows.Diagrams.Core.Point(1, 0.75), Name = root.Name + "Connector2" };
var connectorLeftUp = new RadDiagramConnector() { Offset = new Telerik.Windows.Diagrams.Core.Point(0, 0.25), Name = root.Name + "Connector3" };
var connectorLeftDown = new RadDiagramConnector() { Offset = new Telerik.Windows.Diagrams.Core.Point(0, 0.75), Name = root.Name + "Connector4" };
 
root.Connectors.Add(connectorRightUp);
root.Connectors.Add(connectorRightDown);
root.Connectors.Add(connectorLeftUp);
root.Connectors.Add(connectorLeftDown);
 
var connectorUpLeft = new RadDiagramConnector() { Offset = new Telerik.Windows.Diagrams.Core.Point(0.25, 0), Name = root.Name + "Connector5" };
var connectorUpRight = new RadDiagramConnector() { Offset = new Telerik.Windows.Diagrams.Core.Point(0.75, 0), Name = root.Name + "Connector6" };
var connectorDownLeft = new RadDiagramConnector() { Offset = new Telerik.Windows.Diagrams.Core.Point(0.25, 1), Name = root.Name + "Connector7" };
var connectorDownRight = new RadDiagramConnector() { Offset = new Telerik.Windows.Diagrams.Core.Point(0.75, 1), Name = root.Name + "Connector8" };
 
root.Connectors.Add(connectorUpLeft);
root.Connectors.Add(connectorUpRight);
root.Connectors.Add(connectorDownLeft);
root.Connectors.Add(connectorDownRight);

I am also attaching my test project as well a screenshot showing the result on my end.

Let me know if you have other questions.

Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Diagram, DiagramRibbonBar, DiagramToolBox
Asked by
Jarrod
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Jarrod
Top achievements
Rank 1
Share this question
or