Search results

API Migration in ASP.NET MVC Diagram control

08 Apr 2021 / 99 minutes to read

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

Background

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

@{ Html.EJ().Diagram(“diagram”).BackgroundColor(“yellow”).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

behavior 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

behavior 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 commands = new List(); 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 commands = new List(); commands.Add(new DiagramCommand() { Parameter = “node” }); DiagramCommandManager commandManager = new DiagramCommandManager() { Commands = commands }; ViewBag.commandManager = commandManager;

Connectors

behavior 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 annotation = new List(); annotation.Add(new DiagramConnectorAnnotation() { Content = “connector” }); List connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 segments = new List(); segments.Add(new Segment() { Type = Segments.Orthogonal }); List connectors = new List(); 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 segments = new List(); segments.Add(new Segment() { Direction = “Bottom” }); List connectors = new List(); 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 segments = new List(); segments.Add(new Segment() { Length=30 }); List connectors = new List(); 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();
Segment.Add(new Segment() { Type = Segments.Straight });
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 segments = new List(); segments.Add(new Segment() { Type = Segments.Bezier }); List connectors = new List(); 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();
Segment.Add(new Segment() { Vector1 = new Vector(75, 0) });
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();
Segment.Add(new Segment() { Vector2 = new Vector(75, 180) });
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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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 connectors = new List(); 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

behavior 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 menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); 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 SubItems = new List(); SubItems.Add(new ContextMenuItem() { Name = “HyperLink” }); List menuItems = new List(); 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 SubItems = new List(); SubItems.Add(new ContextMenuItem() { Id = “id” }); List menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); 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 menuItems = new List(); menuItems.Add(new ContextMenuItem() { Id = “id” }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Show = true }; ViewBag.contextMenuSettings = contextMenuSettings;

DataSourceSettings

behavior 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() { “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() { “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() { “Description”, “Color”, } } ViewData[“diagramModel”] = Model;

Not applicable

DefaultSettings

behavior 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

behavior 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

behavior 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

behavior 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

behavior 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

behavior 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

behavior 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

behavior 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

behavior 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

behavior 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`

Not applicable
A method that ends grouping the changes Property:`HistoryManager.CloseGroupAction`

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

Not applicable
A method that allows to track the custom changes made in diagram Property:`HistoryManager.Push`

Property:`HistoryList.Push`

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.employeeData; node.employeeData = args.PrevState; args.PrevState = currentState; }

Property:`HistoryList.Redo`

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`

Property:`HistoryList.RedoStack`

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

Not applicable
A method that starts to group the changes to revert/restore them in a single undo or redo Property:`HistoryManager.StartGroupAction`

Property:`HistoryList.StartGroupAction`

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(); }

Property:`HistoryList.Undo`

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`

Property:`HistoryList.UndoStack`

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

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

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

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

var diagram = $(“#diagramcontent”).EjDiagram(“instance”); diagram.Model.HistoryManager.CanLog();

Property:`HistoryList.CanLog`

Layout

behavior 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`

@{ Html.EJ().Diagram(“diagram”).Layout(l=>l.GetLayoutInfo(“getLayoutInfo”)).Render(); }

Property:`Layout.GetLayoutInfo`

@Html.EJS().Diagram(“container”).Layout(l => l.GetLayoutInfo(“getLayoutInfo”)).Render();

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.MaxIteration`

[View]

@Html.EJ().Diagram(“Diagram1”, ViewData[“diagramModel ”] as DiagramProperties).Render()

[Model]

DiagramProperties Model = new DiagramProperties(); Model.Layout.MaxIteration = 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

behavior 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 Node = new List(); Node.Add(new DiagramNodeAnnotation() { Content = “Place Order” } }); List nodes = new List(); 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 Node = new List(); Node.Add(new DiagramBpmnAnnotation() { Angle = -45 }); List nodes = new List(); 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 Node = new List(); Node.Add(new DiagramBpmnAnnotation() { Height = 50 }); List nodes = new List(); 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 Node = new List(); Node.Add(new DiagramBpmnAnnotation() { Length = 150 }); List nodes = new List(); 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 Node = new List(); Node.Add(new DiagramBpmnAnnotation() { Text= “Text” }); List nodes = new List(); 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 Node = new List(); Node.Add(new DiagramBpmnAnnotation() { Width = 100 }); List nodes = new List(); 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 Node = new List(); Node.Add(new DiagramBpmnAnnotation() { Id = “id” }); List nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); nodes.Add(new DiagramNode() { CollapseIcon = { Shape = IconShapes.Template, Content = ’’ + ’’ } }); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 stops = new List(); stops.Add(new DiagramStop() { Color = “white”, Offset = 0 }); stops.Add(new DiagramStop() { Color = “red”, Offset = 50 }); List nodes = new List(); 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 stops = new List(); stops.Add(new DiagramStop() { Color = “white” }); List nodes = new List(); 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 stops = new List(); stops.Add(new DiagramStop() { Offset = 0 }); List nodes = new List(); 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 stops = new List(); stops.Add(new DiagramStop() { Opacity = 0.5 }); List nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Content = “Annotation” }); List nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 = “green” }); 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 nodes = new List(); 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 points = new List(); 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 nodes = new List(); 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 ports = new List(); ports.Add(new DiagramPort() { Id = “port” }); List nodes = new List(); 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 ports = new List(); ports.Add(new DiagramPort() { }); List nodes = new List(); 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 ports = new List(); ports.Add(new DiagramPort() { Constraints = PortConstraints.Drag }); List nodes = new List(); 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 ports = new List(); ports.Add(new DiagramPort() { Shape = PortShapes.Circle }); List nodes = new List(); 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 ports = new List(); ports.Add(new DiagramPort() { VerticalAlignment = VerticalAlignment.Top }); List nodes = new List(); 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 nodes = new List(); 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 nodes = new List(); 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 events = new List(); events.Add(new DiagramBpmnSubEvent() { Event = BpmnEvents.Intermediate }); List nodes = new List(); 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 ports = new List(); ports.Add(new DiagramPort() { Id = “port”}; List events = new List(); events.Add(new DiagramBpmnSubEvent() { Event = BpmnEvents.Intermediate, Ports = ports }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Content = “Annotation” }); List events = new List(); events.Add(new DiagramBpmnSubEvent() { Event = BpmnEvents.Intermediate, Annotation = annotation }); List nodes = new List(); 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 nodes = new List(); nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = “Bpmn”, Shape = “Activity”, Activity = BpmnActivities.Task, Task = { Type = BpmnTasks.Service } } } } }); ViewBag.Nodes = nodes;

NodeTemplate

behavior 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(); }

Property:`SetNodeTemplate`

@Html.EJS().Diagram(“container”).SetNodeTemplate(“setNodeTemplate”).Render()

Layers

behavior 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 layers = new List(); 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

behavior 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Content = “Annotation” }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Offset=new DiagramPoint() { X = 0, Y = 1 } }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() {Content = “HRPortal”, Hyperlink = ”https://www.Syncfusion.Com” }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { Bold = true } }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { StrokeColor = “red” } }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { StrokeWidth=2 } }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Constraints = AnnotationConstraints.InheritReadOnly }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { Fill = “white” } }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { Color = “black” } }); List nodes = new List(); 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= “segoe 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { FontFamily = “segoe UI” } }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Height = 10 }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { HorizontalAlignment = HorizontalAlignment.Center }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Margin = new DiagramMargin() { Bottom = 15 } }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Constraints = AnnotationConstraints.ReadOnly }); List nodes = new List(); 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`

@{ 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { TextAlign = TextAlign.Left } }); List nodes = new List(); 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 annotation = new List(); annotation.Add(new DiagramNodeAnnotation() { Visibility = false }); List nodes = new List(); 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

behavior 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(“grey”)).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.ScrollableArea`

@{ 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()

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

behavior 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()

SnapSettings

behavior 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

behavior 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

behavior 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

behavior 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

behavior 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 userHandle = new List(); 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 userHandle = new List(); 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(event) { 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 userHandle = new List(); userHandle.Add(new DiagramUserHandle() { Displacement = 30 }); DiagramSelector selector = new DiagramSelector(); selector.UserHandles = userHandle; ViewBag.Selector = selector;

SerializationSettings

behavior 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

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

@{ 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`

@{ 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()