Automatic connection routing like in "TableShape" example

[Davidm]

Is it possible to configure an automatic connection routing in RadDiagram like in the "TableShape" example?

Please look at "MyRoute.png" for my route looks now and "ExampleRoute.png" for what my route should look like.

[Martin Ivanov]

Hello David,

The TableShape demo uses the AStarRouter. You can find how it is set up in the demo's in the constructor of the Examples.xaml.cs class. Can you try this in your example and let me know if it works? If you already using it you can share a runnable code so I can check it on my side. Or you can open a new support ticket from your Telerik account and send a project.

Regards,
Martin
Telerik by Progress

[Davidm]

Thanks for the tipp, the AStarRouter work much better, but also not perfect. I've attached two files.

The first one is showing that even in simple diagrams the connections do not always avoid the shapes. (AvoidShapes is set to true) The solution to the first example would be to simply connect to the outer connectors, but for some reason it is using the inner ones.

The second one shows that in complex diagrams the connections somtimes are just going completeley through a shape.

Is there a way to improve this? (I've also tried several settings in the DiagramConstants)

[Martin Ivanov]

Hello David,

Thanks for the attached images. I checked the TableShape demo using the layout demonstrated in the pictures, but I wasn't able to reproduce the reported behavior. Can you send me some runnable code snippets so I can test this on my side? Alternatively, you can open a new support ticket from your telerik.com account and attach a project demonstrating this.

About, the outer and inner connectors, in the TableShape the connectors manipulation of the table shapes is disabled via their IsConnectorsManipulationEnabled property. This is why when you drag a connection only the connectors of the child row shapes will be activate. To change this you can set the property to True.

Regards,
Martin
Telerik by Progress

[Davidm]

Hello Martin,

I think you got the wrong idea about the connector problem in "Diagram1.png". I've disabled the connectors on the TableShape itself completeley and I am just using the connectors on the RowShape. The Problem ist that for example on the bottom right shape the connection connects to the left RowShape connector and then the line overlaps with the top shape.

If the connection would instead connect to the right connector it woul look much better. I've created a litte video that is showing a similar problem in the TableShape example and uploaded it to my Dropbox. You can see there that the connecton on the "Employees" table is switching from left to right when dragging, but on the "Customers" table it stays on the left side. Is there a way to improove this "automatic connector attachment"?

 

For the second problem I've uploaded the Diagram.xml file to my Dropbox which you can load in the TableShape example. When loaded the shapes are all in position 0, so you have to add a test button to create the tree layout with the following code:

TreeLayoutSettings settings = new TreeLayoutSettings()
{
    TreeLayoutType = TreeLayoutType.TreeDown,
    VerticalSeparation = 30
};
this.diagram.Layout(LayoutType.Tree, settings);

After clicking on that button you should see that the lines are overlapping some shapes. (Overlap.png) Is there a way to solve this problem?

[Martin Ivanov]

Hello David,

The behavior in the linked video is observed because somewhere in code the TargetConnectorPosition property of the connection connected to the Customers shape is set to a value different from Auto. For example. To alter this you can set the TargetConnectorPosition to Auto.

About, the connections that overlaps the shapes, I was able to reproduce this. It seems that the layout is executed after the routing action and some connections are not properly routed. In order to resolve this you can use couple approaches:

• Disable and enable the routing before and after the call of the Layout() method. This will refresh the routing.
  

  this.diagram.RouteConnections = false;
  this.diagram.Layout(LayoutType.Tree, settings);
  this.diagram.RouteConnections = true;

• Or manually call the Update() method of the connections when the layout is updated. You can use the DiagramLayoutComplete event of the diagram.
  

  private void Diagram_DiagramLayoutComplete(object sender, RoutedEventArgs e)
  {
      foreach (var connection in this.diagram.Connections)
      {
          connection.Update();
      }
  }

Please try this and let me know if it helps.

Regards,
Martin
Telerik by Progress

[Davidm]

Hello Martin,

thanks for the quick relpy. I was able to solve connection overlay problem with the Diagram_DiagramLayoutComplete event handler solution. (The solution with switching RouteConnections did cause a lot of unnecessary connection bridges)

Regarding the problem with the selectors I've checked my code for usages of TargetConnectorPosition, but I found nothing. So I added this to the style of my connection with value "Auto" to be sure it is set to auto. But sadly the connections sometimes are still choosing a path that causes an overlay with other shapes .

My guess is that the connection router always chooses the two connectors wich are nearest to each other, not the one that would allow a connection without overlays. I've attached another picture to show what I mean. In the picture I've added two red arrows. The one on the left shows the connection that would connection without overlays, but has a longer distance. The path on the right is shorter, but causes overlays. Is there any way to improove this behaviour?

[Martin Ivanov]

Hello David,

You are right the connections searches for the closest connector according to its bounds. This is why the behavior demonstrated on the picture is observed. To change this you can try to set the Source/TargetConnectorPosition manually on the connection you want to behave differently, before you update it.

Alternatively, you can implement custom router. You can read how to customize the currently provided routers or create a new one in the Routing help article.

Regards,
Martin
Telerik by Progress