Connector is pinned when shape is moved.

[Fred]

I have an issue with the Diagram control when the LayoutType is Layered or Force.

With the code below, when either the GreatGrandChild 1 or GrandChild 1 shapes are moved, the connector between the two is pinned. BuildErrorDiagram() is called in  Page_Load.

The image files attached show the before and after on the shap move.

<ASPX Code>

 <div>
        <telerik:RadDiagram ID="RadDiagram1" runat="server" Height="950px"></telerik:RadDiagram>
    </div>

 

<C# Code Behind>

        private void BuildErrorDiagram()
        {
            RadDiagram1.ConnectionsCollection.Clear();
            RadDiagram1.ShapesCollection.Clear();

            RadDiagram1.LayoutSettings.Type = Telerik.Web.UI.Diagram.LayoutType.Layered;
            RadDiagram1.LayoutSettings.Subtype = Telerik.Web.UI.Diagram.LayoutSubtype.Horizontal;


            Telerik.Web.UI.DiagramShape p1 = new Telerik.Web.UI.DiagramShape();
            p1.Id = "P0";
            p1.ContentSettings.Text = "Parent 0";
            RadDiagram1.ShapesCollection.Add(p1);

            Telerik.Web.UI.DiagramShape c1 = new Telerik.Web.UI.DiagramShape();
            c1.Id = "C1";
            c1.ContentSettings.Text = "Child 1";
            RadDiagram1.ShapesCollection.Add(c1);

            Telerik.Web.UI.DiagramShape c2 = new Telerik.Web.UI.DiagramShape();
            c2.Id = "C2";
            c2.ContentSettings.Text = "Child 2";
            RadDiagram1.ShapesCollection.Add(c2);

            Telerik.Web.UI.DiagramShape gc1 = new Telerik.Web.UI.DiagramShape();
            gc1.Id = "GC1";
            gc1.ContentSettings.Text = "GrandChild 1";
            RadDiagram1.ShapesCollection.Add(gc1);

            Telerik.Web.UI.DiagramShape gc2 = new Telerik.Web.UI.DiagramShape();
            gc2.Id = "GC2";
            gc2.ContentSettings.Text = "GrandChild 2";
            RadDiagram1.ShapesCollection.Add(gc2);

            Telerik.Web.UI.DiagramShape gc3 = new Telerik.Web.UI.DiagramShape();
            gc3.Id = "GC3";
            gc3.ContentSettings.Text = "GrandChild 3";
            RadDiagram1.ShapesCollection.Add(gc3);

            Telerik.Web.UI.DiagramShape gc4 = new Telerik.Web.UI.DiagramShape();
            gc4.Id = "GC4";
            gc4.ContentSettings.Text = "GrandChild 4";
            RadDiagram1.ShapesCollection.Add(gc4);

            Telerik.Web.UI.DiagramShape ggc1 = new Telerik.Web.UI.DiagramShape();
            ggc1.Id = "GGC1";
            ggc1.ContentSettings.Text = "GreatGrandChild 1";
            RadDiagram1.ShapesCollection.Add(ggc1);



            Telerik.Web.UI.DiagramConnection dsc1 = new Telerik.Web.UI.DiagramConnection();
            dsc1.ToSettings.ShapeId = p1.Id;
            dsc1.FromSettings.ShapeId = c1.Id;
            dsc1.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
            dsc1.StartCap = Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle;
            dsc1.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.Solid;
            dsc1.ContentSettings.Color = "#fff";

            RadDiagram1.ConnectionsCollection.Add(dsc1);

            Telerik.Web.UI.DiagramConnection dsc2 = new Telerik.Web.UI.DiagramConnection();
            dsc2.ToSettings.ShapeId = p1.Id;
            dsc2.FromSettings.ShapeId = c2.Id;
            dsc2.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
            dsc2.StartCap = Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle;
            dsc2.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.Solid;
            dsc2.ContentSettings.Color = "#fff";

            RadDiagram1.ConnectionsCollection.Add(dsc2);
             
             Telerik.Web.UI.DiagramConnection dsc3 = new Telerik.Web.UI.DiagramConnection();
            dsc3.ToSettings.ShapeId = c1.Id;
            dsc3.FromSettings.ShapeId = gc1.Id;
            dsc3.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
            dsc3.StartCap = Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle;
            dsc3.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.Solid;
            dsc3.ContentSettings.Color = "#fff";

            RadDiagram1.ConnectionsCollection.Add(dsc3);
 
            Telerik.Web.UI.DiagramConnection dsc4 = new Telerik.Web.UI.DiagramConnection();
            dsc4.ToSettings.ShapeId = c2.Id;
            dsc4.FromSettings.ShapeId = gc2.Id;
            dsc4.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
            dsc4.StartCap = Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle;
            dsc4.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.Solid;
            dsc4.ContentSettings.Color = "#fff";

            RadDiagram1.ConnectionsCollection.Add(dsc4);

            Telerik.Web.UI.DiagramConnection dsc40 = new Telerik.Web.UI.DiagramConnection();
            dsc40.ToSettings.ShapeId = gc2.Id;
            dsc40.FromSettings.ShapeId = gc3.Id;
            dsc40.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
            dsc40.StartCap = Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle;
            dsc40.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.Solid;
            dsc40.ContentSettings.Color = "#fff";

            RadDiagram1.ConnectionsCollection.Add(dsc40);

            Telerik.Web.UI.DiagramConnection dsc411 = new Telerik.Web.UI.DiagramConnection();
            dsc411.ToSettings.ShapeId = gc3.Id;
            dsc411.FromSettings.ShapeId = gc4.Id;
            dsc411.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
            dsc411.StartCap = Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle;
            dsc411.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.Solid;
            dsc411.ContentSettings.Color = "#fff";

            RadDiagram1.ConnectionsCollection.Add(dsc411);

            Telerik.Web.UI.DiagramConnection dsc41 = new Telerik.Web.UI.DiagramConnection();
            dsc41.ToSettings.ShapeId = gc2.Id;
            dsc41.FromSettings.ShapeId = gc3.Id;
            dsc41.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
            dsc41.StartCap = Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle;
            dsc41.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.Solid;
            dsc41.ContentSettings.Color = "#fff";

            RadDiagram1.ConnectionsCollection.Add(dsc41);

            Telerik.Web.UI.DiagramConnection dsc5 = new Telerik.Web.UI.DiagramConnection();
            dsc5.ToSettings.ShapeId = gc1.Id;
            dsc5.FromSettings.ShapeId = ggc1.Id;
            dsc5.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
            dsc5.StartCap = Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle;
            dsc5.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.Solid;
            dsc5.ContentSettings.Color = "#fff";

            RadDiagram1.ConnectionsCollection.Add(dsc5);

            Telerik.Web.UI.DiagramConnection dsc6 = new Telerik.Web.UI.DiagramConnection();
            dsc6.ToSettings.ShapeId = gc4.Id;
            dsc6.FromSettings.ShapeId = ggc1.Id;
            dsc6.EndCap = Telerik.Web.UI.Diagram.ConnectionEndCap.ArrowEnd;
            dsc6.StartCap = Telerik.Web.UI.Diagram.ConnectionStartCap.FilledCircle;
            dsc6.StrokeSettings.DashType = Telerik.Web.UI.Diagram.StrokeDashType.Solid;
            dsc6.ContentSettings.Color = "#fff";

            RadDiagram1.ConnectionsCollection.Add(dsc6);

        }

 

 --- END OF CODE

 

Thank you.

[Vessy]

Hi Fred,

The experienced static points are Connection Points added by the Layout in order to render the diagram as per its algorithms. Unfortunately there is no way to move or control this connection point for the moment and the only way to avoid them is to set different layout type to the diagram.

Regards,
Vessy
Telerik