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
0
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:
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
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
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:
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
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.