New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Create Connection Points Programatically in RadDiagram

Description

In some scenarios, you may want to add intermediate connection points between the shapes in order to achieve specific layout. This can be done both through the markup, and by creating the needed connection points programmatically when the connection type is set to Polyline.

Solution

The default type of the connections in RadDiagram is Cascading. In order to be able to add custom points to a connection, you have to make sure that the connection's type is set to Polyline. Once this is done, you can define the desired DiagramConnectionPoint objects by assigning the coordinates where you need to visualize them in them like follows:

<telerik:RadDiagram ID="RadDiagram1" runat="server">
    <ConnectionDefaultsSettings Type="Polyline"></ConnectionDefaultsSettings>
    <ShapesCollection>
        <telerik:DiagramShape Id="s1" Width="100" Height="60" X="20" Y="20"></telerik:DiagramShape>
        <telerik:DiagramShape Id="s2" Width="100" Height="60" X="300" Y="20"></telerik:DiagramShape>
    </ShapesCollection>
</telerik:RadDiagram>
protected void Page_Load(object sender, EventArgs e)
{
    Telerik.Web.UI.DiagramConnection connection = new Telerik.Web.UI.DiagramConnection();
    connection.FromSettings.ShapeId = "s1";
    connection.ToSettings.ShapeId = "s2";
    connection.PointsCollection.Add(new Telerik.Web.UI.DiagramConnectionPoint() { X = 150, Y = 50 });
    connection.PointsCollection.Add(new Telerik.Web.UI.DiagramConnectionPoint() { X = 150, Y = 20 });
    connection.PointsCollection.Add(new Telerik.Web.UI.DiagramConnectionPoint() { X = 270, Y = 20 });
    connection.PointsCollection.Add(new Telerik.Web.UI.DiagramConnectionPoint() { X = 270, Y = 50 });
    RadDiagram1.ConnectionsCollection.Add(connection);
}

See Also

In this article