We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Allowing users to move connector segments - those diamonds on your demo!

Thread ID:





117515 Nov 1,2014 11:04 PM UTC Nov 11,2014 07:01 AM UTC ASP.NET Web Forms 6
Tags: Diagram
Jim Jacobs
Asked On November 1, 2014 11:04 PM UTC


I notice on your diagram demo that "grey filled diamonds" appear on the connectors that allow the user to easily move the various connector segments.
This is a necessary feature, but the Diagram Builder sample the you provided me does not appear to have this capability, nor do I see any reference to this in the online documentation. 

How do I accomplish this?  This is definitely a requirement since without it, the connectors may cross over nodes.

Thanks in advance for any advice on how to implement this essential feature.


Shyam G [Syncfusion]
Replied On November 3, 2014 07:05 AM UTC

Hi Jim

Thanks for using Syncfusion products.

We are glad to inform you that we have created a diagram builder sample which satisfies your requirement of Editable segments on the connector and sample is attached below.

Here is the code snippet to create connectors.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

            <ej:Diagram ID="Diagram1" runat="server" Height="600px" Width="100%"></ej:Diagram>


               Connector connector = new Connector();

                connector.Name = "Connector";

                Segment seg = new Syncfusion.JavaScript.DataVisualization.Models.Diagram.Segment(Segments.Orthogonal);


                connector.SourcePoint = new DiagramPoint(0, 0);

                connector.TargetPoint = new DiagramPoint(40, 40);

                connector.LineWidth = 2;


Please let me know if any concerns.


Shyam G.

Attachment: DiagramBuilder_sample2065910574_cbfba6cc.zip

Jim Jacobs
Replied On November 3, 2014 04:13 PM UTC

Hi Shyam,

I get how to create a connector.
I'm just confused as to why the Diagram Builder that you initially provided me does not render the diamond handles on the orthogonal connectors.
I've attached a screenshot of what I see at my end.

If I look at the code behind that generates the first orthogonal connector I see:

Connector orthogonalLine1 = CreateConnectors("orthogonalLine1", DecoratorShapes.Arrow, new Syncfusion.JavaScript.DataVisualization.Models.Diagram.Line(Lines.Orthogonal, new DiagramPoint(0, 0), new DiagramPoint(40, 40)), null);

and the CreateConnectors is as follows:

private Connector CreateConnectors(string name, DecoratorShapes decoratorShapes, Syncfusion.JavaScript.DataVisualization.Models.Diagram.Line line, string lineDashArray)
            Connector connector = new Connector();
            connector.Name = name;
            connector.Line = line;
            connector.TargetDecorator = new Decorator();
            connector.TargetDecorator.Shape = decoratorShapes;
            connector.LineWidth = 2;
            connector.LineDashArray = lineDashArray;
            return connector;

So what am I doing wrong?  Were these handles introduced in a more recent release?

Please advise.



Attachment: Syncfusion_Orthogonal_Connector__No_Drag_Handles_3541fc37.zip

Shyam G [Syncfusion]
Replied On November 4, 2014 11:36 AM UTC

Hi Jim

Thanks for the update.



Were these handles introduced in a more recent release?

Yes, these handles introduced in a more recent release of volume 3,2014(

Please let me know if any concerns.


Shyam G

Shyam G [Syncfusion]
Replied On November 4, 2014 01:02 PM UTC

Hi Jim

Please ignore our previous update.

Please note that we have some changes in creating connectors in our current release( “Line” is  deprecated and we use “segments” now. The property “startpoint” and “endpoint” is deprecated and we use “SourcePoint” and “TargetPoint” now. Please see the code snippet below for creating connectors.

Here is the code snippet

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

            <ej:Diagram ID="Diagram1" runat="server" Height="600px" Width="100%"></ej:Diagram>


               Connector connector = new Connector();

                connector.Name = "Connector";

                Segment seg = new Syncfusion.JavaScript.DataVisualization.Models.Diagram.Segment(Segments.Orthogonal);


                connector.SourcePoint = new DiagramPoint(0, 0);

                connector.TargetPoint = new DiagramPoint(40, 40);

                connector.LineWidth = 2;


We are glad to announce that our Volume 3 2014 is rolled out and is available for download under the following link.


you can download the above volume 3 final release and check the diagram builder sample for further reference.

Location for diagram builder sample in ASP.NET is shown below


Please let me know if any concerns.


Shyam G

Jim Jacobs
Replied On November 10, 2014 08:47 PM UTC

Hi Shyam,

I downloaded and sure enough the diamond shape handles on the connectors do appear!
Please pass on my thanks to the developers for this feature.


Shyam G [Syncfusion]
Replied On November 11, 2014 07:01 AM UTC

Hi Jim

Thanks for your compliment.

Please let us know if you require further assistance on this.


Shyam G


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon