Connector is pinned when shape is moved.

2 posts, 0 answers
  1. Fred
    Fred avatar
    7 posts
    Member since:
    Jan 2015

    Posted 12 Jun 2015 Link to this post

    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.

  2. Vessy
    Admin
    Vessy avatar
    1384 posts

    Posted 17 Jun 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top