Class Decorator

A connector's start and end points can be decorated with some customizable shapes like arrows, circles, diamond, or path.

Inheritance
System.Object
EJTagHelper
Decorator
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 Decorator : EJTagHelper

Constructors

Decorator()

Declaration
public Decorator()

Decorator(Decorator)

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

Properties

BorderColor

Gets or sets border color of the decorator

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

"black"
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.SourceDecorator = new Decorator() { BorderColor = "red" };
           Model.Connectors.Add(Connector);

BorderWidth

Gets or sets the border width of the decorator

Declaration
[JsonProperty("borderWidth")]
public double BorderWidth { 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.VerticalAlign = VerticalAlignment.Top;
           Connector.Segments.Add(new Segment() { Type = Segments.Straight });
           Connector.SourceDecorator = new Decorator() { BorderWidth = 5 };
           Model.Connectors.Add(Connector);

CssClass

Gets or sets the style properties of the decorator

Declaration
[JsonProperty("cssClass")]
public string CssClass { 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.SourceDecorator = new Decorator() { CssClass = "classname", Shape = DecoratorShapes.Path, PathData = "M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z" };
           Model.Connectors.Add(Connector);

FillColor

Gets or sets the fill color of the  decorator

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

"black"
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.SourceDecorator = new Decorator() { FillColor = "red" };
           Model.Connectors.Add(Connector);

Height

Gets or sets the height of the the decorator

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

8
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.SourceDecorator = new Decorator() { Height = 10 };
           Model.Connectors.Add(Connector);

PathData

Gets or sets the custom shape of the source decorator

Declaration
[JsonProperty("pathData")]
public string PathData { 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.SourceDecorator = new Decorator() { Shape = DecoratorShapes.Path, PathData = "M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z" };

Shape

Gets or sets the decorator of the connector

Declaration
[JsonProperty("shape")]
[JsonConverter(typeof(StringEnumConverter))]
public DecoratorShapes Shape { get; set; }
Property Value
Type Description
DecoratorShapes

null
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.SourceDecorator = new Decorator() { Shape = DecoratorShapes.OpenArrow };
           Model.Connectors.Add(Connector);

Width

Gets or sets the decorator width

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

8
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.SourceDecorator = new Decorator() { Height = 10, Width = 10 };
           Model.Connectors.Add(Connector);