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

[Jim Jacobs]

Hi,

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.

Jim

[Shyam G]

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.Segments.Add(seg);

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

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

                connector.LineWidth = 2;

                Diagram1.Connectors.Add(connector);

Please let me know if any concerns.

Regards,

Shyam G.

Attachment: DiagramBuilder_sample2065910574_cbfba6cc.zip

[Jim Jacobs]

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.

Thanks

Jim

Attachment: Syncfusion_Orthogonal_Connector__No_Drag_Handles_3541fc37.zip

[Shyam G]

Hi Jim

Thanks for the update.

Query	Response
Were these handles introduced in a more recent release?	Yes, these handles introduced in a more recent release of volume 3,2014(12.3.0.36)

Please let me know if any concerns.

Regards,

Shyam G

[Shyam G]

Hi Jim

Please ignore our previous update.

Please note that we have some changes in creating connectors in our current release(12.3.0.36). “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.Segments.Add(seg);

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

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

                connector.LineWidth = 2;

                Diagram1.Connectors.Add(connector);

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

http://www.syncfusion.com/forums/117495/essential-studio-2014-volume-3-final-release-v12-3-0-36-available-for-download 

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

C:\Users\labuser\AppData\Local\Syncfusion\EssentialStudio\12.3.0.36\Web\Samples\Web\Dashboard

Please let me know if any concerns.

Regards,

Shyam G

[Jim Jacobs]

Hi Shyam,

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

Jim

[Shyam G]

Hi Jim

Thanks for your compliment.

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

Regards,

Shyam G