Class Connector
Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them.
Inherited Members
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 : EJTagHelperConstructors
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
[JsonConverter(typeof(StringEnumConverter))]
[JsonProperty("flip")]
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();