Search results

Migration from Essential JS 1

This article describes the API migration process of Diagram component from Essential JS 1 to Essential JS 2.

Background

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the background color of diagram elements Property:`BackgroundColor`

@{
    Html.EJ().Diagram("diagram").BackgroundColor("lightyellow").Render();
}
Property:`BackgroundColor`
@Html.EJS().Diagram("container").BackgroundColor("red")).Render()
Defines how to align the background image over the diagram area Property:`BackgroundImage.Alignment`

@{
    Html.EJ().Diagram("diagram").BackgroundImage(new BackgroundImage() { Alignment= ImageAlignment.XMidYMid}).Render();
}
Property:`Background.Align`
@Html.EJS().Diagram("container").PageSettings(new DiagramPageSettings() { Background= new DiagramBackground() { Align=ImageAlignment.XMidYMid} }).Render()
Defines how the background image should be scaled/stretched Property:`BackgroundImage.Scale`
@{
    Html.EJ().Diagram("diagram").BackgroundImage(new BackgroundImage() { Scale=ScaleConstraints.Meet }).Render();
}
Property:`Background.Scale`
Html.EJS().Diagram("container").PageSettings(new DiagramPageSettings() { Background= new DiagramBackground() { Scale=Scale.Meet} }).Render()
Sets the source path of the background image Property:`BackgroundImage.Source`
@{
    Html.EJ().Diagram("diagram").BackgroundImage(new BackgroundImage() { Source= "../images/Employee/Artboard 13.Png" }).Render();
}
Property:`Background.Source`
@Html.EJS().Diagram("container").PageSettings(new DiagramPageSettings() { Background= new DiagramBackground() { Source= "Syncfusion.Png" } }).Render()

Bridging

Behaviour API in Essential JS 1 API in Essential JS 2
Sets the direction of line bridges Property:`BridgeDirection`
@{
    Html.EJ().Diagram("diagram").BridgeDirection(BridgeDirection.Bottom).Render();
}
Property:`BridgeDirection`
@Html.EJS().Diagram("container").BridgeDirection(BridgeDirection.Left)).Render()

CommandManager

Behaviour API in Essential JS 1 API in Essential JS 2
Stores the multiple command names with the corresponding command objects Property:`CommandManager.Commands`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
function canExecute(args) {
    var diagram = $("#DiagramContent").EjDiagram("instance");
    return diagram.Model.SelectedItems.Children.Length;
}
function execute(args) {
    var diagram = $("#DiagramContent").EjDiagram("instance");
    diagram.Copy();
    diagram.Paste();
}
[Model]
DiagramProperties Model = new DiagramProperties();
Command clone = new Command() {
    Execute = "executeClone", CanExecute = "canExecuteClone",
    Gesture = new Gesture() { Key = Keys.C, KeyModifiers = KeyModifiers.Shift }
};
Model.CommandManager.Commands.Add("clone", clone);
ViewData["diagramModel"] = Model;
Property:`CommandManager.Commands`

[View]
@Html.EJS().Diagram("container").CommandManager(ViewBag.commandManager).Render()
[Model]
List<DiagramCommand> commands = new List<DiagramCommand>();
commands.Add(new DiagramCommand() { Name = "customCopy" });
DiagramCommandManager commandManager = new DiagramCommandManager()
{
    Commands = commands
};
ViewBag.commandManager = commandManager;

Defines any additional parameters that are required at runtime Property:`CommandManager.Commands.Parameter`

[View]

@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties);
function canExecute(args) {
    var diagram = $("#DiagramContent").EjDiagram("instance");
    return diagram.Model.SelectedItems.Children.Length;
}
function execute(args) {
    var diagram = $("#DiagramContent").EjDiagram("instance");
    diagram.Copy();
    diagram.Paste();
}
[Model]
DiagramProperties Model = new DiagramProperties();
Command clone = new Command() {
    parameter : "node", Execute = "executeClone", CanExecute = "canExecuteClone",
    Gesture = new Gesture() { Key = Keys.C, KeyModifiers = KeyModifiers.Shift }
};
Model.CommandManager.Commands.Add("clone", clone);
ViewData["diagramModel"] = Model;
Property:`CommandManager.Commands.Parameter`

[View]
@Html.EJS().Diagram("container").CommandManager(ViewBag.commandManager).Render()
[Model]
List<DiagramCommand> commands = new List<DiagramCommand>();
commands.Add(new DiagramCommand() { Parameter = "node" });
DiagramCommandManager commandManager = new DiagramCommandManager()
{
    Commands = commands
};
ViewBag.commandManager = commandManager;

Connectors

Behaviour API in Essential JS 1 API in Essential JS 2
Allows the user to save custom information/data about a connector Property:`Connector.AddInfo`
@{
    Dictionary<string, object> AddInfo = new Dictionary<string, object>();
    AddInfo.Add("Description", "Bidirectional Flow");

    Html.EJ().Diagram("diagram")Connectors(c => c.Add(new Connector() { AddInfo = AddInfo })).Render();
}
Property:`Connectors.AddInfo`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
Dictionary<string, object> AddInfo = new Dictionary<string, object>();
AddInfo.Add("Description", "Bidirectional Flow");
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { AddInfo = AddInfo });
ViewBag.Connectors = connectors;

Defines the bridgeSpace of connector Property:`Connector.BridgeSpace`

@{
    Html.EJ().Diagram("diagram")Connectors(c => c.Add(new Connector() { BridgeSpace = 15 })).Render();
}
Property:`Connectors.BridgeSpace`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { BridgeSpace = 15 });
ViewBag.Connectors = connectors;
Enables or disables the behaviors of connectors Property:`Connector.Constraints`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() {  Constraints = Syncfusion.JavaScript.DataVisualization.DiagramEnums.ConnectorConstraints.Bridging })).Render();
}
Property:`Connector.Constraints`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Constraints = ConnectorConstraints.Bridging });
ViewBag.Connectors = connectors;

Defines the radius of the rounded corner Property:`Connector.CornerRadius`

@{
    Collection Segment = new Collection();
    Segment.Add(new Segment() { Type = Segments.Orthogonal });
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { CornerRadius = 15 })).Render();
}
Property:`Connector.CornerRadius`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { CornerRadius = 5});
ViewBag.Connectors = connectors;

Customize connectors appearance using user-defined CSS Property:`Connector.CssClass`

//CSS style
.HoverConnector:hover {
    stroke:blue
}


@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { CssClass = "hoverConnector" })).Render();
}
Not applicable
Sets the horizontal alignment of the connector Property:`Connector.HorizontalAlign`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() {  HorizontalAlign = HorizontalAlignment.Right })).Render();
}
Not applicable
A collection of JSON objects where each object represents a label Property:`Connector.Labels`
@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Text = "Connector" });

    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { Labels = Labels })).Render();
}
Property:`Connector.Annotations`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()

[Model]

List<DiagramConnectorAnnotation> annotation = new List<DiagramConnectorAnnotation>();
annotation.Add(new DiagramConnectorAnnotation() { Content = "connector" });
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Annotations =  annotation});
ViewBag.Connectors = connectors;

Stroke color of the connector Property:`Connector.LineColor`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { Name = "connector1", LineColor = "blue" })).Render();
}
Property:`Connector.Style.StrokeColor`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Style = { StrokeColor = "blue" }});
ViewBag.Connectors = connectors;

Sets the pattern of dashes and gaps used to stroke the path of the connector Property:`Connector.LineDashArray`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { LineDashArray = "2,2" })).Render();
}
Property:`Connector.Style.StrokeDashArray`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() {  Style = { StrokeDashArray= "2, 2" }});
ViewBag.Connectors = connectors;

Sets the width of the line Property:`Connector.LineWidth`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { LineWidth = 10 })).Render();
}
Property:`Connector.Style.StrokeWidth`

[View] @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render() [Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() {  Style = { StrokeWidth = 2 }});
ViewBag.Connectors = connectors;

Defines the padding value to ease the interaction with connectors Property:`Connector.LineHitPadding`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { LineHitPadding = 15 })).Render();
}
Property:`Connectors.HitPadding`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { HitPadding = 20 });
ViewBag.Connectors = connectors;

Sets a unique name for the connector Property:`Connector.Name`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { Name = "connector1" })).Render();
}
Property:`Connectors.Id`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Id = "connector1" });
ViewBag.Connectors = connectors;

Defines the transparency of the connector Property:`Connector.Opacity`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { Opacity = 1 })).Render();
}
Property:`Connectors.Style.Opacity`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Style = { Opacity = 0.5} });
ViewBag.Connectors = connectors;

Sets the parent name of the connector. Property:`Connector.Parent`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { Parent = "parent" })).Render();
}
Not applicable
An array of JSON objects where each object represents a segment Property:`Connector.Segments`

@{
    Collection Segment = new Collection();
    Segment.Add(new Segment() { Type = Segments.Orthogonal });
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ Segments=Segment } )) .Render();
}
Property:`Connector.Segments`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<Segment> segments = new List<Segment>();
segments.Add(new Segment() { Type = Segments.Orthogonal });
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Segments = segments });
ViewBag.Connectors = connectors;

Sets the direction of orthogonal segment Property:`Connector.Segments.Direction`

@{
    Collection Segment = new Collection();
    Segment.Add(new Segment() { Direction = "bottom" });
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ Segments=Segment } )) .Render();
}
Property:`Connectors.Segments.Direction`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<Segment> segments = new List<Segment>();
segments.Add(new Segment() { Direction = "Bottom" });
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Segments = segments });
ViewBag.Connectors = connectors;

Describes the length of orthogonal segment Property:`Connector.Segments.Length`

@{
    Collection Segment = new Collection();
    Segment.Add(new Segment() { Length = 50 });
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ Segments=Segment } )) .Render();
}
Property:`Connectors.Segments.Length`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<Segment> segments = new List<Segment>();
segments.Add(new Segment() { Length=30 });
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Segments = segments });
ViewBag.Connectors = connectors;

Describes the end point of bezier/straight segment Property:`Connector.Segments.Point`

@{
    Collection Segment = new Collection();
    Segment.Add(new Segment() { Point = new DiagramPoint(75, 150) });
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ Segments=Segment } )) .Render();
}
Property:`Connectors.Segments.Point`

Defines the first control point of the bezier segment Property:`Connector.Segments.Point1`

@{
    Collection Segment = new Collection();
    Segment.Add(new Segment() { Point1 = new DiagramPoint(75, 150) });
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ Segments=Segment } )) .Render();
}
Property:`Connectors.Segments.Point1`

Defines the second control point of bezier segment Property:`Connector.Segments.Point2`

@{
    Collection Segment = new Collection();
    Segment.Add(new Segment() { Point2 = new DiagramPoint(75, 150) });
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ Segments=Segment } )) .Render();
}
Property:`Connectors.Segments.Point2`

Sets the type of the segment
@{
    Collection Segment = new Collection();<br>
    Segment.Add(new Segment() { Type = Segments.Straight });<br>
    Html.EJ().Diagram("diagram")Connectors(c => c.Add(new Connector(){ Segments=Segment } )) .Render();
}
Property:`Connectors.Segments.Type`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<Segment> segments = new List<Segment>();
segments.Add(new Segment() { Type = Segments.Bezier });
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Segments = segments });
ViewBag.Connectors = connectors;

Describes the length and angle between the first control point and the start point of bezier segment Property:`Connector.Segments.Vector1`

@{
    Collection Segment = new Collection();<br>
    Segment.Add(new Segment() { Vector1 = new Vector(75, 0) });<br>
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ Segments=Segment } )).Render();
}
Property:`Connectors.Segments.Vector1`

Describes the length and angle between the second control point and end point of bezier segment Property:`Connector.Segments.Vector2`

@{
    Collection Segment = new Collection();<br>
    Segment.Add(new Segment() { Vector2 = new Vector(75, 180) });<br>
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ Segments=Segment } )) .Render();
}
Property:`Connectors.Segments.Vector2`

Sets the type of the connector Property:`Connector.Shape.Type`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ Shape = new Shape() { Type = Shapes.BPMN } })).Render();
}
Property:`Connectors.Shape.Type`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Shape= new BpmnConnectors() { Type = "Bpmn" } });
ViewBag.Connectors = connectors;

Defines the source decorator of the connector Property:`Connector.SourceDecorator`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ SourceDecorator = new Decorator() { Shape=DecoratorShapes.OpenArrow } })).Render();
}
Property:`Connectors.SourceDecorator`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () { Shape = DecoratorShapes.OpenArrow } } });
ViewBag.Connectors = connectors;

Sets the border color of the source decorator Property:`Connector.SourceDecorator.BorderColor`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ SourceDecorator = new Decorator() { BorderColor = "red" } })).Render();
}
Property:`Connectors.SourceDecorator.Style.StrokeColor`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () {  Style = { StrokeColor="green" } } });
ViewBag.Connectors = connectors;

Sets the border width of the decorator Property:`Connector.SourceDecorator.BorderWidth`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ SourceDecorator = new Decorator() { BorderWidth = 5 } })).Render();
}
Property:`Connectors.SourceDecorator.Style.StrokeWidth`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () { Style = { StrokeWidth=2 } } });
ViewBag.Connectors = connectors;

Defines to customize sourceDecorator appearance using user-defined CSS Property:`Connector.SourceDecorator.CssClass`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ SourceDecorator = new Decorator() { CssClass = "classname"  } })).Render();
}
Not applicable
Sets the fill color of the source decorator Property:`Connector.SourceDecorator.FillColor`

@{
    Html.EJ().Diagram("diagram").Height("500px").Width("500px").Connectors(c => c.Add(new Connector(){SourceDecorator = new Decorator() { FillColor = "red"  } })).Render();
}
Property:`Connectors.SourceDecorator.Style.Fill`

[View]
@Html.EJS().Diagram("container").Width("1000").Height("645px").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () {  Style = { Fill= "red" } } });
ViewBag.Connectors = connectors;

Sets the height of the source decorator Property:`Connector.SourceDecorator.Height`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ SourceDecorator = new Decorator() { Height = 10  } })).Render();
}
Property:`Connectors.SourceDecorator.Height`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () {  Height=10 } });
ViewBag.Connectors = connectors;

Defines the custom shape of the source decorator Property:`Connector.SourceDecorator.PathData`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new 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"  } })).Render();
}
Property:`Connectors.SourceDecorator.PathData`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() {  SourceDecorator = new DiagramDecorator () { Shape = DecoratorShapes.Custom, PathData= "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" } });
ViewBag.Connectors = connectors;

Defines the shape of the source decorator. Property:`Connector.SourceDecorator.Shape`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ SourceDecorator = new Decorator() { Shape = OpenArrow  } })).Render();
}
Property:`Connectors.SourceDecorator.Shape`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () { Shape = DecoratorShapes.OpenArrow } });
ViewBag.Connectors = connectors;

Defines the width of the source decorator Property:`Connector.SourceDecorator.Width`

@{
    Html.EJ().Diagram("diagram".Connectors(c => c.Add(new Connector(){ SourceDecorator = new Decorator() { Width = 10 } })).Render();
}
Property:`Connectors.SourceDecorator.Width`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() {  SourceDecorator = new DiagramDecorator () { Width=10 } });
ViewBag.Connectors = connectors;

Sets the source node of the connector Property:`Connector.SourceNode`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ SourceNode = "source" })).Render();
}
Property:`Connectors.SourceID`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { SourceID="source" } });
ViewBag.Connectors = connectors;

Defines the space to be left between the source node and the source point of a connector Property:`Connector.SourcePadding`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ SourcePadding = 2 })).Render();
}
Property:`Connectors.HitPadding`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() {HitPadding=2 });
ViewBag.Connectors = connectors;

Describes the start point of the connector Property:`Connector.SourcePoint`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){SourcePoint = new DiagramPoint(100, 100) })).Render();
}
Property:`Connectors.SourcePoint`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { SourcePoint = { X= 100, Y=100} } });
ViewBag.Connectors = connectors;

Sets the source port of the connector Property:`Connector.SourcePort`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ SourcePort = "sourceport" })).Render();
}
Property:`Connectors.SourcePortID`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() {  SourceID="source", SourcePortID="sourcePortId" });
ViewBag.Connectors = connectors;

Defines the target decorator of the connector Property:`Connector.TargetDecorator`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetDecorator = new Decorator() { Shape=DecoratorShapes.OpenArrow } })).Render();
}
Property:`Connectors.TargetDecorator`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Shape = DecoratorShapes.OpenArrow } });
ViewBag.Connectors = connectors;

Sets the border color of the target decorator Property:`Connector.TargetDecorator.BorderColor`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetDecorator = new Decorator() { BorderColor = "red" } })).Render();
}
Property:`Connectors.TargetDecorator.Style.StrokeColor`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Style = { StrokeColor="green" } } });
ViewBag.Connectors = connectors;

Sets the border width of the decorator Property:`Connector.TargetDecorator.BorderWidth`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetDecorator = new Decorator() { Shape=DecoratorShapes.OpenArrow, BorderWidth = 5 } })).Render();
}
Property:`Connectors.TargetDecorator.Style.StrokeWidth`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Style = { StrokeWidth=2 } }});
ViewBag.Connectors = connectors;

Defines to customize target Decorator appearance using user-defined CSS Property:`Connector.TargetDecorator.CssClass`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetDecorator = new Decorator() { CssClass = "classname" } })).Render();
}
Not applicable
Sets the fill color of the target decorator Property:`Connector.TargetDecorator.FillColor`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetDecorator = new Decorator() { FillColor = "red" } })).Render();
}
Property:`Connectors.TargetDecorator.Style.Fill`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Style = {Fill= "red" }} });
ViewBag.Connectors = connectors;

Sets the height of the target decorator Property:`Connector.TargetDecorator.Height`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetDecorator = new Decorator() { Height = 10 } })).Render();
}
Property:`Connectors.TargetDecorator.Height`

[View]
@Html.EJS().Diagram("container").Width("1000").Height("645px").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Height=10 } });
ViewBag.Connectors = connectors;

Defines the custom shape of the target decorator Property:`Connector.TargetDecorator.PathData`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetDecorator = new Decorator() { shape: DecoratorShapes.Path,
    pathData: "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" } })).Render();
}
Property:`Connectors.TargetDecorator.PathData`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Shape = DecoratorShapes.Custom, PathData= "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" } });
ViewBag.Connectors = connectors;

Defines the shape of the target decorator. Property:`Connector.TargetDecorator.Shape`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetDecorator = new Decorator() { Shape = DecoratorShapes.OpenArrow } })).Render();
}
Property:`Connectors.TargetDecorator.Shape`

[View]
@Html.EJS().Diagram("container").Width("1000").Height("645px").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Shape = DecoratorShapes.OpenArrow } });
ViewBag.Connectors = connectors;

Defines the width of the target decorator Property:`Connector.TargetDecorator.Width`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetDecorator = new Decorator() { Width = 10 } })).Render();
}
Property:`Connectors.TargetDecorator.Width`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Width=10 } });
ViewBag.Connectors = connectors;

Sets the target node of the connector Property:`Connector.TargetNode`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetNode = "target" })).Render();
}
Property:`Connectors.TargetID`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() {  TargetID="target" });
ViewBag.Connectors = connectors;

Defines the space to be left between the target node and the target point of a connector Property:`Connector.TargetPadding`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetPadding = 2 })).Render();
}
Property:`Connectors.HitPadding`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { HitPadding = 2 });
ViewBag.Connectors = connectors;

Describes the start point of the connector Property:`Connector.TargetPoint`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){Name = "connector1", TargetPoint = new DiagramPoint(200, 200)})).Render();
}
Property:`Connectors.TargetPoint`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetPoint = { X = 200, Y = 200 } } });
ViewBag.Connectors = connectors;

Sets the target port of the connector Property:`Connector.TargetPort`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector(){ TargetPort = "targetport" })).Render();
}
Property:`Connectors.TargetPortID`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { TargetID="target", TargetPortID="targetPortId" });
ViewBag.Connectors = connectors;
Defines the tooltip that should be shown when the mouse hovers over connector Property:`Connector.Tooltip`


@{
    Html.EJ().Diagram("diagram").Height("500px").Width("500px").Connectors(c => c.Add(new Connector() { Name = "connector1", SourcePoint = new DiagramPoint(100, 100), TargetPoint = new DiagramPoint(200, 200), Segments = Segment, Tooltip = new Tooltip() { TemplateId = "mouseovertooltip"} } })).Render();
}
Property:`Connectors.Tooltip`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Constraints=ConnectorConstraints.Default | ConnectorConstraints.Tooltip, Tooltip = { Content = "Connector" } });
ViewBag.Connectors = connectors;

Sets the vertical alignment of connector Property:`Connector.VerticalAlign`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { VerticalAlign= VerticalAlignment.Bottom})).Render();
}
Not applicable
Enables or disables the visibility of connector Property:`Connector.Visible`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { Visible= false })).Render();
}
Property:`Connectors.Visible`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Visible = true });
ViewBag.Connectors = connectors;

Sets the z-index of the connector Property:`Connector.ZOrder`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { ZOrder = 3 })).Render();
}
Property:`Connectors.ZIndex`

[View]
@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { ZIndex = -1 });
ViewBag.Connectors = connectors;

Enables/Disables the default behaviors of the diagram Property:`Constraints`

@{
    Html.EJ().Diagram("diagram").Connectors(c => c.Add(new Connector() { Constraints=ConnectorConstraints.Default | ConnectorConstraints.Bridging })).Render();
}
Property:`Constraints`

@Html.EJS().Diagram("container").Constraints(DiagramConstraints.Default | DiagramConstraints.Bridging).Render()

ContextMenu

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the collection of context menu items Property:`ContextMenu.Items`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Name = "HyperLink" });
Model.ContextMenu = new DiagramContextMenu()
{
    Items = menuItems
};
ViewData["diagramModel"] = Model;
Property:`ContextMenuSettings.Items`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Text = "delete" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

Defines the text for the collection of context menu item Property:`ContextMenu.Items.Text`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Text = "Text" });
Model.ContextMenu = new DiagramContextMenu()
{
    Items = menuItems
};
ViewData["diagramModel"] = Model;
Property:`ContextMenuSettings.Items.Text`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Text = "delete" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

Defines the name for the collection of context menu items Property:`ContextMenu.Items.Name`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Name = "HyperLink" });
Model.ContextMenu = new DiagramContextMenu()
{
    Items = menuItems
};
ViewData["diagramModel"] = Model;
Property:`ContextMenuSettings.Items.Id`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Id = "id" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

Defines the image url for the collection of context menu items Property:`ContextMenu.Items.ImageUrl`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { ImageUrl = "Images/zoomin.Png" });
Model.ContextMenu = new DiagramContextMenu()
{
    Items = menuItems
};
ViewData["diagramModel"] = Model;
Property:`ContextMenuSettings.Items.Url`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Url = "Images/zoomin.Png" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

Defines the cssClass for the collection of context menu items Property:`ContextMenu.Items.CssClass`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { CssClass = "menu" });
Model.ContextMenu = new DiagramContextMenu()
{
    Items = menuItems
};
ViewData["diagramModel"] = Model;
Property:`ContextMenuSettings.Items.IconCss`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { IconCss = "e-copy" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

Defines the collection of sub items for the context menu items Property:`ContextMenu.Items.SubItems`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
List<ContextMenuItem> SubItems = new List<ContextMenuItem>();
SubItems.Add(new ContextMenuItem() { Name = "HyperLink" });
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { SubItems = SubItems });
Model.ContextMenu = new DiagramContextMenu()
{
    Items = menuItems
};
ViewData["diagramModel"] = Model;
Property:`ContextMenuSettings.Items.Items`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
List<ContextMenuItem> SubItems = new List<ContextMenuItem>();
SubItems.Add(new ContextMenuItem() { Id = "id" });
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Items = SubItems });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

Set whether to display the default context menu items or not Property:`ContextMenu.ShowCustomMenuItemsOnly`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.ContextMenu = new DiagramContextMenu()
{
    ShowCustomMenuItemsOnly = true
};
ViewData["diagramModel"] = Model;
Property:`ContextMenuSettings.ShowCustomMenuOnly`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
LDiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    ShowCustomMenuOnly = false
};
ViewBag.contextMenuSettings = contextMenuSettings;

Specifies separator between the menu items Not applicable Property:`ContextMenuSettings.Items.Separator`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Separator = true });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

Define the target to show the menu item. Not applicable Property:`ContextMenuSettings.Items.Target`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Target = ".E-diagramcontent" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

Enables/Disables the context menu items Not applicable Property:`ContextMenuSettings.Show`

[View]
@Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Id = "id" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Show = true
};
ViewBag.contextMenuSettings = contextMenuSettings;

DataSourceSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`DataSourceSettings.DataSource`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.DataSource = getDatasource();
ViewData["diagramModel"] = Model;
Property:`DataSourceSettings.DataManager`

[View]
@Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
[Model]
DiagramDataSource dataSource = new DiagramDataSource()
{
    DataManager = items
};
ViewBag.dataSource = dataSource;

Sets the unique id of the data source items Property:`DataSourceSettings.Id`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.Id = "ID";
ViewData["diagramModel"] = Model;
Property:`DataSourceSettings.Id`

[View]
@Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
[Model]
DiagramDataSource dataSource = new DiagramDataSource()
{
    Id = "Id"
};
ViewBag.dataSource = dataSource;

Defines the parent id of the data source item Property:`DataSourceSettings.Parent`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.Parent = "ReportingPerson";
ViewData["diagramModel"] = Model;
Property:`DataSourceSettings.ParentId`

[View]
@Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
[Model]
DiagramDataSource dataSource = new DiagramDataSource()
{
    ParentId = "ReportingPerson"
};
ViewBag.dataSource = dataSource;

Describes query to retrieve a set of data from the specified datasource Property:`DataSourceSettings.Query`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.Query = "datasource query";
ViewData["diagramModel"] = Model;
Not applicable
Sets the unique id of the root data source item Property:`DataSourceSettings.Root`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.Root = "E1";
ViewData["diagramModel"] = Model;
Property:`DataSourceSettings.Root`

[View]
@Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
[Model]
DiagramDataSource dataSource = new DiagramDataSource()
{
    Root = "E1"
};
ViewBag.dataSource = dataSource;

Describes the name of the table on which the specified query has to be executed Property:`DataSourceSettings.TableName`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.TableName = "datasource table name";
ViewData["diagramModel"] = Model;
Not applicable
Specifies the method name which is used to get the updated data from client side to the server side Property:`DataSourceSettings.CrudAction`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.CrudAction = { Read = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes" }
ViewData["diagramModel"] = Model;
Not applicable
Specifies the create method which is used to get the nodes to be added from client side to the server side Property:`DataSourceSettings.CrudAction.Create`

@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.CrudAction = { Create = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/AddNodes" }
ViewData["diagramModel"] = Model;
Not applicable
Specifies the update method which is used to get the updated data from client side to the server side Property:`DataSourceSettings.CrudAction.Update`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.CrudAction = { Update = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/UpdateNodes" }
ViewData["diagramModel"] = Model;
Not applicable
Specifies the destroy method which is used to get the deleted items data from client side to the server side Property:`DataSourceSettings.CrudAction.Destroy`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.CrudAction = { Destroy = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/DeleteNodes" }
ViewData["diagramModel"] = Model;
Not applicable
Specifies the read method to get the created nodes from client side to the server side Property:`DataSourceSettings.CrudAction.Read`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.CrudAction = { Read = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes" }
ViewData["diagramModel"] = Model;
Not applicable
Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`DataSourceSettings.CustomFields`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.CustomFields = new List<string>()
{
    "Description",
    "Color"
}
ViewData["diagramModel"] = Model;
Property:`DataSourceSettings.Data`

[View]
@Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
[Model]
DiagramDataSource dataSource = new DiagramDataSource()
{
    Data = new List<string>()
    {
        "Description",
        "Color"
    }
};
ViewBag.dataSource = dataSource;

Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`DataSourceSettings.ConnectionDataSource`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    DataSource = DiagramContext.HierarchicalDetails.ToList(),
    SourceNode = "SourceNode",
    TargetNode = "TargetNode",
}
ViewData["diagramModel"] = Model;
Not applicable
Sets the datasource for the connection datasource settings items Property:`DataSourceSettings.ConnectionDataSource.DataSource`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    DataSource = DiagramContext.HierarchicalDetails.ToList()
}
ViewData["diagramModel"] = Model;
Not applicable
Sets the unique id of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.Id`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    Id = "id"
}
ViewData["diagramModel"] = Model;
Not applicable
Sets the source node of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.SourceNode`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    SourceNode = "SourceNode"
}
ViewData["diagramModel"] = Model;
Not applicable
Sets the target node of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.TargetNode`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    TargetNode = "TargetNode"
}
ViewData["diagramModel"] = Model;
Not applicable
Sets the sourcePointX value of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.SourcePointX`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    SourcePointX = "200"
}
ViewData["diagramModel"] = Model;
Not applicable
Sets the sourcePointY value of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.SourcePointY`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    SourcePointY = "300"
}
ViewData["diagramModel"] = Model;
Not applicable
Sets the targetPoint-x value of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.TargetPointX`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    TargetPointX = "100"
}
ViewData["diagramModel"] = Model;
Not applicable
Sets the targetPoint-y value of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.TargetPointY`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    TargetPointY = "100"
}
ViewData["diagramModel"] = Model;
Not applicable
Specifies the method name which is used to get updated connectors from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
     CrudAction = { Create = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/AddConnectors" }
}
ViewData["diagramModel"] = Model;
Not applicable
Specifies the create method which is used to get the connectors to be added from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction.Create`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
     CrudAction = { Create = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/AddConnectors" }
}
ViewData["diagramModel"] = Model;
Not applicable
Specifies the update method which is used to get the updated connectors from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction.Update`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
     CrudAction = {
        Update = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/UpdateConnectors" }
}
ViewData["diagramModel"] = Model;
Not applicable
Specifies the destroy method which is used to get the deleted items data from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction.Destroy`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
     CrudAction = { Destroy = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/DeleteConnectors" }
}
ViewData["diagramModel"] = Model;
Not applicable
Specifies the read method which is used to get the data from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction.Read`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
     CrudAction = { Read = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetConnectors" }
}
ViewData["diagramModel"] = Model;
Not applicable
Specifies the custom fields to get the updated data from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CustomFields`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties).Render();
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DataSourceSettings.ConnectionDataSource = new ConnectionDataSourceSettings()
{
    CustomFields = new List<string>()
    {
        "Description",
        "Color",
    }
}
ViewData["diagramModel"] = Model;
Not applicable

DefaultSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Initializes the default values for nodes and connectors Property:`DefaultSettings.Node`

@{
    Node defaultNode = new Node() { FillColor = "red" };
    Html.EJ().Diagram("diagram").DefaultSettings(d=>d.Node(defaultNode)).Render();
}
Property:`GetNodeDefaults`

@Html.EJS().Diagram("container").GetNodeDefaults("getNodeDefaults")
function getNodeDefaults(obj, diagram) {
    obj.Shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 10 };
    obj.Width = 80;
    obj.Style.StrokeWidth = 2;
    obj.Style.StrokeColor = '#6F409F';
    obj.Height = 35;
}

Initializes the default connector properties Property:`DefaultSettings.Connector`

@{
    Connector defaultConnector = new Connector() { LineColor = "red", LineWidth = 4, LineDashArray = "2,2" };
    Html.EJ().Diagram("diagram").DefaultSettings(d=>d.Connector(defaultConnector)).Render();
}
Property:`GetConnectorDefaults`

@Html.EJS().Diagram("container").GetConnectorDefaults("getConnectorDefaults").Render()
function getConnectorDefaults(obj, diagram) {
    obj.Type = 'Bezier';
    obj.Style.StrokeColor = '#6f409f';
    obj.Style.StrokeWidth = 2;
    obj.TargetDecorator = {
        style: {
            strokeColor: '#6f409f',
            fill: '#6f409f',
        }
    }
}

Initializes the default properties of groups Property:`DefaultSettings.Group`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Group defaultNode = new Group() { Constraints = NodeConstraints.Default | ~NodeConstraints.Drag };
Model.DefaultSettings.Group = defaultNode;
ViewData["diagramModel"] = Model;
Not applicable

DrawType

Behaviour API in Essential JS 1 API in Essential JS 2
Sets the type of JSON object to be drawn through drawing tool Property:`DrawType`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Model.DrawType = { Type: "node" };
ViewData["diagramModel"] = Model;
Property:`DrawingObject`

@Html.EJS().Diagram("container").Created("diagramCreated").Render()
function diagramCreated() {
    diagram = document.GetElementById("diagram").Ej2_instances[0];
    diagram.DrawingObject = { shape: { type: 'Basic', shape: 'Rectangle' } };
    diagram.Tool = ej.Diagrams.DiagramTools.ContinuousDraw;
    diagram.DataBind();
}

EnableAutoScroll

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables auto scroll in diagram Property:`EnableAutoScroll`

@{
    Html.EJ().Diagram("diagram").EnableAutoScroll(false).Render();
}
Property:`CanAutoScroll`

@Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { CanAutoScroll = true}).Render()
[Model]

EnableContextMenu

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables diagram context menu Property:`EnableContextMenu`

@{
    Html.EJ().Diagram("diagram").EnableContextMenu(true).Render();
}
Property:`ContextMenuSettings.Show`

@Html.EJS().Diagram("container").ContextMenuSettings(new DiagramContextMenuSettings() { Show = true}).Render()

GetCustomCursor

Behaviour API in Essential JS 1 API in Essential JS 2
Enable or disable rendering component with custom cursor Not applicable Property:`GetCustomCursor`

@Html.EJS().Diagram("container").GetCustomCursor("getCustomCursor").Render()
function getCustomCursor(action, active) {
    var cursor;
    if (active && action === 'Drag') {
        cursor = '-webkit-grabbing';
    } else if (action === 'Drag') {
        cursor = '-webkit-grabbing'
    }
    return cursor;
}

GetCustomProperty

Behaviour API in Essential JS 1 API in Essential JS 2
Allows to get the custom properties that have to be serialized Not applicable Property:`GetCustomProperty`

@Html.EJS().Diagram("container").GetCustomProperty("getCustomProperty").Render()
function getCustomProperty(key: string) {
    if (key === 'nodes') {
        return ['description'];
        }
    return null;
}

GetDescription

Behaviour API in Essential JS 1 API in Essential JS 2
Allows to get the custom description Not applicable Property:`GetDescription`

@Html.EJS().Diagram("container").GetDescription("getAccessibility").Render()
function getAccessibility(object, diagram) {
    var value;
    if (object instanceof Connector) {
        value = 'clicked on Connector';
    } else {
        value = undefined;
    }
    return value;
}

GetCustomTool

Behaviour API in Essential JS 1 API in Essential JS 2
Allows to get the custom tool Not applicable Property:`GetCustomTool`

@Html.EJS().Diagram("container").Width("1000").Height("645px").GetCustomTool("getTool")
function getTool(action) {
    var tool;
    if (action === 'userHandle') {
        tool = new CloneTool(diagram.CommandHandler, true);
    }
    return tool;
}
class CloneTool extends ToolBase {
    public mouseDown(args) {
        super.MouseDown(args);
        diagram.Copy();
        diagram.Paste();
    }
}

Height

Behaviour API in Essential JS 1 API in Essential JS 2
Specifies the height of the diagram Property:`Height`

@{
    Html.EJ().Diagram("diagram").Height("500px").Render();
}
Property:`Height`

@Html.EJS().Diagram("container").Height("645px").Render()

HistoryManager

Behaviour API in Essential JS 1 API in Essential JS 2
A method that takes a history entry as argument and returns whether the specific entry can be popped or not Property:`HistoryManager.CanPop`

<script>
    var diagram = $("#diagramcontent").EjDiagram("instance");
    var entry = { object: node, prevState: node.EmpInfo };
    diagram.Model.HistoryManager.Push(entry);
    var value = { role: "New role" };
    node.EmpInfo = value;
    if(diagram.Model.HistoryManager.CanPop(entry)){
        diagram.Model.HistoryManager.Pop();
    }
</script>
Not applicable
A method that ends grouping the changes Property:`HistoryManager.CloseGroupAction`

<script>
    var group = diagram.Model.SelectedItems;
    diagram.Model.HistoryManager.StartGroupAction();
    for (var i = 0; i < group.Children.Length; i++) {
        var option = {};
        var item = group.Children[i];
        // Updates the fillColor for all the child elements.
        option.FillColor = args.Style.BackgroundColor;
        diagram.UpdateNode(item.Name, option);
    }
    diagramz.Model.HistoryManager.CloseGroupAction();
</sccript>
Property:`HistoryList.EndGroupAction`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    var objects = [];
    objects.Push(diagram.Nodes[0], diagram.Nodes[1], diagram.Connectors[0]);
    diagram.HistoryList.StartGroupAction();
    diagram.Distribute('Top', objects);
    diagram.Distribute('Bottom', objects);
    diagram.Distribute('BottomToTop', objects);
    diagram.HistoryList.EndGroupAction();
</script>

A method that removes the history of a recent change made in diagram Property:`HistoryManager.Pop`

<script>
    var diagram = $("#diagramcontent").EjDiagram("instance");
    diagram.Model.HistoryManager.Pop();
</script>
Not applicable
A method that allows to track the custom changes made in diagram Property:`HistoryManager.Push`

<script>
    var diagram = $("#diagramcontent").EjDiagram("instance");
    var entry = { object: node, prevState: node.EmpInfo };
    diagram.Model.HistoryManager.Push(entry);
    var value = { role: "New role" };
    node.EmpInfo = value;
</script>
Property:`HistoryList.Push`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    var object = diagram.Nodes[0];
    object['description'] = (document.GetElementById('custom') as HTMLSelectElement).Value;
    var entry = { undoObject: object };
    diagram.HistoryList.Push(entry);
    diagram.DataBind();
</script>

Defines what should be happened while trying to restore a custom change Property:`HistoryManager.Redo`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Model.HistoryManager = new HistoryManager()
{
    Redo = "customUndoRedo"
}
ViewData["diagramModel"] = Model;
function customUndoRedo(args) {
    var diagram = $("#diagramcontent").EjDiagram("instance");
    var node = args.Object;
    var currentState = node.EmpInfo;
    node.EmpInfo = args.PrevState;
    args.PrevState = currentState;
}
Property:`HistoryList.Redo`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    var node1 = diagram.Nodes[0];
    node1['customName'] = 'customNode';
    entry = {
        undoObject: node1
    };
    diagram.HistoryList.Push(entry);
    diagram.HistoryList.Undo = function(args: HistoryEntry) {
        args.RedoObject = cloneObject(args.UndoObject) as NodeModel;
        args.UndoObject['customName'] = 'customNodeChange';
    }
    diagram.HistoryList.Redo = function(args: HistoryEntry) {
        var current = cloneObject(args.UndoObject) as NodeModel;
        args.UndoObject['customName'] = args.RedoObject['customName'];
        args.RedoObject = current;
    }
</script>
Gets the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified Property:`HistoryManager.RedoStack`

<script>
    var diagram = $("#diagramcontent").EjDiagram("instance");
    diagram.Model.HistoryManager.RedoStack();
</script>
Property:`HistoryList.RedoStack`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    diagram.AppendTo('#diagram');
    diagram.HistoryList.RedoStack();
</script>

Restricts the undo and redo actions to a certain limit Property:`HistoryManager.StackLimit`

<script>
    var diagram = $("#diagramcontent").EjDiagram("instance");
    diagram.Model.HistoryManager.StackLimit();
</script>
Not applicable
A method that starts to group the changes to revert/restore them in a single undo or redo Property:`HistoryManager.StartGroupAction`

<script>
    var group = diagram.Model.SelectedItems
    diagram.Model.HistoryManager.StartGroupAction();
    for (var i = 0; i < group.Children.Length; i++) {
        var option = {};
        var item = group.Children[i];
        option.FillColor = args.Style.BackgroundColor;
        diagram.UpdateNode(item.Name, option);
    }
    diagram.Model.HistoryManager.CloseGroupAction();
</script>
Property:`HistoryList.StartGroupAction`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    var objects = [];
    objects.Push(diagram.Nodes[0], diagram.Nodes[1], diagram.Connectors[0]);
    diagram.HistoryList.StartGroupAction();
    diagram.Distribute('Top', objects);
    diagram.Distribute('Bottom', objects);
    diagram.Distribute('BottomToTop', objects);
    diagram.HistoryList.EndGroupAction();
</script>
Defines what should be happened while trying to revert a custom change Property:`HistoryManager.Undo`

@{
    Html.EJ().Diagram("diagram").HistoryManager(h=>h.Undo("customUndoRedo").Redo("customUndoRedo")).Render();
}
<script>
    function customUndoRedo(args) {
        var diagram = $("#diagramcontent").EjDiagram("instance");
        var node = args.Object;
        var currentState = node.EmpInfo;
        node.EmpInfo = args.PrevState;
        args.PrevState = currentState;
    }
</script>
Property:`HistoryList.Undo`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    diagram.HistoryList.Push(entry);
    diagram.HistoryList.Undo = function(args: HistoryEntry) {
        args.RedoObject = cloneObject(args.UndoObject) as NodeModel;
        args.UndoObject['customName'] = 'customNodeChange';
    }
    diagram.HistoryList.Redo = function(args: HistoryEntry) {
        var current = cloneObject(args.UndoObject) as NodeModel;
        args.UndoObject['customName'] = args.RedoObject['customName'];
        args.RedoObject = current;
    }
</script>
Gets the number of undo actions to be stored on the history manager. Its an read-only property and the collection should not be modified Property:`HistoryManager.UndoStack`

<script>
    var diagram = $("#diagramcontent").EjDiagram("instance");
    diagram.Model.HistoryManager.UndoStack();
</script>
Property:`HistoryList.UndoStack`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    diagram.HistoryList.UndoStack();
</script>

Set the current entry object Not applicable Property:`HistoryList.CurrentEntry`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    diagram.HistoryList.CurrentEntry();
</script>

Set the history entry can be undo Not applicable Property:`HistoryList.CanUndo`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    diagram.HistoryList.CanUndo = true;
</script>

Set the history entry can be redo Not applicable Property:`HistoryList.CanRedo`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    diagram.HistoryList.CanRedo = true;
</script>

Used to decide to stored the changes to history Property:`HistoryManager.CanLog`

var diagram = $("#diagramcontent").EjDiagram("instance");
diagram.Model.HistoryManager.CanLog();
Property:`HistoryList.CanLog`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    diagram.HistoryList.CanLog = function (entry: HistoryEntry) {
            entry.Cancel = true;
            return entry;
    }
</script>

Layout

Behaviour API in Essential JS 1 API in Essential JS 2
Specifies the custom bounds to arrange/align the layout Property:`Layout.Bounds`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.Bounds(new Rectangle() { X = 10, Y = 10, Width = 100, Height = 100 })).Render();
}
Property:`Layout.Bounds`

@Html.EJS().Diagram("container").Layout(l => l.Bounds("getBounds")).Render();


Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned Property:`Layout.FixedNode`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.FixedNode("nodeName")).Render();
}
Property:`Layout.FixedNode`

@Html.EJS().Diagram("container").Layout(l => l.FixedNode("node")).Render();

Customizes the orientation of trees/sub trees Property:`Layout.GetLayoutInfo`

<script>
    function getLayoutInfo(diagram, node, options) {
        options.Orientation = "vertical";
        options.Type = "left"; offset = 10;
    };
</script>
@{
    Html.EJ().Diagram("diagram").Layout(l=>l.GetLayoutInfo("getLayoutInfo")).Render();
}
Property:`Layout.GetLayoutInfo`

@Html.EJS().Diagram("container").Layout(l => l.GetLayoutInfo("getLayoutInfo")).Render();
<script>
    function getLayoutInfo(node, options) {
        if (node.Data.Role === 'General Manager') {
            options.Assistants.Push(options.Children[0]);
            options.Children.Splice(0, 1);
        }
        if (!options.HasSubTree) {
            options.Type = 'Right';
        }
    }
</script>
Defines a method to customize the segments based on source and target nodes Property:`Layout.GetConnectorSegments`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.GetConnectorSegments("getConnectorSegments")).Render();
}
Property:`Layout.ConnectorSegments`

@Html.EJS().Diagram("container").Layout(l => l.ConnectorSegments(ConnectorSegments.Default)).Render();

Sets the space to be horizontally left between nodes Property:`Layout.HorizontalSpacing`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.HorizontalSpacing(50)).Render();
}
Property:`Layout.HorizontalSpacing`

@Html.EJS().Diagram("container").Layout(l => l.HorizontalSpacing(50)).Render();

Defines the space to be left between layout bounds and layout Property:`Layout.Margin`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.Margin(new Margin() { Left = 20, Right = 20, Top = 20, Bottom = 20 })).Render();
}
Property:`Layout.Margin`

@Html.EJS().Diagram("container").Layout(l => l.Margin(m=> m.Top(50).Bottom(0).Left(50).Right(0))).Render();

Defines how to horizontally align the layout within the layout bounds Property:`Layout.HorizontalAlignment`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.HorizontalAlignment(HorizontalAlignment.Center)).Render();
}
Property:`Layout.HorizontalAlignment`

@Html.EJS().Diagram("container").Layout(l => l.HorizontalAlignment(HorizontalAlignment.Center)).Render();
Defines how to vertically align the layout within the layout bounds Property:`Layout.VerticalAlignment`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.VerticalAlignment(VerticalAlignment.Center)).Render();
}
Property:`Layout.VerticalAlignment`

@Html.EJS().Diagram("container").Layout(l => l.VerticalAlignment(VerticalAlignment.Top)).Render();

Sets the orientation/direction to arrange the diagram elements Property:`Layout.Orientation`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.Orientation(LeftToRight)).Render();
}
Property:`Layout.Orientation`

@Html.EJS().Diagram("container").Layout(l => l.Orientation(LayoutOrientation.TopToBottom)).Render();

Sets the type of the layout based on which the elements will be arranged Property:`Layout.Type`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.Type(LayoutTypes.HierarchicalTree)).Render();
}
Property:`Layout.Type`

@Html.EJS().Diagram("container").Layout(l => l.Type(LayoutType.OrganizationalChart)).Render();

Sets the space to be vertically left between nodes Property:`Layout.VerticalSpacing`

@{
    Html.EJ().Diagram("diagram").Layout(l=>l.VerticalSpacing(50)).Render();
}
Property:`Layout.VerticalSpacing`

@Html.EJS().Diagram("container").Layout(l => l.VerticalSpacing(50)).Render();

Sets the value is used to define the root node of the layout Property:`Layout.Root`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Model.Layout.Root = "nodename";
ViewData["diagramModel"] = Model;
Property:`Layout.Root`

@Html.EJS().Diagram("container").Layout(l => l.Root("nodename")).Render();

Defines how long edges should be, ideally. This will be the resting length for the springs Property:`Layout.SpringFactor`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Model.Layout.SpringFactor = .4F;
ViewData["diagramModel"] = Model;
Property:`Layout.SpringFactor`

@Html.EJS().Diagram("container").Layout(l => l.SpringFactor(0.8)).Render();

Defines how long edges should be, ideally. This will be the resting length for the springs Property:`Layout.MaxIteraction`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Model.Layout.MaxIteraction = 50;
ViewData["diagramModel"] = Model;
Property:`Layout.MaxIteration`

@Html.EJS().Diagram("container").Layout(l => l.MaxIteration(500)).Render();

Defines how long edges should be, ideally. This will be the resting length for the springs Property:`Layout.SpringLength`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties)
[Model]
DiagramProperties Model = new DiagramProperties();
Model.Layout.SpringLength = 50;
ViewData["diagramModel"] = Model;
Property:`Layout.SpringLength`

@Html.EJS().Diagram("container").Layout(l => l.SpringLength(80)).Render();

Sets how to define the connection direction (first segment direction & last segment direction) Not applicable Property:`Layout.ConnectionDirection`

@Html.EJS().Diagram("container").Layout(l => l.ConnectionDirection(ConnectionDirection.Auto)).Render();

Enables/Disables animation option when a node is expanded/collapsed Not applicable Property:`Layout.EnableAnimation`

@Html.EJS().Diagram("container").Layout(l => l.EnableAnimation(true)).Render();

Defines whether an object should be at the left/right of the mind map. Applicable only for the direct children of the root node Not applicable Property:`Layout.GetBranch`

@Html.EJS().Diagram("container").Layout(l => l.GetBranch("getBranch")).Render();
function getBranch(node, nodes) {
    return node.Data.Branch;
}

Nodes

Behaviour API in Essential JS 1 API in Essential JS 2
Array of JSON objects where each object represents a node Property:`Nodes`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Name = "node1" })).Render();
}
Property:`Nodes`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Id = "nodeName" });
ViewBag.Nodes = nodes;

Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity Property:`Nodes.Activity`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Activity = BPMNActivity.SubProcess })).Render();
}
Property:`Nodes.Shape.Activity`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Id = "nodeName", shape: { type =  'Bpmn', shape =  'Activity', activity = { activity = "Task" } });
ViewBag.Nodes = nodes;

To maintain additional information about nodes Property:`Nodes.AddInfo`

@{
    Dictionary<string, object> AddInfo = new Dictionary<string, object>();
    AddInfo.Add("Description", "Bidirectional Flow");
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { AddInfo = AddInfo })).Render();
}
Property:`Nodes.AddInfo`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
Dictionary<string, object> AddInfo = new Dictionary<string, object>();
AddInfo.Add("Description", "Bidirectional Flow");
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { AddInfo = AddInfo });
ViewBag.Nodes = nodes;

Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process Property:`Nodes.Annotation`

@{
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new BPMNNode() { Annotation = new BPMNAnnotation(){ Text= "Text" } })).Render();
}
Property:`Nodes.Shape.Annotations`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> Node = new List<DiagramNodeAnnotation>();
Node.Add(new DiagramNodeAnnotation() { Content = "Place Order" } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = Node});
ViewBag.Nodes = nodes;

Sets the angle between the BPMN shape and the annotation Property:`Nodes.Annotation.Angle`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Annotation = new BPMNAnnotation(){ Angle=-45 } })).Render();
}
Property:`Nodes.Shape.Annotations.Angle`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
Node.Add(new DiagramBpmnAnnotation() { Angle = -45 });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = Node});
ViewBag.Nodes = nodes;

Sets the direction of the text annotation Property:`Nodes.Annotation.Direction`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Annotation = new BPMNAnnotation(){Direction=BPMNAnnotationDirections.Left } })).Render();
}
Not applicable
Sets the height of the text annotation Property:`Nodes.Annotation.Height`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Annotation = new BPMNAnnotation(){ Height=50 } })).Render();
}
[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
Node.Add(new DiagramBpmnAnnotation() { Height = 50 });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = Node});
ViewBag.Nodes = nodes;

Sets the distance between the BPMN shape and the annotation Property:`Nodes.Annotation.Length`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Annotation = new BPMNAnnotation(){ Length=150 } })).Render();
}
Property:`Nodes.Shape.Annotations.Length`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
Node.Add(new DiagramBpmnAnnotation() { Length = 150 });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = Node});
ViewBag.Nodes = nodes;

Defines the additional information about the flow object in a BPMN Process Property:`Nodes.Annotation.Text`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Annotation = new BPMNAnnotation(){ Text= "Text" } })).Render();
}
Property:`Nodes.Shape.Annotations.Text`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
Node.Add(new DiagramBpmnAnnotation() { Text= "Text" });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = Node});
ViewBag.Nodes = nodes;

Sets the width of the text annotation Property:`Nodes.Annotation.Width`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Annotation = new BPMNAnnotation(){ Width=100 } })).Render();
}
Property:`Nodes.Shape.Annotations.Width`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
Node.Add(new DiagramBpmnAnnotation() { Width = 100 });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = Node});
ViewBag.Nodes = nodes;

Sets the id for the annotation Not applicable Property:`Nodes.Shape.Annotations.Id`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
Node.Add(new DiagramBpmnAnnotation() { Id = "id" });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = Node});
ViewBag.Nodes = nodes;

Defines whether the group can be ungrouped or not Property:`Nodes.CanUngroup`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Node node1 = new Node() { Name = "node1"};
Node node2 = new Node() { Name = "node2"};
Group group = new Group();
group.Children.Add(node1);
group.Children.Add(node2);
group.CanUngroup = false;
ViewData["diagramModel"] = Model;
Not applicable
Array of JSON objects where each object represents a child node/connector Property:`Nodes.Children`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Node node1 = new Node() { Name = "node1"};
Node node2 = new Node() { Name = "node2"};
Group group = new Group();
group.Children.Add(node1);
group.Children.Add(node2);
ViewData["diagramModel"] = Model;

Sets the type of UML classifier Property:`Nodes.Classifier`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new UMLClassifier() { Classifier=ClassifierShapes.Class } )).Render();
}
Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class Property:`Nodes.Class`

@{
    Html.EJ().Diagram("diagram").Nodes(n=>n.Add(new UMLClassifier() { Classifier = ClassifierShapes.Class, Class = { Name = "name" } } )).Render();
}
Not applicable
Sets the name of class Property:`Nodes.Class.Name`

@{
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Name = "name"} } )).Render();
}
Not applicable
Defines the collection of attributes Property:`Nodes.Class.Attributes`

@{
    Collection attribute = new Collection();
    attribute.Add(new UMLAttribute() { Name = "name" });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Attributes= attribute} } )).Render();
}
Not applicable
Sets the name of the attribute Property:`Nodes.Class.Attributes.Name`

@{
    Collection attribute = new Collection();
    attribute.Add(new UMLAttribute() { Name = "name" });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Attributes= attribute} } )).Render();
}
Not applicable
Sets the data type of attribute Property:`Nodes.Class.Attributes.Type`

@{
    Collection attribute = new Collection();
    attribute.Add(new UMLAttribute() { Type = "Date" });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Attributes= attribute} } )).Render();
}
Not applicable
Defines the visibility of the attribute Property:`Nodes.Class.Attributes.Scope`

@{
    Collection attribute = new Collection();
    attribute.Add(new UMLAttribute() { Scope = Scopes.Protected });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Attributes= attribute} } )).Render();
}
Not applicable
Defines the collection of methods of a Class Property:`Nodes.Class.Methods`

@{
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Name = { "getHistory"} });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Methods = methods} } )).Render();
}
Not applicable
Sets the name of the method Property:`Nodes.Class.Methods.Name`

@{
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Name = "getHistory" });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Methods = methods} } )).Render();
}
Not applicable
Defines the arguments of the method Property:`Nodes.Class.Methods.Arguments`

@{
    Collection parameter = new Collection();
    parameter.Add(new UMLParameter() { Name = "Date", Type = "String" });
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Parameters = parameter });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Methods = methods} } )).Render();
}
Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class Property:`Nodes.Class.Methods.Arguments.Name`

@{
    Collection parameter = new Collection();
    parameter.Add(new UMLParameter() { Name = "Date" });
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Parameters = parameter });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Methods = methods} } )).Render();
}
Not applicable
Sets the type of the argument Property:`Nodes.Class.Methods.Arguments.Type`

@{
    Collection parameter = new Collection();
    parameter.Add(new UMLParameter() { Type = "String" });
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Parameters = parameter });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Methods = methods} } )).Render();
}
Not applicable
Sets the return type of the method Property:`Nodes.Class.Methods.Type`

@{
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Type = "History" });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Methods = methods} } )).Render();
}
Not applicable
Sets the visibility of the method Property:`Nodes.Class.Methods.Scope`

@{
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Scope = Protected });
    Html.EJ().Diagram("diagram.Nodes(n => n.Add(new UMLClassifier() {Classifier=ClassifierShapes.Class, Class= { Methods = methods} } )).Render();
}
Not applicable
Defines the state of the node is collapsed/expanded Property:`Nodes.CollapseIcon`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CollapseIcon = { Shape=IconShapes.ArrowUp, } } )).Render();
}
Property:`Nodes.CollapseIcon`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { Shape = IconShapes.ArrowUp} });
ViewBag.Nodes = nodes;

Sets the border color for collapse icon of node Property:`Nodes.CollapseIcon.BorderColor`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CollapseIcon = { BorderColor= "red"} } )).Render();
}
Property:`Nodes.CollapseIcon.BorderColor`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { BorderColor = "red" } });
ViewBag.Nodes = nodes;

Sets the border width for collapse icon of node Property:`Nodes.CollapseIcon.BorderWidth`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CollapseIcon = { BorderWidth=2 } } )).Render();
}
Property:`Nodes.CollapseIcon.BorderWidth`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { BorderWidth = 2 } });
ViewBag.Nodes = nodes;

Sets the fill color for collapse icon of node Property:`Nodes.CollapseIcon.FillColor`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CollapseIcon = { FillColor="green" } } )).Render();
}
Property:`Nodes.CollapseIcon.Fill`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { Fill = "red" } });
ViewBag.Nodes = nodes;

Defines the height for collapse icon of node Property:`Nodes.CollapseIcon.Height`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CollapseIcon = { Height = 10 } } )).Render();
}
Property:`Nodes.CollapseIcon.Height`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { Height = 10 } });
ViewBag.Nodes = nodes;

Sets the horizontal alignment of the icon Property:`Nodes.CollapseIcon.HorizontalAlignment`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CollapseIcon = { HorizontalAlignment = HorizontalAlignment.Left} } )).Render();
}
Property:`Nodes.CollapseIcon.HorizontalAlignment`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { HorizontalAlignment = HorizontalAlignment.Left } });
ViewBag.Nodes = nodes;

To set the margin for the collapse icon of node Property:`Nodes.CollapseIcon.Margin`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {  CollapseIcon = {  Margin = new Margin() { Left = 5 } } })).Render();
}
Property:`Nodes.CollapseIcon.Margin`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { Margin = new DiagramMargin() { Left = 5} } });
ViewBag.Nodes = nodes;

Sets the fraction/ratio(relative to node) that defines the position of the icon Property:`Nodes.CollapseIcon.Offset`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CollapseIcon = {Offset=new DiagramPoint() { X= 0, Y= 0.5F } } })).Render();
}
Property:`Nodes.CollapseIcon.Offset`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { Offset = { X = 0, Y = 0.5 } } });
ViewBag.Nodes = nodes;

Defines the shape of the collapsed state of the node Property:`Nodes.CollapseIcon.Shape`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CollapseIcon = { Shape = IconShapes.ArrowUp } })).Render();
}
Property:`Nodes.CollapseIcon.Shape`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { Shape = IconShapes.ArrowUp } });
ViewBag.Nodes = nodes;

Sets the vertical alignment of the icon Property:`Nodes.CollapseIcon.VerticalAlignment `

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CollapseIcon = { VerticalAlignment= VerticalAlignment.Top } })).Render();
}
Property:`Nodes.CollapseIcon.VerticalAlignment `

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { CollapseIcon = { VerticalAlignment= VerticalAlignment.Top } });
ViewBag.Nodes = nodes;

Defines the custom content of the icon Not applicable Property:`Nodes.CollapseIcon.Content`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() {
    CollapseIcon = {
        Shape = IconShapes.Template,
        Content = '<g><path d="M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455L0,90l7.975-23.522' +
        'c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982' +
        'c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537' +
        'c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938' +
        'c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537' +
        'c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333' +
        'c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882' +
        'c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977' +
        'c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344' +
        'c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223' +
        'C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z">' +
        '</path></g>'
    }
});
ViewBag.Nodes = nodes;

Defines the geometry of a path Not applicable Property:`Nodes.CollapseIcon.PathData`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() {
    CollapseIcon = { Shape = IconShapes.Path, PathData = "M0,0 L0,100" }
});
ViewBag.Nodes = nodes;

Defines the corner radius of the icon border Not applicable Property:`Nodes.CollapseIcon.CornerRadius`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() {
    CollapseIcon = { CornerRadius = 5 }
});
ViewBag.Nodes = nodes;

Defines the space that the icon has to be moved from the icon border Not applicable Property:`Nodes.CollapseIcon.Padding`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() {
    CollapseIcon = { Padding = { Left = 15} }
});
ViewBag.Nodes = nodes;

Defines the distance to be left between a node and its connections(In coming and out going connections) Property:`Nodes.ConnectorPadding`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { ConnectorPadding = 5 })).Render();
}
Not applicable
Enables or disables the default behaviors of the node Property:`Nodes.Constraints`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Constraints = NodeConstraints.Default })).Render();
}
Property:`Nodes.Constraints`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() {
    Constraints = NodeConstraints.Default
});
ViewBag.Nodes = nodes;

Defines the orientation of the container. Applicable, if the group is a container Property:`Nodes.Container.Orientation`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Node node1 = new Node() { Name = "node1"};
Node node2 = new Node() { Name = "node2"};
Group group = new Group();
group.Children.Add(node1);
group.Children.Add(node2);
group.Container = new Container() { Orientation = "Horizontal" };
ViewData["diagramModel"] = Model;

Not applicable
Sets the type of the container. Applicable if the group is a container. Property:`Nodes.Container.Type`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Node node1 = new Node() { Name = "node1"};
Node node2 = new Node() { Name = "node2"};
Group group = new Group();
group.Children.Add(node1);
group.Children.Add(node2);
group.Container = new Container() { Orientation = "Horizontal" };
ViewData["diagramModel"] = Model;

Not applicable
Defines the corner radius of rectangular shapes Property:`Nodes.CornerRadius`

@{
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new BasicShape() { CornerRadius=5 })).Render();
}
Not applicable
This property allows you to customize nodes appearance using user-defined CSS Property:`Nodes.CssClass`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { CssClass= "hoverNode" })).Render();
}
Not applicable
Defines the BPMN data object Property:`Nodes.Data.Type`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Shape = BPMNShapes.DataObject, Data = new BPMNDataObject(){ Type = BPMNDataObjects.Input } })).Render();
}
Property:`Nodes.Shape.DataObject.Type`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "BPMN", Shape = "DataObject", dataObject = new DiagramBpmnDataObject() { Type = BpmnDataObjects.Input} } });
ViewBag.Nodes = nodes;

Defines whether the BPMN data object is a collection or not Property:`Nodes.Data.Collection`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Shape = BPMNShapes.DataObject, Data = new BPMNDataObject(){ Collection = false } })).Render();
}
Property:`Nodes.Shape.DataObject.Collection`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "BPMN", Shape = "DataObject", dataObject = new DiagramBpmnDataObject() { Collection = false } } });
ViewBag.Nodes = nodes;

Defines an Enumeration in a UML Class Diagram Property:`Nodes.Enumeration`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new UMLClassifier() { Classifier = ClassifierShapes.Enumeration, Enumeration = { Name = "AccountType" } })).Render();
}
Not applicable
Sets the name of the Enumeration Property:`Nodes.Enumeration.Name`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new UMLClassifier() { Classifier = ClassifierShapes.Enumeration, Enumeration={ Name = "AccountType" } })).Render();
}
Not applicable
Defines the collection of enumeration members Property:`Nodes.Enumeration.Members`

@{
    Collection member = new Collection();
    member.Add(new UMLEnumeration() { Name = "CheckingAccount" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new UMLClassifier() { Classifier = ClassifierShapes.Enumeration, Enumeration = new UMLEnumeration() { Members = member } })).Render();
}
Not applicable
Sets the name of the enumeration member Property:`Nodes.Enumeration.Members.Name`

@{
    Collection member = new Collection();
    member.Add(new UMLEnumeration() { Name = "CheckingAccount" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new UMLClassifier() { Classifier = ClassifierShapes.Enumeration, Enumeration = new UMLEnumeration() { Members = member } })).Render();
}
Not applicable
Sets the type of the BPMN Events. Applicable, if the node is a BPMN event Property:`Nodes.Event`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Shape=BPMNShapes.Event, Event=BPMNEvents.Intermediate })).Render();
}
Property:`Nodes.Shape.Event`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Event", Event = { Event = BpmnEvents.Start } } });
ViewBag.Nodes = nodes;

Defines the type of the trigger Property:`Nodes.Event.Trigger`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Shape = BPMNShapes.Event, Trigger = BPMNTriggers.None })).Render();
}
Property:`Nodes.Shape.Event.Trigger`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Event", Event = { Trigger = BpmnTriggers.None } } });
ViewBag.Nodes = nodes;

Defines whether the node can be automatically arranged using layout or not Property:`Nodes.ExcludeFromLayout`

@{
    Html.EJ().Diagram("diagram").Layout( l=>l.Type(LayoutTypes.HierarchicalTree)).Nodes(n => n.Add(new Node() { Name = "Patient"ExcludeFromLayout=true }).Add(new Node() { Name = "Patient1" }).Add(new Node() { Name = "Patient2" })).Render();
}
Property:`Nodes.ExcludeFromLayout`

[View]
@Html.EJS().Diagram("container").Layout(new DiagramLayout() { Type = LayoutType.HierarchicalTree}).Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Id = "Patient", ExcludeFromLayout= true } } });
nodes.Add(new DiagramNode() { Id = "Patient1" } } });
nodes.Add(new DiagramNode() { Id = "Patient2" } } });
ViewBag.Nodes = nodes;

Defines the fill color of the node Property:`Nodes.FillColor`

@{
    Html.EJ().Diagram("diagram").Height("500px").Width("500px").Nodes(n => n.Add(new Node() { FillColor="red" })).Render();
}
Property:`Nodes.Style.Fill`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Fill = "red" } });
ViewBag.Nodes = nodes;

Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway Property:`Nodes.Gateway`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Shape=BPMNShapes.Gateway, Gateway=BPMNGateways.Exclusive })).Render();
}
Property:`Nodes.Shape.Gateway`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Gateways", gateWay = { Type = BpmnGateways.Exclusive } } });
ViewBag.Nodes = nodes;

Paints the node with linear color transitions Property:`Nodes.Gradient.Type`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Gradient= new LinearGradient() { Type = "linear" } })).Render();
}
Property:`Nodes.Style.Gradient.Type`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Type = GradientType.Linear } } });
ViewBag.Nodes = nodes;

Defines the x1 value of linear gradient Property:`Nodes.Gradient.LinearGradient.X1`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {  Gradient= new LinearGradient() { Type = "linear", X1 = 0 } })).Render();
}
Property:`Nodes.Style.Gradient.LinearGradient.X1`

Defines the x2 value of linear gradient Property:`Nodes.Gradient.LinearGradient.X2`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {  Gradient= new LinearGradient() { Type = "linear", X2 = 50 } })).Render();
}
Property:`Nodes.Style.Gradient.LinearGradient.X2`

Defines the y1 value of linear gradient Property:`Nodes.Gradient.LinearGradient.Y1`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {  Gradient= new LinearGradient() { Type = "linear", Y1 = 0 } })).Render();
}
Property:`Nodes.Style.Gradient.LinearGradient.Y1`

Defines the y2 value of linear gradient Property:`Nodes.Gradient.LinearGradient.Y2`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Gradient= new LinearGradient() { Type = "linear",  Y2 = 50 } })).Render();
}
Property:`Nodes.Style.Gradient.LinearGradient.Y2`

Defines the type of gradient Property:`Nodes.Gradient.RadialGradient.Type`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {  Gradient= new RadialGradient() { Type = "radial" } })).Render();
}
Property:`Nodes.Style.Gradient.Type`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Type = GradientType.Radial } } });
ViewBag.Nodes = nodes;

Defines the position of the outermost circle Property:`Nodes.Gradient.RadialGradient.Cx`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {  Gradient= new RadialGradient() { Type = "radial", CX=50 } })).Render();
}
Property:`Nodes.Style.RadialGradient.Cx`

Defines the outer most circle of the radial gradient Property:`Nodes.Gradient.RadialGradient.Cy`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {  Gradient= new RadialGradient() { Type = "radial", CY=50 } })).Render();
}
Property:`Nodes.Style.RadialGradient.Cy`

Defines the innermost circle of the radial gradient Property:`Nodes.Gradient.RadialGradient.Fx`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Gradient= new RadialGradient() { Type = "radial", FX=50 } })).Render();
}
Property:`Nodes.Style.RadialGradient.Fx`

Defines the innermost circle of the radial gradient Property:`Nodes.Gradient.RadialGradient.Fy`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Gradient= new RadialGradient() { Type = "radial", FY=50 } })).Render();
}
Property:`Nodes.Style.RadialGradient.Fy`

Defines the different colors and the region of color transitions Property:`Nodes.Gradient.RadialGradient.Stops`

@{
    Collection stops = new Collection();
    stops.Add(new Stop() { Color = "white", Offset = 0 });
    stops.Add(new Stop() { Color = "red", Offset = 50 });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Gradient= new RadialGradient() { Stops = stops } })).Render();
}
Property:`Nodes.Style.RadialGradient.Stops`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramStop> stops = new List<DiagramStop>();
stops.Add(new DiagramStop() { Color = "white", Offset = 0 });
stops.Add(new DiagramStop() { Color = "red", Offset = 50 });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Stops = stops } } });
ViewBag.Nodes = nodes;

Sets the color to be filled over the specified region Property:`Nodes.Gradient.Stops.Color`

@{
    Collection stops = new Collection();
    stops.Add(new Stop() { Color = "white" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Gradient= new RadialGradient() { Stops = stops } })).Render();
}
Property:`Nodes.Style.Gradient.Stops.Color`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramStop> stops = new List<DiagramStop>();
stops.Add(new DiagramStop() { Color = "white" });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Stops = stops } } });
ViewBag.Nodes = nodes;

Sets the position where the previous color transition ends and a new color transition starts Property:`Nodes.Gradient.Stops.Offset`

@{
    Collection stops = new Collection();
    stops.Add(new Stop() { Offset = 0 });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Gradient= new RadialGradient() { Stops = stops } })).Render();
}
Property:`Nodes.Style.Gradient.Stops.Offset`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramStop> stops = new List<DiagramStop>();
stops.Add(new DiagramStop() { Offset = 0 });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Stops = stops } } });
ViewBag.Nodes = nodes;

Describes the transparency level of the region Property:`Nodes.Gradient.Stops.Opacity`

@{
    Collection stops = new Collection();
    stops.Add(new Stop() { Opacity = 0.5F });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Gradient= new RadialGradient() { Stops = stops } })).Render();
}
Property:`Nodes.Style.Gradient.Stops.Opacity`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramStop> stops = new List<DiagramStop>();
stops.Add(new DiagramStop() { Opacity = 0.5 });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Stops = stops } } });
ViewBag.Nodes = nodes;

Defines the header of a swimlane/lane Property:`Nodes.Header`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
SwimLane swimLane = new SwimLane();
Header header = new Header();
header.Text = "Text";
swimLane.Header = header;       ~
Model.Nodes.Add(swimLane);
ViewData["diagramModel"] = Model;
Not applicable
Defines the height of the node Property:`Nodes.Height`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Height=100 })).Render();
}
Property:`Nodes.Height`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Height = 100 });
ViewBag.Nodes = nodes;

Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container Property:`Nodes.HorizontalAlign`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { HorizontalAlign=HorizontalAlignment.Left })).Render();
}
Not applicable
Defines an interface in a UML interface Diagram Property:`Nodes.Interface`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new UMLClassifier() { Classifier = ClassifierShapes.Interface,  } } })).Render();
}
Not applicable
Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface Property:`Nodes.Interface.Name`

@{
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Name = "Patient" } })).Render();
}
Not applicable
Defines the collection of attributes Property:`Nodes.Interface.Attributes`

@{
    Collection attribute = new Collection();
    attribute.Add(new UMLAttribute() { Name = "accepted"  });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Sets the name of the attribute Property:`Nodes.Interface.Attributes.Name`

@{
    Collection attribute = new Collection();
    attribute.Add(new UMLAttribute() { Name = "accepted"  });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Sets the data type of attribute Property:`Nodes.Interface.Attributes.Type`

@{
    Collection attribute = new Collection();
    attribute.Add(new UMLAttribute() { Type = "Date"  });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Defines the visibility of the attribute Property:`Nodes.Interface.Attributes.Scope`

@{
    Collection attribute = new Collection();
    attribute.Add(new UMLAttribute() { Scope = Scopes.Protected  });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Defines the collection of methods of a interface Property:`Nodes.Interface.Methods`

@{
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Scope = Scopes.Protected });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Sets the name of the method Property:`Nodes.Interface.Methods.Name`

@{
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Name = "Date" });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Defines the arguments of the method Property:`Nodes.Interface.Methods.Arguments`

@{
    Collection parameter = new Collection();
    parameter.Add(new UMLParameter() { Name = "Date", Type = "String" });
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Parameters = parameter });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Defines the name, attributes and methods of a interface. Applicable, if the node is a interface Property:`Nodes.Interface.Methods.Arguments.Name`

@{
    Collection parameter = new Collection();
    parameter.Add(new UMLParameter() { Name = "Date" });
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Parameters = parameter });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Sets the type of the argument Property:`Nodes.Interface.Methods.Arguments.Type`

@{
    Collection parameter = new Collection();
    parameter.Add(new UMLParameter() { Type = "String" });
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Parameters = parameter });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Sets the return type of the method Property:`Nodes.Interface.Methods.Type`

@{
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Type = "History" });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Sets the visibility of the method Property:`Nodes.Interface.Methods.Scope`

@{
    Collection methods = new Collection();
    methods.Add(new UMLMethod() { Scope = Scopes.Protected });
    Html.EJ().Diagram("diagram")Nodes(n => n.Add(new UMLClassifier() { Classifier = Interface, Interface = { Attributes = attribute } })).Render();
}
Not applicable
Defines whether the sub tree of the node is expanded or collapsed Property:`Nodes.IsExpanded`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { IsExpanded=false })).Render();
}
Property:`Nodes.IsExpanded`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { IsExpanded = false });
ViewBag.Nodes = nodes;

Sets the node as a swimlane Property:`Nodes.IsSwimlane`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
SwimLane swimLane = new SwimLane();
swimLane.IsSwimlane = true;
Model.Nodes.Add(swimLane);
ViewData["diagramModel"] = Model;
Not applicable
A collection of objects where each object represents a label Property:`Nodes.Labels`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Text = "Connector" });
    Html.EJ().Diagram("diagram").Height("500px").Width("500px").Nodes(n => n.Add(new Node() { Name = "Patient", OffsetX = 100, OffsetY = 100, Labels=Labels })).Render();
}
Property:`Nodes.Annotations`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotaion = new List<DiagramNodeAnnotation>();
annotaion.Add(new DiagramNodeAnnotation() { Content = "Annotation" });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

An array of objects where each object represents a lane. Applicable, if the node is a swimlane Property:`Nodes.Lanes`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Collection lanes = new Collection();
lanes.Add(new Lane() { Name = "lane1" });
lanes.Add(new Lane() { Name = "lane2" });
SwimLane swimLane = new SwimLane();
swimLane.Lanes = lanes;
Model.Nodes.Add(swimLane);
ViewData["diagramModel"] = Model;
Not applicable
This property allows you to customize lanes appearance using user-defined CSS Property:`Nodes.Lanes.CssClass`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
DiagramProperties Model = new DiagramProperties();
Collection lanes = new Collection();
lanes.Add(new Lane() { CssClass = "hoverLane" });
SwimLane swimLane = new SwimLane();
swimLane.Lanes = lanes;
Model.Nodes.Add(swimLane);
ViewData["diagramModel"] = Model;
Not applicable
Defines the header of the lane Property:`Nodes.Lanes.Header`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection lanes = new Collection();
Header header = new Header();
header.Text = "Text";
lanes.Add(new Lane() { Header = header });
SwimLane swimLane = new SwimLane();
swimLane.Lanes = lanes;
swimLane.IsSwimlane = true;
Model.Nodes.Add(swimLane);
Not applicable
Defines the width of lane Property:`Nodes.Lanes.Width`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection lanes = new Collection();
lanes.Add(new Lane() { Width = 200 });
SwimLane swimLane = new SwimLane();
swimLane.Lanes = lanes;
swimLane.IsSwimlane = true;
Model.Nodes.Add(swimLane);
Not applicable
An array of objects where each object represents a child node of the lane Property:`Nodes.Lanes.Children`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection lanes = new Collection();
Collection children = new Collection();
children.Add(new Node() { Name = "process" });
lanes.Add(new Lane() {  Children = children });
SwimLane swimLane = new SwimLane();
swimLane.Lanes = lanes;
swimLane.IsSwimlane = true;
Model.Nodes.Add(swimLane);
Not applicable
Defines the object as a lane Property:`Nodes.Lanes.IsLane`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection lanes = new Collection();
lanes.Add(new Lane() {  IsLane = true });
SwimLane swimLane = new SwimLane();
swimLane.Lanes = lanes;
Model.Nodes.Add(swimLane);
Not applicable
Defines the minimum space to be left between the bottom of parent bounds and the node Property:`Nodes.Margin`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {  MarginBottom=50, MarginLeft=10, MarginRight=10, MarginTop=10 })).Render();
}
Property:`Nodes.Margin`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Margin = new DiagramMargin() { Bottom = 15, Left = 15, Right = 15, Up = 15 }  });
ViewBag.Nodes = nodes;

Defines the maximum height limit of the node Property:`Nodes.MaxHeight`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {MaxHeight=100})).Render();
}
Property:`Nodes.MaxHeight`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { MaxHeight = 50  });
ViewBag.Nodes = nodes;

Sets the unique identifier of the node Property:`Nodes.Name`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Name = "Patient" })).Render();
}
Property:`Nodes.Id`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { ID = "Name"  });
ViewBag.Nodes = nodes;

Sets the path geometry that defines the shape of a path node Property:`Nodes.PathData`

@{
    Html.EJ().Diagram("diagram").Height("500px").Width("500px").Nodes(n => n.Add(new BasicShape() { Shape = BasicShapes.Path, PathData= "M 370.9702,194.9961 L 359.5112,159.7291 L 389.5112,137.9341 L 419.5112,159.7291 L 408.0522,194.9961 L 370.9702,194.9961 z" })).Render();
}
Property:`Nodes.Shape.Data`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new DiagramBasicShape() { Type = Shapes.Path  } });
ViewBag.Nodes = nodes;

An array of objects, where each object represents a smaller region(phase) of a swimlane Property:`Nodes.Phases`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection phase = new Collection();
phase.Add(new Phase() { Name = "Phase1" });
SwimLane swimLane = new SwimLane();
swimLane.Phases = phase;
Model.Nodes.Add(swimLane);
Not applicable
Defines the header of the smaller regions Property:`Nodes.Phases.Label`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection label = new Collection();
label.Add(new Label() { Text = "Phase1" });
Collection phase = new Collection();
phase.Add(new Phase() { Labels =  label });
SwimLane swimLane = new SwimLane();
swimLane.Phases = phase;
Model.Nodes.Add(swimLane);
Not applicable
Defines the line color of the splitter that splits adjacent phases Property:`Nodes.Phases.LineColor`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection phase = new Collection();
phase.Add(new Phase() { LineColor = "grean" });
SwimLane swimLane = new SwimLane();
swimLane.Phases = phase;
Model.Nodes.Add(swimLane);
Not applicable
Sets the length of the smaller region(phase) of a swimlane Property:`Nodes.Phases.Offset`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection phase = new Collection();
phase.Add(new Phase() { Offset = "150" });
SwimLane swimLane = new SwimLane();
swimLane.Phases = phase;
Model.Nodes.Add(swimLane);
Not applicable
Sets the orientation of the phase Property:`Nodes.Phases.Orientation`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection phase = new Collection();
phase.Add(new Phase() { Orientation = "Horizontal" });
SwimLane swimLane = new SwimLane();
swimLane.Phases = phase;
Model.Nodes.Add(swimLane);
Not applicable
Sets the height of the phase headers Property:`Nodes.PhaseSize`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Collection phase = new Collection();
phase.Add(new Phase() { Orientation = "Horizontal" });
SwimLane swimLane = new SwimLane();
swimLane.PhaseSize = "50";
Model.Nodes.Add(swimLane);
Not applicable
Sets the ratio/ fractional value relative to node, based on which the node will be transformed(positioning, scaling and rotation) Property:`Nodes.Pivot`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Pivot = new DiagramPoint() { X=0, Y=0 } })).Render();
}
Property:`Nodes.Pivot`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Pivot = new DiagramPoint() { X = 0, Y = 0} });
ViewBag.Nodes = nodes;

Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon Property:`Nodes.Points`

@{
    Collection point = new Collection();
    point.Add(new DiagramPoint() { X = 0, Y = 12.5F });
    point.Add(new DiagramPoint() { X = 0, Y = 50 });
    point.Add(new DiagramPoint() { X = 50, Y = 50 });
    point.Add(new DiagramPoint() { X = 50, Y = 0 });
    point.Add(new DiagramPoint() { X = 12.5F, Y = 0 });
    point.Add(new DiagramPoint() { X = 0, Y = 12.5F });
    Html.EJ().Diagram("diagram").Height("500px").Width("500px").Nodes(n => n.Add(new BasicShape() { Name = "Patient", OffsetX = 100, OffsetY = 100, Shape=Syncfusion.JavaScript.DataVisualization.DiagramEnums.BasicShapes.Polygon, Points= point })).Render();
}
Property:`Nodes.Shape.Points`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramPoint> points = new List<DiagramPoint>();
points.Add(new DiagramPoint() { X = 35, Y = 0 });
points.Add(new DiagramPoint() { X = 65, Y = 0 });
points.Add(new DiagramPoint() { X = 100, Y = 35 });
points.Add(new DiagramPoint() { X = 100, Y = 65 });
points.Add(new DiagramPoint() { X = 65, Y = 100 });
points.Add(new DiagramPoint() { X = 35, Y = 100 });
points.Add(new DiagramPoint() { X = 0, Y = 65 });
points.Add(new DiagramPoint() { X = 0, Y = 35 });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new DiagramBasicShape() { Type = Basic, Shape = BasicShapes.Polygon, Points = points  } });
ViewBag.Nodes = nodes;

An array of objects where each object represents a port Property:`Nodes.Ports`

@{
    Collection ports = new Collection();
    ports.Add(new Port() { Name="port1", Offset=new DiagramPoint() {X=0.5F, Y=0 }, Shape=PortShapes.Square, Size=10 });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Ports=ports })).Render();
}
Property:`Nodes.Ports`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramPort> ports = new List<DiagramPort>();
ports.Add(new DiagramPort() { Id = "port" });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Ports = ports });
ViewBag.Nodes = nodes;

Sets the border color of the port Property:`Nodes.Ports.BorderColor`

@{
    Collection ports = new Collection();
    ports.Add(new Port() { BorderColor= "Yellow" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Ports=ports })).Render();
}
Property:`Nodes.Ports.Style.StrokeColor`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramPort> ports = new List<DiagramPort>();
ports.Add(new DiagramPort() {  });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Ports = ports });
ViewBag.Nodes = nodes;

Defines whether connections can be created with the port Property:`Nodes.Ports.Constraints`

@{
    Collection ports = new Collection();
    ports.Add(new Port() { Constraints=PortConstraints.Connect });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Ports=ports })).Render();
}
Property:`Nodes.Ports.Constraints`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramPort> ports = new List<DiagramPort>();
ports.Add(new DiagramPort() { Constraints = PortConstraints.Drag });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Ports = ports });
ViewBag.Nodes = nodes;

An array of objects where each object represents a port Property:`Nodes.Ports.Shape`

@{
    Collection ports = new Collection();
    ports.Add(new Port() { Shape=PortShapes.Square });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Ports=ports })).Render();
}
Property:`Nodes.Ports.Shape`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramPort> ports = new List<DiagramPort>();
ports.Add(new DiagramPort() { Shape = PortShapes.Circle });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Ports = ports });
ViewBag.Nodes = nodes;

Sets the vertical alignment of the port with respect to its immediate parent Not applicable Property:`Nodes.Ports.VerticalAlignment`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramPort> ports = new List<DiagramPort>();
ports.Add(new DiagramPort() { VerticalAlignment = VerticalAlignment.Top });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Ports = ports });
ViewBag.Nodes = nodes;

Defines the opacity and the position of shadow Property:`Nodes.Shadow`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() {  Shadow=new Shadow() { Opacity=0.5F } })).Render();
}
Property:`Nodes.Shadow`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shadow = new DiagramShadow() { Opacity = 0.5 } });
ViewBag.Nodes = nodes;

Defines the sub process of a BPMN Activity. Applicable, if the type of the BPMN activity is sub process Property:`Nodes.SubProcess`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() {  Shape=BPMNShapes.Activity, Activity=BPMNActivity.SubProcess, SubProcess = { Loop=BPMNLoops.Standard, Adhoc=true } })).Render();
}
Property:`Nodes.Shape.Activity.SubProcess`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = { Activity = BpmnActivities.SubProcess} } });
ViewBag.Nodes = nodes;

Defines the collection of events that need to be appended with BPMN Sub-Process Property:`Nodes.SubProcess.Events`

@{
    Collection events = new Collection();
    events.Add(new BPMNEvent() { Name = "intermediate1" } });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() {  Shape = BPMNShapes.Activity, Activity = BPMNActivity.SubProcess, SubProcess = { Type = BPMNSubProcessTypes.Event, Events=events } })).Render();
}
Property:`Nodes.Shape.Activity.SubProcess.Events`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramBpmnSubEvent> events = new List<DiagramBpmnSubEvent>();
events.Add(new DiagramBpmnSubEvent() { Event = BpmnEvents.Intermediate });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = { Activity = BpmnActivities.SubProcess, SubProcess = { Type = BpmnSubProcessTypes.Event, Events = events }  } } });
ViewBag.Nodes = nodes;

An array of objects where each object represents a port Property:`Nodes.SubProcess.Events.Ports`

@{
    Collection ports = new Collection();
    ports.Add(new Port() { Name = "port1" });
    Collection events = new Collection();
    events.Add(new BPMNEvent() { Ports = ports } });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() {  Shape = BPMNShapes.Activity, Activity = BPMNActivity.SubProcess, SubProcess = { Type = BPMNSubProcessTypes.Event, Events=events } })).Render();
}
Property:`Nodes.Shape.Activity.SubProcess.Events.Ports`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramPort> ports = new List<DiagramPort>();
ports.Add(new DiagramPort() { Id = "port"};
List<DiagramBpmnSubEvent> events = new List<DiagramBpmnSubEvent>();
events.Add(new DiagramBpmnSubEvent() { Event = BpmnEvents.Intermediate, Ports = ports });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = { Activity = BpmnActivities.SubProcess, SubProcess = { Type = BpmnSubProcessTypes.Event, Events = events }  } } });
ViewBag.Nodes = nodes;

A collection of objects where each object represents a label Property:`Nodes.SubProcess.Events.Labels`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Text = "Label" });
    Collection events = new Collection();
    events.Add(new BPMNEvent() { Labels = Labels } });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() {  Shape = BPMNShapes.Activity, Activity = BPMNActivity.SubProcess, SubProcess = { Type = BPMNSubProcessTypes.Event, Events=events } })).Render();
}
Property:`Nodes.Shape.Activity.SubProcess.Events.Annotations`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Content = "Annotation" });
List<DiagramBpmnSubEvent> events = new List<DiagramBpmnSubEvent>();
events.Add(new DiagramBpmnSubEvent() { Event = BpmnEvents.Intermediate, Annotation = annotation });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = { Activity = BpmnActivities.SubProcess, SubProcess = { Type = BpmnSubProcessTypes.Event, Events = events }  } } });
ViewBag.Nodes = nodes;

Defines the task of the BPMN activity. Applicable, if the type of activity is set as task Property:`Nodes.Task`

@{
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Shape = BPMNShapes.Activity, Activity = BPMNActivity.Task, Task = { Type=BPMNTasks.Service } })).Render();
}
Property:`Nodes.Shape.Activity.Task`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = BpmnActivities.Task, Task = { Type = BpmnTasks.Service } }  } } });
ViewBag.Nodes = nodes;

NodeTemplate

Behaviour API in Essential JS 1 API in Essential JS 2
Binds the custom JSON data with node properties Property:`NodeTemplate`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Text = "Label" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
<script>

    function nodeTemplate(diagram, node) {
        node.labels[0].text = node.Description;
        node.fillColor = node.Color;
        node.width = node.Width;
        node.height = node.Height;
        node.offsetX = node.offsetX;
        node.offsetY = node.offsetY;
    }
</script>
Property:`SetNodeTemplate`

@Html.EJS().Diagram("container").SetNodeTemplate("setNodeTemplate").Render()
<script>
    var getTextElement = (text: string) => {
        var textElement = new TextElement();
        textElement.Width = 50;
        textElement.Height = 20;
        textElement.Content = text;
        return textElement;
    };
    function setNodeTemplate() {
        setNodeTemplate: (object: NodeModel, diagram: Diagram): StackPanel => {
            if (object.Id === 'node2') {
                var table = new StackPanel();
                table.Orientation = 'Horizontal';
                var column1 = new StackPanel();
                column1.Children = [];
                column1.Children.Push(getTextElement('Column1'));
                addRows(column1);
                var column2 = new StackPanel();
                column2.Children = [];
                column2.Children.Push(getTextElement('Column2'));
                addRows(column2);
                table.Children = [column1, column2];
                return table;
            }
            return null;
        }
    }
</script>

Layers

Behaviour API in Essential JS 1 API in Essential JS 2
A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes Property:`Layers`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Model.Layers = new Collection();
Model.Layers.Add(new Layer() { Name = "Layer1" });
Property:`Layers`

[View]
@Html.EJS().Diagram("container").Layers(ViewBag.Layers).Render()
[Model]
List<DiagramLayer> layers = new List<DiagramLayer>();
layers.Add(new DiagramLayer() { Id = "layer" });
ViewBag.Layers = layers;

A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes Property:`Layers.Print`

[View]
@Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
[Model]
Model.Layers = new Collection();
Model.Layers.Add(new Layer() { Print = true });
Not applicable

Annotations

Behaviour API in Essential JS 1 API in Essential JS 2
A collection of objects where each object represents a label Property:`Labels.Text`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Text = "Label" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Content`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Content = "Annotation" });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Offset for annotation content Property:`Labels.Offset`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Offset=new DiagramPoint() { X = 0, Y = 1 } });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Offset`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Offset=new DiagramPoint() { X = 0, Y = 1 } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Sets the hyperlink for the labels Property:`Labels.HyperLink`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Text = "HRPortal", Hyperlink= "https://www.Syncfusion.Com" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Hyperlink`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() {Content = "HRPortal", Hyperlink = "https://www.Syncfusion.Com" });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Enables/disables the bold style Property:`Labels.Bold`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Bold=true });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Style.Bold`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { Bold = true } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Sets the border color of the label Property:`Labels.BorderColor`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { BorderColor="red" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Style.StrokeColor`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { StrokeColor = "red" } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Sets the border width of the label Property:`Labels.BorderWidth`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { BorderWidth=2 });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Style.StrokeWidth`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { StrokeWidth=2 } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

This property allows you to customize labels appearance using user-defined CSS Property:`Labels.CssClass`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { CssClass= "hoverText" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Not applicable
Enables or disables the default behaviors of the label Property:`Labels.Constraints`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Constraints = LabelConstraints.Resizable });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Constraints`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Constraints = AnnotationConstraints.InheritReadOnly });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Sets the fill color of the text area Property:`Labels.FillColor`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { FillColor= "green" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Style.Fill`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { Fill = "white" } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Sets the font color of the text Property:`Labels.FontColor`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() {  FontColor="blue" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Style.Color`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { Color = "black" } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Sets the font family of the text Property:`Labels.FontFamily`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { FontFamily= "seugoe UI" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Style.FontFamily`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { FontFamily = "seugoe UI" } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Sets the height of the label Property:`Labels.Height`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Height = 100 });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Height`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Height = 10 });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Sets the horizontal alignment of the label Property:`Labels.HorizontalAlignment`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { HorizontalAlignment=HorizontalAlignment.Right });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.HorizontalAlignment`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { HorizontalAlignment = HorizontalAlignment.Center });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

To set the margin of the label Property:`Labels.Margin`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Margin=new LabelMargin() { Left=5} });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Margin`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Margin = new DiagramMargin() { Bottom = 15 } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Defines whether the label is editable or not Property:`Labels.ReadOnly`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { ReadOnly=true });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Constraints`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Constraints = AnnotationConstraints.ReadOnly });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Sets the id of svg/html templates. Applicable, if the node’s label is HTML or native Property:`Labels.TemplateId`

<script id="SvgEllipse" type="text/x-jsrender">
        <svg xmlns="http://www.w3.Org/2000/svg"
            xmlns:xlink="http://www.w3.Org/1999/xlink">
            <circle cx="10" cy="6" r="5"
                    style="stroke:#006600; fill:#00cc00" />
        </svg>
</script>
@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { TemplateId= "SvgEllipse" });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Not applicable
Defines how to align the text inside the label Property:`Labels.TextAlign`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { TextAlign=TextAlign.Left });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Style.TextAlign`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { TextAlign = TextAlign.Left } });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Enables or disables the visibility of the label Property:`Labels.Visible`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Visible=false });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Property:`Annotations.Visibility`

[View]
@Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
[Model]
List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
annotation.Add(new DiagramNodeAnnotation() { Visibility = false });
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode() { Annotations = annotation });
ViewBag.Nodes = nodes;

Gets whether the label is currently being edited or not Property:`Labels.Mode`

@{
    Collection Labels = new Collection();
    Labels.Add(new Label() { Mode = LabelEditMode.View });
    Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
}
Not applicable

PageSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the size and appearance of diagram page Property:`PageSettings.AutoScrollBorder`

@{
    Html.EJ().Diagram("diagram").PageSettings(p=>p.AutoScrollBorder(new AutoScrollBorder() { Left=50, Top=50, Bottom=50, Right=50})).Render();
}
Not applicable
Sets whether multiple pages can be created to fit all nodes and connectors Property:`PageSettings.MultiplePage`

@{
    Html.EJ().Diagram("diagram").PageSettings(p=>p.MultiplePage(false)).Render();
}
Property:`PageSettings.MultiplePage`

@Html.EJS().Diagram("container").PageSettings(new DiagramPageSettings() { MultiplePage= true  }).Render()

Defines the background color of diagram pages Property:`PageSettings.PageBackgroundColor`

@{
    Html.EJ().Diagram("diagram").PageSettings(p=>p.PageBackground("lightgrey")).Render();
}
Property:`PageSettings.Background.Color`

@Html.EJS().Diagram("container").PageSettings(new DiagramPageSettings() { Background = new DiagramBackground() {Color="red" }  }).Render()

Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” Property:`PageSettings.SrollableArea`

@{
    Html.EJ().Diagram("diagram").PageSettings(p=>p.ScrollableArea(new ScrollableArea() { Height=300, Width=300, X=0, Y= 0})).Render();
}
Property:`ScrollSettings.ScrollableArea`

@Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { ScrollableArea = "getScrollableArea" }).Render()
<script>
    function getScrollableArea() {
        var scrollableArea = { X = 0, Y = 0, Width = 300, Height = 300 };
        return scrollableArea;
    }
</script>

Defines the draggable region of diagram elements Property:`PageSettings.BoundaryConstraints`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.PageSettings = new PageSettings()
{
    BoundaryConstraints = BoundaryConstraints.Diagram
};
ViewData["diagramModel"] = Model;
Property:`PageSettings.BoundaryConstraints`

@Html.EJS().Diagram("container").PageSettings(new DiagramPageSettings() { BoundaryConstraints= BoundaryConstraints.Diagram  }).Render()

ScrollSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the zoom value, zoom factor, scroll status and view port size of the diagram Property:`ScrollSettings.HorizontalOffset`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.ScrollSettings = new ScrollSettings()
{
    HorizontalOffset = 300
};
ViewData["diagramModel"] = Model;
Property:`ScrollSettings.HorizontalOffset`

@Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { HorizontalOffset = 300 }).Render()

Allows to extend the scrollable region that is based on the scroll limit Property:`ScrollSettings.Padding`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.ScrollSettings = new ScrollSettings()
{
    Padding = { Left = 25, Bottom = 25, Right = 25, Top = 25 }
};
ViewData["diagramModel"] = Model;
Not applicable
Allows to read the maximum zoom value of scroller Not applicable Property:`ScrollSettings.MaxZoom`

@Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { MaxZoom = 2.5  }).Render()

Allows to read the maximum zoom value of scroller Not applicable Property:`ScrollSettings.AutoScrollBorder`

@Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { MaxZoom = 2.5  }).Render()

Enables/Disables the autoscroll option Not applicable Property:`ScrollSettings.CanAutoScroll`

@Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { CanAutoScroll = true }).Render()

Defines the scrollable area of diagram Not applicable Property:`ScrollSettings.ScrollableArea`

@Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { ScrollableArea = "getScrollableArea" }).Render()
<script>
    function getScrollableArea() {
        var scrollableArea = { X = 0, Y = 0, Width = 300, Height = 300 };
        return scrollableArea;
    }
</script>

SnapSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables snapping nodes/connectors to objects Property:`SnapSettings.EnableSnapToObject`

@{
    Html.EJ().Diagram("diagram").SnapSettings(s=>s.EnableSnapToObject(true)).Render();
}
Not applicable
Defines the appearance of horizontal gridlines Property:`SnapSettings.HorizontalGridLines`

@{
    decimal lineInterval = { 1, 14, 0.5F, 14.5F};
    Html.EJ().Diagram("diagram").SnapSettings(s=>s.HorizontalGridLines(h=>h.LinesInterval(lineInterval))).Render();
}
Property:`SnapSettings.HorizontalGridlines`

[View]
@Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
[Model]
double[] intervals = { 0.95, 9.05, 0.2, 9.75 };
DiagramSnapSettings snapSettings = new DiagramSnapSettings();
snapSettings.HorizontalGridlines = new DiagramGridlines() {
    LineIntervals = intervals
};
ViewBag.SnapSettings = snapSettings;

Defines the appearance of vertical gridlines Property:`SnapSettings.VerticalGridLines`

@{
    decimal lineInterval = { 1, 14, 0.5F, 14.5F};
    Html.EJ().Diagram("diagram").SnapSettings(s=>s.VerticalGridLines(v=> v.LinesInterval(lineInterval))).Render();
}
Property:`SnapSettings.VerticalGridLines`

[View]
@Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
[Model]
double[] intervals = { 0.95, 9.05, 0.2, 9.75 };
DiagramSnapSettings snapSettings = new DiagramSnapSettings();
snapSettings.VerticalGridLines = new DiagramGridlines() {
    LineIntervals = intervals
};
ViewBag.SnapSettings = snapSettings;

Defines the angle by which the object needs to be snapped Property:`SnapSettings.SnapAngle`

@{
    Html.EJ().Diagram("diagram").SnapSettings(s=>s.SnapAngle(5)).Render();
}
Property:`SnapSettings.SnapAngle`

[View]
@Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
[Model]
DiagramSnapSettings snapSettings = new DiagramSnapSettings();
snapSettings.SnapAngle = 5;
ViewBag.SnapSettings = snapSettings;

Sets the minimum distance between the selected object and the nearest object Property:`SnapSettings.SnapObjectDistance`

@{
    Html.EJ().Diagram("diagram").SnapSettings(s=>s.SnapObjectDistance(5)).Render();
}
Property:`SnapSettings.SnapObjectDistance`

[View]
@Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
[Model]
DiagramSnapSettings snapSettings = new DiagramSnapSettings();
snapSettings.SnapObjectDistance = 5;
ViewBag.SnapSettings = snapSettings;

Defines and sets the snapConstraints Property:`SnapSettings.SnapConstraints`

@{
    Html.EJ().Diagram("diagram").SnapSettings(s=>s.SnapConstraints(SnapConstraints.ShowLines)).Render();
}
Property:`SnapSettings.Constraints`

[View]
@Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
[Model]
DiagramSnapSettings snapSettings = new DiagramSnapSettings();
snapSettings.Constraints = SnapConstraints.ShowLines;
ViewBag.SnapSettings = snapSettings;

ZoomFactor

Behaviour API in Essential JS 1 API in Essential JS 2
Sets the factor by which we can zoom in or zoom out Property:`ZoomFactor`

@{
    Html.EJ().Diagram("diagram").ZoomFactor(1).Render();
}
Property:`ZoomFactor`

var zoomin = { type: 'ZoomIn', zoomFactor: 0.5 };
diagram.ZoomTo(zoomin);

Tool

Behaviour API in Essential JS 1 API in Essential JS 2
Enables/Disables the interactive behaviors of diagram Property:`Tool`

@{
    Html.EJ().Diagram("diagram").Tool(Tool.ZoomPan).Render();
}
Property:`Tool`

@Html.EJS().Diagram("container").Tool(DiagramTools.ZoomPan).Render()

ShowTooltip

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables tooltip of diagram Property:`ShowTooltip`

@{
    Html.EJ().Diagram("diagram").Height("500px").Width("500px").ShowTooltip(true).Render();
}
Property:`Constraints`

@Html.EJS().Diagram("container").Constraints(DiagramConstraints.Default | DiagramConstraints.Tooltip).Render()

SelectedItems

Behaviour API in Essential JS 1 API in Essential JS 2
A read only collection of the selected items Property:`SelectedItems.Children`
var diagram = $("#diagramcontent").EjDiagram("instance");
for(var i =0; i< diagram.Model.SelectedItems.Children; i++){
    //Do your actions here
}
Not applicable
Controls the visibility of selector Property:`SelectedItems.Constraints`

@{
    Html.EJ().Diagram("diagram").SelectedItems(new SelectedItems() { Constraints = SelectorConstraints.UserHandles } } }).Render();
}
Property:`SelectedItems.Constraints`

@Html.EJS().Diagram("container").SelectedItems(new DiagramSelector() { Constraints = SelectorConstraints.UserHandle}).Render()

Sets the angle to rotate the selected items Property:`SelectedItems.Tooltip`

@{
    Html.EJ().Diagram("diagram").SelectedItems(new SelectedItems() { Tooltip = new Tooltip() { Alignment = { Vertical = VerticalAlignment.Top } } }).Render();
}
Not applicable
A collection of frequently used commands that will be added around the selector Property:`SelectedItems.UserHandles`

var userHandle= [];
var cloneHandle = ej.Datavisualization.Diagram.UserHandle();
userHandle.Push(cloneHandle);
        var diagram = $("#DiagramContent").EjDiagram("instance");
$("#diagramcontent").EjDiagram({
    selectedItems: {
        userHandles:userHandle
        }
    });
Property:`SelectedItems.UserHandles`

[View]
@Html.EJS().Diagram("container").SelectedItems(ViewBag.Selector).Render()
[Model]
List<DiagramUserHandle> Userhandle = new List<DiagramUserHandle>();
Userhandle.Add(new DiagramUserHandle()
{
    Name = "clone",
    PathData = 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z',
});

DiagramSelector selector = new DiagramSelector();
selector.UserHandles = Userhandle;
ViewBag.Selector = selector;

Sets the horizontal alignment of the user handle Property:`SelectedItems.UserHandles.HorizontalAlignment`

var userHandle = [];
var cloneHandle = ej.Datavisualization.Diagram.UserHandle();
cloneHandle = {name : "cloneHandle",
pathData : "M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z",
visible : "true",
backgroundColor : "#4D4D4D",
offset : ej.Datavisualization.Diagram.Point(0, 0),
position :" middleleft"
margin : { left: 5 },
pathColor : "white",
horizontalAlignment : ej.Datavisualization.Diagram.HorizontalAlignment.Right,
verticalAlignment : ej.Datavisualization.Diagram.VerticalAlignment.Top,
borderColor : "red",
borderWidth : 3,
size : 20};
userHandle.Push(cloneHandle);
$("#diagramcontent").EjDiagram({
selectedItems: {
userHandles:userHandle
}
});
Property:`SelectedItems.UserHandles.HorizontalAlignment`

[View]
@Html.EJS().Diagram("container").SelectedItems(ViewBag.Selector).Render()
[Model]
List<DiagramUserHandle> Userhandle = new List<DiagramUserHandle>();
Userhandle.Add(new DiagramUserHandle()
{
    HorizontalAlignment = HorizontalAlignment.Auto
});

DiagramSelector selector = new DiagramSelector();
selector.UserHandles = Userhandle;
ViewBag.Selector = selector;

Defines the interactive behaviors of the user handle Property:`SelectedItems.UserHandles.Tool`

var CloneTool = (function(base) {
    ej.Datavisualization.Diagram.Extend(CloneTool, base);
    function CloneTool(name) {
        base.Call(this, name);
        this.SingleAction = true;
        this.ClonedNodes = [];
        this.Cursor = "pointer";
    }
    CloneTool.Prototype.Mouseup = function(evt) {
        this.Diagram.Copy();
        this.Diagram.Paste();
    }
}
return CloneTool;
});
(ej.Datavisualization.Diagram.ToolBase);
var userHandle = [];
var cloneHandle = ej.Datavisualization.Diagram.UserHandle();
cloneHandle.Name = "cloneHandle";
cloneHandle.PathData = "M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z";
cloneHandle.Tool = new CloneTool(cloneHandle.Name);;
userHandle.Push(cloneHandle);
$("#diagramcontent").EjDiagram({
selectedItems: {
userHandles: userHandle
}
});
Not applicable
Defines whether the user handle should be added, when more than one element is selected Property:`SelectedItems.UserHandles.EnableMultiSelection`

var userHandle = [];
var cloneHandle = ej.Datavisualization.Diagram.UserHandle();
cloneHandle.Name = "cloneHandle";
cloneHandle.EnableMultiSelection = true;
userHandle.Push(cloneHandle);
$("#diagramcontent").EjDiagram({
selectedItems: {
userHandles: userHandle
}
});
Not applicable
Sets the horizontal alignment of the user handle Not applicable Property:`SelectedItems.UserHandles.Displacement`

[View]
@Html.EJS().Diagram("container").SelectedItems(ViewBag.Selector).Render()
[Model]
List<DiagramUserHandle> Userhandle = new List<DiagramUserHandle>();
Userhandle.Add(new DiagramUserHandle()
{
    Displacement = 30
});
DiagramSelector selector = new DiagramSelector();
selector.UserHandles = Userhandle;
ViewBag.Selector = selector;

SerializationSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines whether the default diagram properties can be serialized or not Property:`SerializationSettings.PreventDefaultValues`

[View]
@Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
[Model]
DiagramProperties Model = new DiagramProperties();
Model.SerializationSettings = new SerializationSettings() {
    PreventDefaultValues = true
};
ViewData["diagramModel"] = Model;
Not applicable

Tooltip

Behaviour API in Essential JS 1 API in Essential JS 2
An object that defines the description, appearance and alignments of tooltip Property:`Tooltip`

<script type="text/x-jsrender" id="mouseovertooltip">
<div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
        <span style="padding: 5px;">  </span>
</div>
</script>
@{
    Html.EJ().Diagram("diagram").Tooltip(new Diagram.Tooltip() { TemplateId= "mouseovertooltip" }).Render();
}
Property:`Tooltip`

@Html.EJS().Diagram("container").Constraints(DiagramConstraints.Default | DiagramConstraints.Tooltip).Tooltip(new DiagramDiagramTooltip() { Content = "Diagram"}).Render()

Defines the alignment of tooltip Property:`Tooltip.Alignment`

@{
    Html.EJ().Diagram("diagram").Tooltip(new Diagram.Tooltip() { Alignment= new Diagram.Alignment() { Horizontal=HorizontalAlignment.Left}  }).Render();
}
Not applicable
Sets the margin of the tooltip Property:`Tooltip.Margin`

@{
    Html.EJ().Diagram("diagram").Tooltip(new Diagram.Tooltip() {  Margin= new Margin() { Left=5, Bottom=5, Right=5, Top=5}  }).Render();
}
Not applicable
Sets the svg/html template to be bound with tooltip Property:`Tooltip.TemplateId`

<script type="text/x-jsrender" id="mouseovertooltip">
<div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
        <span style="padding: 5px;">  </span>
</div>
</script>
@{
    Html.EJ().Diagram("diagram").Tooltip(new Diagram.Tooltip() { TemplateId= "mouseovertooltip"  }).Render();
}
Property:`Tooltip.Content`

@Html.EJS().Diagram("container").Tooltip(new DiagramDiagramTooltip() { Content = "Diagram"}).Render()

Defines if the Tooltip has tip pointer or not Not applicable Property:`Tooltip.ShowTipPointer`

@Html.EJS().Diagram("container").Tooltip(new DiagramDiagramTooltip() { ShowTipPointer = true }).Render()

Defines the position of the Tooltip Not applicable Property:`Tooltip.Position`

@Html.EJS().Diagram("container").Tooltip(new DiagramDiagramTooltip() { Position = "TopLeft" }).Render()