ERD

5 posts, 0 answers
  1. Jarrod
    Jarrod avatar
    3 posts
    Member since:
    Jan 2018

    Posted 29 Jan 2018 Link to this post

    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?
  2.
  3. Hristo
    Admin
    Hristo avatar
    1519 posts

    Posted 30 Jan 2018 Link to this post

    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.
  5. Jarrod
    Jarrod avatar
    3 posts
    Member since:
    Jan 2018

    Posted 31 Jan 2018 in reply to Hristo Link to this post

    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?
  7. Jarrod
    Jarrod avatar
    3 posts
    Member since:
    Jan 2018

    Posted 31 Jan 2018 Link to this post

    Something like the attached from an Entity Framework Diagram.
  8.
  9. Hristo
    Admin
    Hristo avatar
    1519 posts

    Posted 02 Feb 2018 Link to this post

    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.
Back to Top