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

Fixed connector positions?

3 Answers 209 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Kristoffer
Top achievements
Rank 1
Kristoffer asked on 31 Jan 2013, 09:01 AM
See attached image. We have a button on our diagram nodes that lets us show more details about the node. The UI element expands thanks to some binding tricks in the template. However, as you can see, the connector follows its relative position. We would like to keep the connector at its original position in order to preserve the "arrow structure". If the arrows/connections start jumping around the user gets a little confused. Is this possible?

I sense that such a functionality requires some advanced template stuff. Please show us an example! Thanks.

3 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 05 Feb 2013, 07:09 AM
Hello Kristoffer,

I see you use the default Bottom Connector of the DiagramShapes. Basically, the four basic connectors are located on the shapes' relative coordinates - (0.5, 0); (0.5,1); (0, 0.5); (1,0.5). When you make the Shape bigger the Bottom connector stays in the middle of the bottom side of the Shape which is expected. This is expected behavior in many other diagramming frameworks as well.

However, we can suggest you to use custom connectors. You can define custom connector and use it in the "expanded" state of your shape. It's a small question of mathematics to calculate the position of the custom connector but I believe you will be able handle this. When expanding the Shape you have to change the Source of the given connection. You can use the RadDiagramConnection.Attach() method used in the example from the mentioned help article.

On the other hand, you can try the Gliding Connections, they are demonstrated in our Class Diagram Demo. These connections move around the Shape when the shapes are being moved. Hope you will like this feature.

Regards,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Kristoffer
Top achievements
Rank 1
answered on 05 Feb 2013, 09:19 AM
Thanks. I think I follow.

But, I'm not sure why we would have to change the source using this Attach method. Isn't it possible to set the connector's position using a style and set its location using the shape's width + a converter?
0
Petar Mladenov
Telerik team
answered on 08 Feb 2013, 07:51 AM
Hello Kristoffer,

 You are right that setting the Source of the Connection is not the easiest way to handle this scenario. I missed something important to mention. When the Source or Target of the connections is not specified explicitly or via style, the connection will automatically attach to the closest connector. In your case this will work flawlessly if you don't move your shapes. When the first shape becomes wider, the connection will change its source to the custom one (we suppose you have added custom connector ) because it is the closest one. If you move the shapes the connection will change its source/target based on a min-distance logic. If you need to move the shapes, you can set the connection SourceConnectionPosition instead of the Attach method:

private void RadButton_Click_1(object sender, RoutedEventArgs e)
        {
            this.diagram.Shapes[0].Width = 400;
            this.diagram.Connections[0].SourceConnectorPosition = "CustomConnector";
        }
 
        private void diagram_Loaded_1(object sender, RoutedEventArgs e)
        {
            RadDiagramConnector connector = new RadDiagramConnector();
            connector.Offset = new Point(0.25, 1);
            connector.Name = "CustomConnector";
            this.diagram.Shapes[0].Connectors.Add(connector);
        }
Please check out the suggested approach in the attached solution and let us know if it is suitable for you or not. We think code behind is better in this case instead of binding to ActualWidth of the Shape with Converter. 

Greetings,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
Diagram
Asked by
Kristoffer
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Kristoffer
Top achievements
Rank 1
Share this question
or