Class Connector
Connectors are objects used to create link between two points, nodes or ports to represent the relationships between them.
Inherited Members
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();