menu

ASP.NET Web Forms

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class Connector

    Show / Hide Table of Contents

    Class Connector

    Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them.

    Inheritance
    System.Object
    EJTagHelper
    Connector
    Inherited Members
    EJTagHelper.GetControlDetails()
    EJTagHelper.GetControlDetails(String)
    System.Object.ToString()
    System.Object.Equals(System.Object)
    System.Object.Equals(System.Object, System.Object)
    System.Object.ReferenceEquals(System.Object, System.Object)
    System.Object.GetHashCode()
    System.Object.GetType()
    System.Object.MemberwiseClone()
    Namespace: Syncfusion.JavaScript.DataVisualization.Models.Diagram
    Assembly: Syncfusion.EJ.dll
    Syntax
    public class Connector : EJTagHelper

    Constructors

    Connector()

    Initializes a new instance of the Connector class.

    Declaration
    public Connector()

    Connector(Connector)

    Initializes a new instance of the Connector class.

    Declaration
    public Connector(Connector src)
    Parameters
    Type Name Description
    Connector src

    Properties

    AddInfo

    Gets or sets additional information about connectors

    Declaration
    [JsonProperty("addInfo")]
    public object AddInfo { get; set; }
    Property Value
    Type Description
    System.Object

    null

    Examples
               Connector Connector = new Connector();
               Connector.Name = "connector1";
    
               Dictionary<string, object> AddInfo = new Dictionary<string, object>();
               AddInfo.Add("Description", "Bidirectional Flow");
               connector.AddInfo = AddInfo;

    BridgeSpace

    Gets or sets the width of the line bridges

    Declaration
    [JsonProperty("bridgeSpace")]
    public double BridgeSpace { get; set; }
    Property Value
    Type Description
    System.Double

    10

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector1 = new Connector()
               {
                   Name = "connector1",
                   SourcePoint = new DiagramPoint(100, 100),
                   TargetPoint = new DiagramPoint(200, 200),
                   BridgeSpace = 15
               };
               Model.Connectors.Add(Connector1);
               Connector Connector2 = new Connector()
               {
                   Name = "connector2",
                   SourcePoint = new DiagramPoint(150, 100),
                   TargetPoint = new DiagramPoint(150, 200),
                   BridgeSpace = 15
               };
               Model.Connectors.Add(Connector2);
               Model.Constraints = DiagramConstraints.Default | DiagramConstraints.Bridging;

    Constraints

    Gets or sets constraints of the connector

    Declaration
    [JsonConverter(typeof(StringEnumConverter))]
    [JsonProperty("constraints")]
    public ConnectorConstraints Constraints { get; set; }
    Property Value
    Type Description
    ConnectorConstraints

    ConnectorConstraints.Default

    Examples
               Connector Connector1 = new Connector()
               {
                   Name = "connector1",
                   SourcePoint = new DiagramPoint(100, 100),
                   TargetPoint = new DiagramPoint(200, 200),
                   Constraints = ConnectorConstraints.Bridging
               };
               Model.Connectors.Add(Connector1);

    CornerRadius

    Gets or sets the radius of the rounded corner

    Declaration
    [JsonProperty("cornerRadius")]
    public double CornerRadius { get; set; }
    Property Value
    Type Description
    System.Double

    0

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector1 = new Connector();
               Connector1.Name = "connector1";
               Connector1.SourcePoint = new DiagramPoint(100, 100);
               Connector1.TargetPoint = new DiagramPoint(200, 200);
               Connector1.CornerRadius = 15;
               Connector1.Segments.Add(new Segment() { Type = Segments.Orthogonal });
               Model.Connectors.Add(Connector1);

    CssClass

    Gets or sets the styles of shapes

    Declaration
    [JsonProperty("cssClass")]
    public string CssClass { get; set; }
    Property Value
    Type Description
    System.String

    String.Empty

    Examples
       <style>
           .hoverConnector:hover {
               stroke:blue
           }
       </style>
               DiagramProperties Model = new DiagramProperties();
               Connector connector1 = new Connector();
               connector1.Name = "connector1";
               connector1.SourcePoint = new DiagramPoint(100, 100);
               connector1.TargetPoint = new DiagramPoint(200, 200);
               connector1.CssClass = "hoverConnector";
               Model.Connectors.Add(connector1);
               ViewData["diagramModel"] = Model;

    Flip

    Gets or sets the flip direction of connectors

    Declaration
    [JsonProperty("flip")]
    [JsonConverter(typeof(StringEnumConverter))]
    public FlipDirection Flip { get; set; }
    Property Value
    Type Description
    FlipDirection

    black

    Examples
               
    DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";                                   
               Connector.Flip = FlipDirection.Horizontal;
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    HorizontalAlign

    Gets or sets the horizontal alignment of the connector. Applicable, if the parent of the connector is a container

    Declaration
    [JsonConverter(typeof(StringEnumConverter))]
    [JsonProperty("horizontalAlign")]
    public HorizontalAlignment HorizontalAlign { get; set; }
    Property Value
    Type Description
    HorizontalAlignment

    HorizontalAlignment.Left

    Examples
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.HorizontalAlign = HorizontalAlignment.Right;
               Model.Connectors.Add(Connector);

    Labels

    Gets or sets collection of label objects where each object represents a label

    Declaration
    [JsonProperty("labels")]
    public Collection Labels { get; set; }
    Property Value
    Type Description
    Collection

    Collection

    Examples
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.Labels.Add(new Label() { Text = "Connector" });

    Line

    Declaration
    [Obsolete("Use Segments")]
    public Line Line { get; set; }
    Property Value
    Type Description
    Line

    LineColor

    Gets or sets the stroke color of the connector

    Declaration
    [JsonProperty("lineColor")]
    public string LineColor { get; set; }
    Property Value
    Type Description
    System.String

    black

    Examples
                DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.LineColor = "blue";
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    LineDashArray

    Gets or sets the pattern of dashes and gaps used to stroke the path of the connector

    Declaration
    [JsonProperty("lineDashArray")]
    public string LineDashArray { get; set; }
    Property Value
    Type Description
    System.String

    String.Empty

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.LineDashArray = "2,2";
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    LineHitPadding

    Gets or sets the padding value to ease the interaction with connectors

    Declaration
    [JsonProperty("lineHitPadding")]
    public double LineHitPadding { get; set; }
    Property Value
    Type Description
    System.Double

    10

    Examples
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.LineHitPadding = 15;
               Model.Connectors.Add(Connector);

    LineWidth

    Gets or sets the width of the line

    Declaration
    [JsonProperty("lineWidth")]
    public double LineWidth { get; set; }
    Property Value
    Type Description
    System.Double

    1

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.LineWidth = 10;
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    MaxHeight

    Declaration
    [JsonProperty("maxHeight")]
    public double MaxHeight { get; set; }
    Property Value
    Type Description
    System.Double

    MaxWidth

    Gets or sets maximum width of the connector

    Declaration
    [JsonProperty("maxWidth")]
    public double MaxWidth { get; set; }
    Property Value
    Type Description
    System.Double

    0

    Examples
            Connector Connector = new Connector()
               {
                   Name = "connector1",
                   SourcePoint = new DiagramPoint(100, 100),
                   TargetPoint = new DiagramPoint(200, 200),
                   MaxWidth = 100
               };

    MinHeight

    Gets or sets minimum height of the connector

    Declaration
    [JsonProperty("minHeight")]
    public double MinHeight { get; set; }
    Property Value
    Type Description
    System.Double

    0

    Examples
            Connector Connector = new Connector()
               {
                   Name = "connector1",
                   SourcePoint = new DiagramPoint(100, 100),
                   TargetPoint = new DiagramPoint(200, 200),
                   MinHeight = 100
               };

    MinWidth

    Gets or sets minimum width of the connector

    Declaration
    [JsonProperty("minWidth")]
    public double MinWidth { get; set; }
    Property Value
    Type Description
    System.Double

    0

    Examples
            Connector Connector = new Connector()
               {
                   Name = "connector1",
                   SourcePoint = new DiagramPoint(100, 100),
                   TargetPoint = new DiagramPoint(200, 200),
                   MinWidth = 100
               };

    Name

    Gets or sets Name of the connector

    Declaration
    [JsonProperty("name")]
    public string Name { get; set; }
    Property Value
    Type Description
    System.String

    String.Empty

    Examples
               Connector connector1 = new Connector()
               {
                   Name = "connector1", 
               };
               Model.Connectors.Add(connector1);

    Opacity

    Gets or sets the transparency of the connector

    Declaration
    [JsonProperty("opacity")]
    public double Opacity { get; set; }
    Property Value
    Type Description
    System.Double

    1

    Examples
                Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.Opacity = 1;      
               Model.Connectors.Add(Connector);

    PaletteItem

    Gets or sets the size and preview size of the node to add that to symbol palette.

    Declaration
    [JsonProperty("paletteItem")]
    public PaletteItem PaletteItem { get; set; }
    Property Value
    Type Description
    PaletteItem

    null

    Examples
               SymbolPaletteProperties SymbolPalette = new SymbolPaletteProperties();
               SymbolPalette.Palettes = new Collection();
               Palette Palette = new Palette("Connectors");
               palette.Expanded = true;
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.Segments.Add(new Segment() { Type = Segments.Bezier });
               Connector.PaletteItem.PreviewWidth = 100;
               Connector.PaletteItem.PreviewHeight = 100;
               Palette.Items.Add(Connector);
               ViewData["PaletteModel"] = SymbolPalette;

    Parent

    Gets or sets the parent name of the connector.

    Declaration
    [JsonProperty("parent")]
    public string Parent { get; set; }
    Property Value
    Type Description
    System.String

    String.Empty

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.MarginTop = 10;
               Connector.Parent = "";
               Group Group = new Group();
               Group.Name = "group";
               Group.Children.Add("Connector");  
               Group.FillColor = "gray";
               Model.Nodes.Add(Group);
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    Segments

    Gets or sets collection of segment objects where each object represents a segment

    Declaration
    [JsonProperty("segments")]
    public Collection Segments { get; set; }
    Property Value
    Type Description
    Collection

    Segments.Straight

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight, Point = new DiagramPoint(75, 150) });
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    Shape

    Declaration
    [JsonProperty("shape")]
    public object Shape { get; set; }
    Property Value
    Type Description
    System.Object

    SourceDecorator

    Gets or sets the source decorator of the connector

    Declaration
    [JsonProperty("sourceDecorator")]
    public Decorator SourceDecorator { get; set; }
    Property Value
    Type Description
    Decorator

    null

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Connector.SourceDecorator = new Decorator() { Shape = DecoratorShapes.OpenArrow };
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    SourceNode

    Gets or sets the source node of the connector

    Declaration
    [JsonProperty("sourceNode")]
    public string SourceNode { get; set; }
    Property Value
    Type Description
    System.String

    String.Empty

    Examples
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Connector.SourceNode = "source";
               Connector.TargetNode = "target";

    SourcePadding

    Gets or sets the space to be left between the source node and the source point of a connector

    Declaration
    [JsonProperty("sourcePadding")]
    public double SourcePadding { get; set; }
    Property Value
    Type Description
    System.Double

    0

    Examples
                Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Connector.SourcePadding = 2;

    SourcePoint

    Gets or sets the start point of the connector

    Declaration
    [JsonProperty("sourcePoint")]
    public DiagramPoint SourcePoint { get; set; }
    Property Value
    Type Description
    DiagramPoint

    DiagramPoint

    Examples
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Connector.SourcePoint = new DiagramPoint(100, 100);

    SourcePort

    Gets or sets the source port of the connector

    Declaration
    [JsonProperty("sourcePort")]
    public string SourcePort { get; set; }
    Property Value
    Type Description
    System.String

    String.Empty

    Examples
                DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Connector.SourceNode = "source";
               Connector.SourcePort = "sourceport";
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    TargetDecorator

    Gets or sets the target decorator of the connector

    Declaration
    [JsonProperty("targetDecorator")]
    public Decorator TargetDecorator { get; set; }
    Property Value
    Type Description
    Decorator

    new Decorator()

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Connector.TargetDecorator = new Decorator() { Shape = DecoratorShapes.OpenArrow };
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    TargetNode

    Gets or sets the target node of the connector

    Declaration
    [JsonProperty("targetNode")]
    public string TargetNode { get; set; }
    Property Value
    Type Description
    System.String

    String.Empty

    Examples
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200); 
               Connector.TargetNode = "TargetNode";

    TargetPadding

    Gets or the space to be left between the target node and the target point of the connector

    Declaration
    [JsonProperty("targetPadding")]
    public double TargetPadding { get; set; }
    Property Value
    Type Description
    System.Double

    0

    Examples
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Connector.TargetDecorator = new Decorator() { Shape = DecoratorShapes.Circle };
               Connector.TargetPadding = 2;

    TargetPoint

    Gets or sets the end point of the connector

    Declaration
    [JsonProperty("targetPoint")]
    public DiagramPoint TargetPoint { get; set; }
    Property Value
    Type Description
    DiagramPoint

    DiagramPoint

    Examples
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Connector.TargetDecorator = new Decorator() { Shape = DecoratorShapes.Circle };
               Connector.TargetPoint = new DiagramPoint(200, 200);

    TargetPort

    Gets or sets the targetPort of the connector

    Declaration
    [JsonProperty("targetPort")]
    public string TargetPort { get; set; }
    Property Value
    Type Description
    System.String

    String.Empty

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Connector.TargetDecorator = new Decorator() { Shape = DecoratorShapes.Circle };
               Connector.TargetPort = "targetport";
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    Tooltip

    Gets or sets the tooltip that should be shown when the mouse hovers over connector

    Declaration
    [JsonProperty("tooltip")]
    public Tooltip Tooltip { get; set; }
    Property Value
    Type Description
    Tooltip

    null

    Examples
       <script type="text/x-jsrender" id="mouseovertooltip">
       <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
           <span style="padding: 5px;"> {{:name}} </span>
       </div>
       </script>
              DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Top;
               Connector.Segments.Add(new Segment() { Type = Segments.Straight });
               Tooltip Tooltip = new Tooltip();
               Tooltip.TemplateId = "mouseovertooltip";
               Tooltip.Alignment.Horizontal = HorizontalAlignment.Center;
               Tooltip.Alignment.Vertical = VerticalAlignment.Bottom;
               Connector.Constraints = ConnectorConstraints.InheritTooltip;
               Connector.Tooltip = tooltip;
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    Type

    Gets or sets the connector type as connector

    Declaration
    [JsonProperty("type")]
    public string Type { get; set; }
    Property Value
    Type Description
    System.String

    "connector"

    Examples
               Connector Connector = new Connector()
               {
                   Name = "connector1",
                   Type = "connector"
               };
               Model.Connectors.Add(Connector);

    VerticalAlign

    Gets or sets the vertical alignment of connector (Applicable,if the parent is group)

    Declaration
    [JsonProperty("verticalAlign")]
    [JsonConverter(typeof(StringEnumConverter))]
    public VerticalAlignment VerticalAlign { get; set; }
    Property Value
    Type Description
    VerticalAlignment

    VerticalAlignment.Top

    Examples
               DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.VerticalAlign = VerticalAlignment.Bottom;
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;
               return View();

    Visible

    Enables or disables the visibility of connector

    Declaration
    [JsonProperty("visible")]
    public bool Visible { get; set; }
    Property Value
    Type Description
    System.Boolean

    true

    Examples
                DiagramProperties Model = new DiagramProperties();
               Connector Connector = new Connector();
               Connector.Name = "connector1";
               Connector.SourcePoint = new DiagramPoint(100, 100);
               Connector.TargetPoint = new DiagramPoint(200, 200);
               Connector.Visible = false;
               Model.Connectors.Add(Connector);
               ViewData["diagramModel"] = Model;

    ZOrder

    Gets or sets the Z index of the connector

    Declaration
    [JsonProperty("zOrder")]
    public double ZOrder { get; set; }
    Property Value
    Type Description
    System.Double

    -1

    Examples
               Connector Connector = new Connector()
               {
                   Name = "connector1",
                   ZOrder = 3
               };
               Model.Connectors.Add(Connector);

    Methods

    Clone()

    Performs a deep copy of the set of matched elements, meaning that it copies the matched elements as well as all of their descendant elements.

    Declaration
    public object Clone()
    Returns
    Type Description
    System.Object

    object

    Examples
               Connector Connector = new Connector() { Name = "connector" };
               Connector ConnectorClone = (Connector)Connector.Clone();     
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved