Migration from Essential JS 1

23 Jun 202324 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 how to align the background image over the diagram area	Property:`BackgroundImage.Alignment` HTML `<ej-diagram> <e-background-image alignment="XMidYMid"></e-background-image> </ej-diagram>`	Property:`Background.Align` HTML `<ejs-diagram> <e-diagram-pagesettings> <e-pagesettings-background align="XMidYMid"></e-pagesettings-background> </e-diagram-pagesettings> </ejs-diagram>`
Defines how the background image should be scaled/stretched	Property:`BackgroundImage.Scale` HTML `<ej-diagram> <e-background-image scale="Meet"></e-background-image> </ej-diagram>`	Property:`Background.Align` HTML `<ejs-diagram> <e-diagram-pagesettings> <e-pagesettings-background scale="Meet"></e-pagesettings-background> </e-diagram-pagesettings> </ejs-diagram>`
Sets the source path of the background image	Property:`BackgroundImage.Source` HTML `<ej-diagram> <e-background-image source="../images/Employee/Artboard 13.Png"></e-background-image> </ej-diagram>`	Property:`Background.Source` HTML `<ejs-diagram> <e-diagram-pagesettings> <e-pagesettings-background source="../images/Employee/Artboard 13.Png"></e-pagesettings-background> </e-diagram-pagesettings> </ejs-diagram>`

Bridging

behavior	API in Essential JS 1	API in Essential JS 2
Sets the direction of line bridges	Property:`BridgeDirection` HTML `<ej-diagram bridge-direction="Bottom"></ej-diagram>`	Property:`BridgeDirection` HTML `<ejs-diagram bridgeDirection="Bottom"></ejs-diagram>`

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`

HTML

<ej-diagram>
        <e-command-manager>
            <e-commands>
                <e-command can-execute="canExecute" execute="execute">
                    <e-gesture key="C" key-modifiers="Shift"></e-gesture>
                </e-command>
            </e-commands>
        </e-command-manager>
    </ej-diagram>

HTML

<script>
        function canExecute(args) {
            var diagram = $("#diagram").ejDiagram("instance");
            return diagram.model.selectedItems.children.length;
        }
        function execute(args) {
            var diagram = $("#diagram").ejDiagram("instance");
            diagram.copy();
            diagram.paste();
        }
    </script>

Property:`CommandManager.Commands`

[View]

HTML

<ejs-diagram commandManager="@ViewBag.commands"></ejs-diagram>

HTML

<script>

        function canExecute() {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
                return true;
            }
            return false;
        }

        function execute() {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.copy();
            diagram.paste();
        }

    </script>

[Model]

HTML

List<DiagramCommand> commands = new List<DiagramCommand>();
    commands.Add(new DiagramCommand() { CanExecute = "canExecute", Execute = "execute", Gesture = new DiagramKeyGesture() { Key = Keys.C, KeyModifiers = KeyModifiers.Shift }, Name = "clone", Parameter = "node" });
    ViewBag.commands = commands;

Defines any additional parameters that are required at runtime

Property:`CommandManager.Commands.Parameter`

HTML

<ej-diagram>
        <e-command-manager>
            <e-commands>
                <e-command can-execute="canExecute" execute="execute" parameter="node">
                    <e-gesture key="C" key-modifiers="Shift"></e-gesture>
                </e-command>
            </e-commands>
        </e-command-manager>
    </ej-diagram>

HTML

<script>
        function canExecute(args) {
            var diagram = $("#diagram").ejDiagram("instance");
            return diagram.model.selectedItems.children.length;
        }
        function execute(args) {
            var diagram = $("#DiagramContent").ejDiagram("instance");
            diagram.copy();
            diagram.paste();
        }
    </script>

Property:`CommandManager.Commands.Parameter`

[View]

HTML

<ejs-diagram commandManager="@ViewBag.commands"></ejs-diagram>

HTML

<script>

        function canExecute() {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
                return true;
            }
            return false;
        }

        function execute() {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.copy();
            diagram.paste();
        }

    </script>

[Model]

HTML

List<DiagramCommand> commands = new List<DiagramCommand>();
    commands.Add(new DiagramCommand() { CanExecute = "canExecute", Execute = "execute", Gesture = new DiagramKeyGesture() { Key = Keys.C, KeyModifiers = KeyModifiers.Shift }, Name = "clone", Parameter = "node" });
    ViewBag.commands = commands;

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` [View] HTML `<ej-diagram> <e-connectors> <e-connector add-info="@ViewBag.addInfo"></e-connector> </e-connectors> </ej-diagram>` [Model] HTML `Dictionary<string, object> addInfo = new Dictionary<string, object>(); addInfo.Add("Description", "Bidirectional Flow"); ViewBag.addInfo = addInfo;`	Property:`Connectors.AddInfo` [View] HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector addInfo="@ViewBag.addInfo"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>` [Model] HTML `Dictionary<string, object> addInfo = new Dictionary<string, object>(); addInfo.Add("Description", "Bidirectional Flow"); ViewBag.addInfo = addInfo;`
Defines the bridgeSpace of connector	Property:`Connector.BridgeSpace` HTML `<ej-diagram> <e-connectors> <e-connector bridge-space="15"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.BridgeSpace` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector bridgeSpace="5"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Enables or disables the behaviors of connectors	Property:`Connector.Constraints` HTML `<ej-diagram> <e-connectors> <e-connector constraints="Bridging"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connector.Constraints` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector constraints="Bridging"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the radius of the rounded corner	Property:`Connector.CornerRadius` HTML `<ej-diagram> <e-connectors> <e-connector corner-radius="5"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connector.CornerRadius` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector cornerRadius="5"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Customize connectors appearance using user-defined CSS	Property:`Connector.CssClass` HTML `//CSS style .HoverConnector:hover { stroke:blue }` HTML `<ej-diagram> <e-connectors> <e-connector css-class="hoverConnector"></e-connector> </e-connectors> </ej-diagram>`	Not applicable
Sets the horizontal alignment of the connector	Property:`Connector.HorizontalAlign` HTML `<ej-diagram> <e-connectors> <e-connector horizontal-align="Left"></e-connector> </e-connectors> </ej-diagram>`	Not applicable
A collection of JSON objects where each object represents a label	Property:`Connector.Labels` HTML `<ej-diagram> <e-connectors> <e-connector> <e-labels> <e-diagram-label text="label"></e-diagram-label> </e-labels> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connector.Annotations` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-connectorannotations> <e-connector-connectorannotation content="annotation"></e-connector-connectorannotation> </e-connector-connectorannotations> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Stroke color of the connector	Property:`Connector.LineColor` HTML `<ej-diagram> <e-connectors> <e-connector line-color="bllue"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connector.Style.StrokeColor` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-style strokeColor="blue" opacity="5" strokeDashArray="2,2" strokeWidth="2"></e-connector-style> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the pattern of dashes and gaps used to stroke the path of the connector	Property:`Connector.LineDashArray` HTML `<ej-diagram> <e-connectors> <e-connector line-dash-array="2,2"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connector.Style.StrokeDashArray` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-style strokeDashArray="2,2"></e-connector-style> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the width of the line	Property:`Connector.LineWidth` HTML `<ej-diagram> <e-connectors> <e-connector line-width="2"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connector.Style.StrokeWidth` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-style strokeWidth="2"></e-connector-style> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the padding value to ease the interaction with connectors	Property:`Connector.LineHitPadding` HTML `<ej-diagram> <e-connectors> <e-connector line-hit-padding="15"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.HitPadding` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector hitPadding="15"> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets a unique name for the connector	Property:`Connector.Name` HTML `<ej-diagram> <e-connectors> <e-connector name="connector"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Id` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector id="connector"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the transparency of the connector	Property:`Connector.Opacity` HTML `<ej-diagram> <e-connectors> <e-connector opacity="0.5"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Style.Opacity` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-style opacity="5"></e-connector-style> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the parent name of the connector.	Property:`Connector.Parent` HTML `<ej-diagram> <e-connectors> <e-connector parent="parent"></e-connector> </e-connectors> </ej-diagram>`	Not applicable
An array of JSON objects where each object represents a segment	Property:`Connector.Segments` HTML `<ej-diagram> <e-connectors> <e-connector> <e-segments> <e-segment type="Orthogonal"></e-segment> </e-segments> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connector.Segments` [View] HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector segments="@ViewBag.segments"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>` [Model] HTML `List<Segment> segments = new List<Segment>(); segments.Add(new Segment() { Type = Segments.Orthogonal }); ViewBag.segments = segments;`
Sets the direction of orthogonal segment	Property:`Connector.Segments.Direction` HTML `<ej-diagram> <e-connectors> <e-connector> <e-segments> <e-segment direction="bottom"></e-segment> </e-segments> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Segments.Direction` [View] HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector segments="@ViewBag.segments"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>` [Model] HTML `List<Segment> segments = new List<Segment>(); segments.Add(new Segment() { Direction = "Bottom" }); ViewBag.segments = segments;`
Describes the length of orthogonal segment	Property:`Connector.Segments.Length` HTML `<ej-diagram> <e-connectors> <e-connector> <e-segments> <e-segment length="50"></e-segment> </e-segments> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Segments.Length` [View] HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector segments="@ViewBag.segments"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>` [Model] HTML `List<Segment> segments = new List<Segment>(); segments.Add(new Segment() { Length = 30 }); ViewBag.segments = segments;`
Describes the end point of bezier/straight segment	Property:`Connector.Segments.Point` HTML `<ej-diagram> <e-connectors> <e-connector> <e-segments> <e-segment> <e-point x="75" y="150"></e-point> </e-segment> </e-segments> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Segments.Point`
Defines the first control point of the bezier segment	Property:`Connector.Segments.Point1` HTML `<ej-diagram> <e-connectors> <e-connector> <e-segments> <e-segment type="Orthogonal"> <e-point1 x="75" y="150"></e-point1> </e-segment> </e-segments> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Segments.Point1`
Defines the second control point of bezier segment	Property:`Connector.Segments.Point2` HTML `<ej-diagram> <e-connectors> <e-connector> <e-segments> <e-segment type="Orthogonal"> <e-point2 x="75" y="150"></e-point2> </e-segment> </e-segments> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Segments.Point2`
Sets the type of the segment	Property:`Connectors.Segments.Type` HTML `<ej-diagram> <e-connectors> <e-connector> <e-segments> <e-segment type="Orthogonal"></e-segment> </e-segments> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Segments.Type` [View] HTML `@Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()` [Model] HTML `List<Segment> segments = new List<Segment>(); segments.Add(new Segment() { Type = Segments.Bezier }); List<DiagramConnector> connectors = new List<DiagramConnector>(); connectors.Add(new DiagramConnector() { Segments = segments }); ViewBag.Connectors = connectors;`
Describes the length and angle between the first control point and the start point of bezier segment	Property:`Connector.Segments.Vector1` HTML `<ej-diagram> <e-connectors> <e-connector> <e-segments> <e-segment> <e-vector1 angle="60" distance="0"></e-vector1> </e-segment> </e-segments> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Segments.Vector1`
Describes the length and angle between the second control point and end point of bezier segment	Property:`Connector.Segments.Vector2` HTML `<ej-diagram> <e-connectors> <e-connector> <e-segments> <e-segment> <e-vector2 angle="60" distance="0"></e-vector2> </e-segment> </e-segments> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Segments.Vector2`
Sets the type of the connector	Property:`Connector.Shape.Type` HTML `<ej-diagram> <e-connectors> <e-connector> <e-shape type="BPMN"></e-shape> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Shape.Type` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-shape type="Bpmn"></e-connector-shape> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the source decorator of the connector	Property:`Connector.SourceDecorator` HTML `<ej-diagram> <e-connectors> <e-connector> <e-source-decorator shape="Arrow"></e-source-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourceDecorator` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-sourcedecorator shape="Arrow"></e-connector-sourcedecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the border color of the source decorator	Property:`Connector.SourceDecorator.BorderColor` HTML `<ej-diagram> <e-connectors> <e-connector> <e-source-decorator border-color="red"></e-source-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourceDecorator.Style.StrokeColor` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-sourcedecorator> <e-decorator-style strokeColor="red"></e-decorator-style> </e-connector-sourcedecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the border width of the decorator	Property:`Connector.SourceDecorator.BorderWidth` HTML `<ej-diagram> <e-connectors> <e-connector> <e-source-decorator border-width="2"></e-source-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourceDecorator.Style.StrokeWidth` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-sourcedecorator> <e-decorator-style strokeWidth="2"></e-decorator-style> </e-connector-sourcedecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines to customize sourceDecorator appearance using user-defined CSS	Property:`Connector.SourceDecorator.CssClass` HTML `<ej-diagram> <e-connectors> <e-connector> <e-source-decorator css-class="classname"></e-source-decorator> </e-connector> </e-connectors> </ej-diagram>`	Not applicable
Sets the fill color of the source decorator	Property:`Connector.SourceDecorator.FillColor` HTML `<ej-diagram> <e-connectors> <e-connector> <e-source-decorator fill-color="red"></e-source-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourceDecorator.Style.Fill` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-sourcedecorator> <e-decorator-style fill="red"></e-decorator-style> </e-connector-sourcedecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the height of the source decorator	Property:`Connector.SourceDecorator.Height` HTML `<ej-diagram> <e-connectors> <e-connector> <e-source-decorator height="10"></e-source-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourceDecorator.Height` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-sourcedecorator height="10"></e-connector-sourcedecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the custom shape of the source decorator	Property:`Connector.SourceDecorator.PathData` HTML `<ej-diagram> <e-connectors> <e-connector> <e-source-decorator shape="Path" path-data="M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z"></e-source-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourceDecorator.PathData` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-sourcedecorator shape="Path" pathData="M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z"></e-connector-sourcedecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the shape of the source decorator.	Property:`Connector.SourceDecorator.Shape` HTML `<ej-diagram> <e-connectors> <e-connector> <e-source-decorator shape="Arrow"></e-source-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourceDecorator.Shape` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-sourcedecorator shape="Arrow"></e-decorator-style> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the width of the source decorator	Property:`Connector.SourceDecorator.Width` HTML `<ej-diagram> <e-connectors> <e-connector> <e-source-decorator width="10"></e-source-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourceDecorator.Width` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-sourcedecorator width="10"></e-connector-sourcedecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the source node of the connector	Property:`Connector.SourceNode` HTML `<ej-diagram> <e-connectors> <e-connector source-node="source"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourceID` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector sourceID="source"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the space to be left between the source node and the source point of a connector	Property:`Connector.SourcePadding` HTML `<ej-diagram> <e-connectors> <e-connector source-padding="2"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.HitPadding` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector hitPadding="20"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Describes the start point of the connector	Property:`Connector.SourcePoint` HTML `<ej-diagram> <e-connectors> <e-connector > <e-source-point x="100" y="100"></e-source-point> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourcePoint` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-sourcepoint x="100" y="100"></e-connector-sourcepoint> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the source port of the connector	Property:`Connector.SourcePort` HTML `<ej-diagram> <e-connectors> <e-connector source-port="sourceport"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.SourcePortID` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector sourcePortID="sourceport"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the target decorator of the connector	Property:`Connector.TargetDecorator` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-decorator shape="Arrow"></e-target-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetDecorator` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-targetdecorator shape="Arrow"></e-connector-targetdecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the border color of the target decorator	Property:`Connector.TargetDecorator.BorderColor` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-decorator border-color="red"></e-target-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetDecorator.Style.StrokeColor` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-targetdecorator> <e-decorator-style strokeColor="red"></e-decorator-style> </e-connector-targetdecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the border width of the decorator	Property:`Connector.TargetDecorator.BorderWidth` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-decorator border-width="2"></e-target-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetDecorator.Style.StrokeWidth` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-targetdecorator> <e-decorator-style strokeWidth="2"></e-decorator-style> </e-connector-targetdecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines to customize target Decorator appearance using user-defined CSS	Property:`Connector.TargetDecorator.CssClass` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-decorator css-class="classname"></e-target-decorator> </e-connector> </e-connectors> </ej-diagram>`	Not applicable
Sets the fill color of the target decorator	Property:`Connector.TargetDecorator.FillColor` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-decorator fill-color="red"></e-target-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetDecorator.Style.Fill` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-targetdecorator> <e-decorator-style fill="red"></e-decorator-style> </e-connector-targetdecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the height of the target decorator	Property:`Connector.TargetDecorator.Height` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-decorator height="10"></e-target-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetDecorator.Height` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-targetdecorator height="10"></e-connector-targetdecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the custom shape of the target decorator	Property:`Connector.TargetDecorator.PathData` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-decorator shape="Path" path-data="M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z"></e-target-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetDecorator.PathData` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-targetdecorator shape="Path" pathData="M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z"></e-connector-targetdecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the shape of the target decorator.	Property:`Connector.TargetDecorator.Shape` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-decorator shape="Arrow"></e-target-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetDecorator.Shape` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-targetdecorator shape="Arrow"></e-connector-targetdecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the width of the target decorator	Property:`Connector.TargetDecorator.Width` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-decorator width="10"></e-target-decorator> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetDecorator.Width` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-targetdecorator width="10"></e-connector-targetdecorator> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the target node of the connector	Property:`Connector.TargetNode` HTML `<ej-diagram> <e-connectors> <e-connector target-node="target"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetID` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector targetID="target"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the space to be left between the target node and the target point of a connector	Property:`Connector.TargetPadding` HTML `<ej-diagram> <e-connectors> <e-connector target-padding="2"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.HitPadding` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector hitPadding="20"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Describes the start point of the connector	Property:`Connector.TargetPoint` HTML `<ej-diagram> <e-connectors> <e-connector> <e-target-point x="200" y="200"></e-target-point> </e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetPoint` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-targetpoint x="200" y="200"></e-connector-targetpoint> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the target port of the connector	Property:`Connector.TargetPort` HTML `<ej-diagram> <e-connectors> <e-connector target-port="targetport"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.TargetPortID` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector targetPortID="targetport"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Defines the tooltip that should be shown when the mouse hovers over connector	Property:`Connector.Tooltip` [View] HTML `<script type="text/x-jsrender" id="mouseovertooltip"><br> <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px"><br> <span style="padding: 5px;"> </span><br> </div><br> </script> <br> <ej-diagram> <e-connectors> <e-connector tooltip="@ViewBag.toolTip"></e-connector> </e-connectors> </ej-diagram>` [Model] HTML `Tooltip tooltip = new Tooltip() { TemplateId = "mouseOverTooltip"}; ViewBag.tooltip = tooltip;`	Property:`Connectors.Tooltip` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector> <e-connector-tooltip content="connector"></e-connector-tooltip> </e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the vertical alignment of connector	Property:`Connector.VerticalAlign` HTML `<ej-diagram> <e-connectors> <e-connector vertical-align="Center"></e-connector> </e-connectors> </ej-diagram>`	Not applicable
Enables or disables the visibility of connector	Property:`Connector.Visible` HTML `<ej-diagram> <e-connectors> <e-connector visible="true"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.Visible` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector visible="true"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`
Sets the z-index of the connector	Property:`Connector.ZOrder` HTML `<ej-diagram> <e-connectors> <e-connector z-order="3"></e-connector> </e-connectors> </ej-diagram>`	Property:`Connectors.ZIndex` HTML `<ejs-diagram> <e-diagram-connectors> <e-diagram-connector zIndex="3"></e-diagram-connector> </e-diagram-connectors> </ejs-diagram>`

ContextMenu

</table> ## DataSourceSettings

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 context-menu="@ViewBag.contextMenu"></ej-diagram>` [Model] HTML `List<ContextMenuItem> items = new List<ContextMenuItem>(); items.Add(new ContextMenuItem() { Name = "HyperLink" }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;`	Property:`ContextMenuSettings.Items` [View] HTML `<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>` [Model] HTML `List<ContextMenuItem> menuItems = new List<ContextMenuItem>(); menuItems.Add(new ContextMenuItem() { Text = "delete" }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = "menuItems" }; ViewBag.contextMenuSettings = contextMenuSettings;`
Defines the text for the collection of context menu item	Property:`ContextMenu.Items.Text` [View] HTML `<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>` [Model] HTML `List<ContextMenuItem> items = new List<ContextMenuItem>(); items.Add(new ContextMenuItem() { Text = "text" }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;`	Property:`ContextMenuSettings.Items.Text` [View] HTML `<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>` [Model] HTML `List<ContextMenuItem> menuItems = new List<ContextMenuItem>(); menuItems.Add(new ContextMenuItem() { Text = "text" }); 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 context-menu="@ViewBag.contextMenu"></ej-diagram>` [Model] HTML `List<ContextMenuItem> items = new List<ContextMenuItem>(); items.Add(new ContextMenuItem() { Name = "HyperLink" }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;`	Property:`ContextMenuSettings.Items.Id` [View] HTML `<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>` [Model] HTML `List<ContextMenuItem> menuItems = new List<ContextMenuItem>(); menuItems.Add(new ContextMenuItem() { Id = "id" }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = "menuItems" }; ViewBag.contextMenuSettings = contextMenuSettings;`
Defines the image url for the collection of context menu items	Property:`ContextMenu.Items.ImageUrl` [View] HTML `<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>` [Model] HTML `List<ContextMenuItem> items = new List<ContextMenuItem>(); items.Add(new ContextMenuItem() { ImageUrl = "Images/zoomIn.Png" }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;`	Property:`ContextMenuSettings.Items.Url` [View] HTML `<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>` [Model] HTML `List<ContextMenuItem> menuItems = new List<ContextMenuItem>(); menuItems.Add(new ContextMenuItem() { Url = "Images/zoomIn.Png" }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = "menuItems" }; ViewBag.contextMenuSettings = contextMenuSettings;`
Defines the cssClass for the collection of context menu items	Property:`ContextMenu.Items.CssClass` [View] HTML `<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>` [Model] HTML `List<ContextMenuItem> items = new List<ContextMenuItem>(); items.Add(new ContextMenuItem() { CssClass = "menu" }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;`	Property:`ContextMenuSettings.Items.IconCss` [View] HTML `<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>` [Model] HTML `List<ContextMenuItem> menuItems = new List<ContextMenuItem>(); menuItems.Add(new ContextMenuItem() { IconCss = "e-copy" }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = "menuItems" }; ViewBag.contextMenuSettings = contextMenuSettings;`
Defines the collection of sub items for the context menu items	Property:`ContextMenu.Items.SubItems` [View] HTML `<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>` [Model] HTML `List<ContextMenuItem> subItems = new List<ContextMenuItem>(); subItems.Add(new ContextMenuItem() { Name = "HyperLink" }); List<ContextMenuItem> items = new List<ContextMenuItem>(); items.Add(new ContextMenuItem() { SubItems = subItems }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;`	Property:`ContextMenuSettings.Items.Items` [View] HTML `<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>` [Model] HTML `List<ContextMenuItem> SubItems = new List<ContextMenuItem>(); SubItems.Add(new ContextMenuItem() { Id = "id" }); List<ContextMenuItem> menuItems = new List<ContextMenuItem>(); menuItems.Add(new ContextMenuItem() { Items = SubItems }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = menuItems }; ViewBag.contextMenuSettings = contextMenuSettings;`
Set whether to display the default context menu items or not	Property:`ContextMenu.ShowCustomMenuItemsOnly` HTML `<ej-diagram > <e-context-menu show-custom-menu-items-only="true"></e-context-menu> </ej-diagram>`	Property:`ContextMenuSettings.ShowCustomMenuOnly` HTML `<ejs-diagram> <e-diagram-contextmenusettings showCustomMenuOnly="true"></e-diagram-contextmenusettings> </ejs-diagram>` </tr>
Specifies separator between the menu items	Not applicable	Property:`ContextMenuSettings.Items.Separator` [View] HTML `<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>` [Model] HTML `List<ContextMenuItem> menuItems = new List<ContextMenuItem>(); menuItems.Add(new ContextMenuItem() { Separator = true }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = menuItems }; ViewBag.contextMenuSettings = contextMenuSettings;`
Define the target to show the menu item.	Not applicable	Property:`ContextMenuSettings.Items.Target` [View] HTML `<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>` [Model] HTML `List<ContextMenuItem> menuItems = new List<ContextMenuItem>(); menuItems.Add(new ContextMenuItem() { Target = ".E-diagramcontent" }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = menuItems }; ViewBag.contextMenuSettings = contextMenuSettings;`
Enables/Disables the context menu items	Not applicable	Property:`ContextMenuSettings.Show` HTML `<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"> <e-diagram-contextmenusettings show="true"></e-diagram-contextmenusettings> </ejs-diagram>`

behavior	API in Essential JS 1	API in Essential JS 2
Sets the unique id of the data source items	Property:`DataSourceSettings.Id` HTML `<ej-diagram> <e-datasource-settings id="id"></e-datasource-settings> </ej-diagram>`	Property:`DataSourceSettings.Id` HTML `<ejs-diagram> <e-diagram-datasourcesettings id="id"></e-diagram-datasourcesettings> </ejs-diagram>`
Defines the parent id of the data source item	Property:`DataSourceSettings.Parent` HTML `<ej-diagram> <e-datasource-settings parent="parent"></e-datasource-settings> </ej-diagram>`	Property:`DataSourceSettings.ParentId` HTML `<ejs-diagram> <e-diagram-datasourcesettings parentId="parentId"></e-diagram-datasourcesettings> </ejs-diagram>`
Describes query to retrieve a set of data from the specified datasource	Property:`DataSourceSettings.Query` HTML `<ej-diagram> <e-datasource-settings query="datasource query"></e-datasource-settings> </ej-diagram>`	Not applicable
Sets the unique id of the root data source item	Property:`DataSourceSettings.Root` HTML `<ej-diagram> <e-datasource-settings root="E1"></e-datasource-settings> </ej-diagram>`	Property:`DataSourceSettings.Root` HTML `<ejs-diagram> <e-diagram-datasourcesettings root="E1"></e-diagram-datasourcesettings> </ejs-diagram>`
Describes the name of the table on which the specified query has to be executed	Property:`DataSourceSettings.TableName` HTML `<ej-diagram> <e-datasource-settings table-name="datasource table name"></e-datasource-settings> </ej-diagram>`	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> <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Read = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes" }; ViewBag.crudAction = crudAction;`	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> <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Create = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/AddNodes" }; ViewBag.crudAction = crudAction;`	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> <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Update = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/UpdateNodes" }; ViewBag.crudAction = crudAction;`	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> <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Destroy = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/DeleteNodes" }; ViewBag.crudAction = crudAction;`	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> <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Read = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes" }; ViewBag.crudAction = crudAction;`	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> <e-datasource-settings custom-fields="@ViewBag.customFeilds"></e-datasource-settings> </ej-diagram>` [Model] HTML `List<string> customFields = new List<string>(); customFields.Add("Description"); customFields.Add("Color"); ViewBag.customFields = customFields;`	Property:`DataSourceSettings.Data` [View] HTML `<ejs-diagram> <e-diagram-datasourcesettings data="@ViewBag.data"></e-diagram-datasourcesettings> </ejs-diagram>` [Model] HTML `List<string> data = new List<string>(); data.Add("Description"); data.Add("Color"); ViewBag.data = data;`
Defines the data source either as a collection of objects or as an instance of ej.DataManager	Property:`DataSourceSettings.ConnectionDataSource` [View] HTML `<ej-diagram> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { DataSource = DiagramContext.HierarchicalDetails.ToList(), SourceNode = "sourceNode", TargetNode = "targetNode" }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	Not applicable
Sets the datasource for the connection datasource settings items	Property:`DataSourceSettings.ConnectionDataSource.DataSource` [View] HTML `<ej-diagram> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { DataSource = DiagramContext.HierarchicalDetails.ToList() }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	Not applicable
Sets the unique id of the connection data source item	Property:`DataSourceSettings.ConnectionDataSource.Id` [View] HTML `<ej-diagram> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { Id = "Id" }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	Not applicable
Sets the source node of the connection data source item	Property:`DataSourceSettings.ConnectionDataSource.SourceNode` [View] HTML `<ej-diagram> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { SourceNode = "sourceNode" }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	Not applicable
Sets the target node of the connection data source item	Property:`DataSourceSettings.ConnectionDataSource.TargetNode` [View] HTML `<ej-diagram> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { TargetNode = "targetNode" }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	Not applicable
Sets the sourcePointX value of the connection data source item	Property:`DataSourceSettings.ConnectionDataSource.SourcePointX` [View] HTML `<ej-diagram> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { SourcePointX = "200" }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	Not applicable
Sets the sourcePointY value of the connection data source item	Property:`DataSourceSettings.ConnectionDataSource.SourcePointY` [View] HTML `<ej-diagram> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { SourcePointY = "200" }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	Not applicable
Sets the targetPoint-x value of the connection data source item	Property:`DataSourceSettings.ConnectionDataSource.TargetPointX` [View] HTML `<ej-diagram> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { TargetPointX ="100" }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	Not applicable
Sets the targetPoint-y value of the connection data source item	Property:`DataSourceSettings.ConnectionDataSource.TargetPointY` [View] HTML `<ej-diagram> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { TargetPointY = "100" }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	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> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Read = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes" }; ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	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> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Create = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/AddNodes" }; ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	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> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Update = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/UpdateNodes" }; ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	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> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Destroy = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/DeleteNodes" }; ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	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> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `CRUDAction crudAction = new CRUDAction() { Read = "http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes" }; ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	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> <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings"> </e-datasource-settings> </ej-diagram>` [Model] HTML `List<string> customFields = new List<string>(); customFields.Add("Description"); customFields.Add("Color"); ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CustomFields = customFields }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;`	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` HTML `<ej-diagram> <e-default-settings> <e-node border-color="black"></e-node> </e-default-settings> </ej-diagram>`	Property:`GetNodeDefaults` [View] HTML `<ejs-diagram getNodeDefaults="@ViewBag.getNodeDefaults"></ejs-diagram>` HTML `function getNodeDefaults(obj, diagram) { obj.Shape = { type: 'Basic' }; }` [Model] HTML `ViewBag.getNodeDefaults = getNodeDefaults;`
Initializes the default connector properties	Property:`DefaultSettings.Connector` HTML `<ej-diagram> <e-default-settings> <e-connector constraints="Default &~ ConnectorConstraints.InheritTooltip"></e-connector> </e-default-settings> </ej-diagram>`	Property:`GetConnectorDefaults` [View] HTML `<ejs-diagram getConnectorDefaults="@ViewBag.getConnectorDefaults"></ejs-diagram>` HTML `function getConnectorDefaults(obj, diagram) { obj.Type = 'Bezier'; }` [Model] HTML `ViewBag.getConnectorDefaults = getConnectorDefaults;`
Initializes the default properties of groups	Property:`DefaultSettings.Group` HTML `<ej-diagram> <e-default-settings> <e-group border-color="red"></e-group> </e-default-settings> </ej-diagram>`	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 create="@ViewBag.create"></ej-diagram>

HTML

<script>
        function create(args) {
            var diagram = $("#diagram").ejDiagram("instance");
            diagram.model.drawType = { type: "node" };
        }
    </script>

[Model]

HTML

ViewBag.create = "create";

Property:`DrawingObject`

[View]

HTML

<ejs-diagram created="@ViewBag.created"></ejs-diagram>

HTML

function created() {
        diagram = document.getElementById("diagram").ej2_instances[0];
        diagram.drawingObject = { shape: { type: 'Basic', shape: 'Rectangle' } };
        diagram.dataBind();
    }

[Model]

HTML

ViewBag.created = created;

## EnableAutoScroll

behavior	API in Essential JS 1	API in Essential JS 2
Enables or disables auto scroll in diagram	Property:`EnableAutoScroll` HTML `<ej-diagram enable-auto-scroll="true"></ej-diagram>`	Property:`CanAutoScroll` HTML `<ejs-diagram> <e-diagram-scrollsettings canAutoScroll="true"></e-diagram-scrollsettings> </ejs-diagram>` [Model]

## EnableContextMenu

behavior	API in Essential JS 1	API in Essential JS 2
Enables or disables diagram context menu	Property:`EnableContextMenu` HTML `<ej-diagram enable-context-menu="true"></ej-diagram>`	Property:`ContextMenuSettings.Show` HTML `<ejs-diagram> <e-diagram-contextmenusettings show="true"></e-diagram-contextmenusettings> </ejs-diagram>`

## GetCustomCursor

behavior API in Essential JS 1 API in Essential JS 2

Enable or disable rendering component with custom cursor

Not applicable

Property:`GetCustomCursor`

[View]

HTML

<ejs-diagram getCustomCursor="@ViewBag.getCustomCursor"></ejs-diagram>

HTML

function getCustomCursor(action, active) {
        var cursor;
        if (active && action === 'Drag') {
            cursor = '-webkit-grabbing';
        } else if (action === 'Drag') {
            cursor = '-webkit-grabbing'
        }
        return cursor;
    }

[Model]

HTML

ViewBag.getCustomCursor = "getCustomCursor";

## GetCustomProperty </tr> </table> ## GetCustomTool

behavior API in Essential JS 1 API in Essential JS 2

Allows to get the custom properties that have to be serialized</td>

Not applicable

Property:`GetCustomProperty`

HTML

<ejs-diagram getCustomProperty="@ViewBag.getCustomProperty"></ejs-diagram>

HTML

function getCustomProperty(key: string) {
        if (key === 'nodes') {
            return ['description'];
            }
        return null;
    }

[Model]

HTML

ViewBag.getCustomProperty = "getCustomProperty";

</tr> </table> ## Height

behavior API in Essential JS 1 API in Essential JS 2

Allows to get the custom tool</td>

Not applicable

Property:`GetCustomTool`

HTML

<ejs-diagram getCustomTool="@ViewBag.getTool"></ejs-diagram>
    function getTool(action) {
        var tool;
        if (action === 'userHandle') {
            tool = new CloneTool(diagram.CommandHandler, true);
        }
        return tool;
    }

[Model]

HTML

ViewBag.getTool = "getTool";

    public class CloneTool extends ToolBase {
        public mouseDown(args) {
            super.MouseDown(args);
            diagram.Copy();
            diagram.Paste();
        }
    }

behavior	API in Essential JS 1	API in Essential JS 2
Specifies the height of the diagram	Property:`Height` HTML `<ej-diagram height="500px"></ej-diagram>`	Property:`Height` HTML `<ejs-diagram height="500px"></ejs-diagram>`

## HistoryManager </table> ## Layout

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` HTML `<script> var diagram = $("#diagram").ejDiagram("instance"); var entry = { object: node, prevState: node.employeeData }; diagram.model.historyManager.push(entry); var value = { role: "New role" }; node.employeeData = value; if(diagram.model.historyManager.canPop(entry)){ diagram.model.historyManager.pop(); } </script>`	Not applicable
A method that ends grouping the changes	Property:`HistoryManager.CloseGroupAction` HTML `<script> var diagram = $("#diagram").ejDiagram("instance"); var group = diagram.model.selectedItems; diagram.model.historyManager.startGroupAction(); for (var i = 0; i < group.children.length; i++) { var option = {}; var item = group.children[i]; // Updates the fillColor for all the child elements. option.fillColor = args.style.backgroundColor; diagram.UpdateNode(item.Name, option); } diagram.model.historyManager.closeGroupAction(); </script>`	Property:`HistoryList.EndGroupAction` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; var objects = []; objects.Push(diagram.nodes[0], diagram.nodes[1], diagram.Connectors[0]); diagram.historyList.startGroupAction(); diagram.distribute('Top', objects); diagram.distribute('Bottom', objects); diagram.distribute('BottomToTop', objects); diagram.historyList.endGroupAction(); </script>`
A method that removes the history of a recent change made in diagram	Property:`HistoryManager.Pop` HTML `<script> var diagram = $("#diagramcontent").EjDiagram("instance"); diagram.model.historyManager.pop(); </script>`	Not applicable
A method that allows to track the custom changes made in diagram	Property:`HistoryManager.Push` HTML `<script> var diagram = $("#diagram").ejDiagram("instance"); var entry = { object: node, prevState: node.employeeData }; diagram.model.historyManager.push(entry); var value = { role: "New role" }; node.employeeData = value; </script>`	Property:`HistoryList.Push` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; var object = diagram.nodes[0]; object['description'] = (document.getElementById('custom') as HTMLSelectElement).value; var entry = { undoObject: object }; diagram.historyList.Push(entry); diagram.dataBind(); </script>`
Defines what should be happened while trying to restore a custom change	Property:`HistoryManager.Redo` [View] HTML `<ej-diagram> <e-history-manager redo="@ViewBag.customUndoRedo"></e-history-manager> </ej-diagram>` HTML `function customUndoRedo(args) { var diagram = $("#diagram").ejDiagram("instance"); var node = args.object; var currentState = node.employeeData; node.employeeData = args.PrevState; args.PrevState = currentState; }` [Model] HTML `ViewBag.customUndoRedo = "customUndoRedo";`	Property:`HistoryList.Redo` HTML <script> var diagram = document.getElementById("container").ej2_instances[0]; var node1 = diagram.nodes[0]; node1['customName'] = 'customNode'; entry = { undoObject: node1 }; diagram.historyList.push(entry); diagram.historyList.undo = function(args: HistoryEntry) { args.redoObject = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = 'customNodeChange'; } diagram.historyList.redo = function(args: HistoryEntry) { var current = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = args.redoObject['customName']; args.redoObject = current; } </script>
Gets the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified	Property:`HistoryManager.RedoStack` HTML `<script> var diagram = $("#diagram").ejDiagram("instance"); diagram.model.historyManager.redoStack(); </script>`	Property:`HistoryList.RedoStack` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; diagram.appendTo('#diagram'); diagram.historyList.redoStack(); </script>`
Restricts the undo and redo actions to a certain limit	Property:`HistoryManager.StackLimit` HTML `<script> var diagram = $("#diagram").ejDiagram("instance"); diagram.model.historyManager.stackLimit(); </script>`	Not applicable
A method that starts to group the changes to revert/restore them in a single undo or redo	Property:`HistoryManager.StartGroupAction` HTML `<script> var diagram = $("#diagram").ejDiagram("instance"); var group = diagram.model.selectedItems diagram.model.historyManager.startGroupAction(); for (var i = 0; i < group.children.length; i++) { var option = {}; var item = group.children[i]; option.fillColor = args.style.backgroundColor; diagram.UpdateNode(item.Name, option); } diagram.model.historyManager.closeGroupAction(); </script>`	Property:`HistoryList.StartGroupAction` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; var objects = []; objects.Push(diagram.nodes[0], diagram.nodes[1], diagram.Connectors[0]); diagram.historyList.startGroupAction(); diagram.distribute('Top', objects); diagram.distribute('Bottom', objects); diagram.distribute('BottomToTop', objects); diagram.historyList.endGroupAction(); </script>`
Defines what should be happened while trying to revert a custom change	Property:`HistoryManager.Undo` [View] HTML `<ej-diagram> <e-history-manager undo="@ViewBag.customUndoRedo"></e-history-manager> </ej-diagram>` HTML `<script> function customUndoRedo(args) { var diagram = $("#diagram").ejDiagram("instance"); var node = args.Object; var currentState = node.employeeData; node.employeeData = args.PrevState; args.PrevState = currentState; } </script>` [Model] HTML `ViewBag.customUndoRedo = "customUndoRedo";`	Property:`HistoryList.Undo` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; diagram.historyList.push(entry); diagram.historyList.undo = function(args: HistoryEntry) { args.redoObject = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = 'customNodeChange'; } diagram.historyList.redo = function(args: HistoryEntry) { var current = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = args.redoObject['customName']; args.redoObject = current; } </script>` </tr>
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` HTML `<script> var diagram = $("#diagram").ejDiagram("instance"); diagram.model.historyManager.undoStack(); </script>`	Property:`HistoryList.UndoStack` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; diagram.historyList.undoStack(); </script>`
Set the current entry object	Not applicable	Property:`HistoryList.CurrentEntry` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; diagram.historyList.currentEntry(); </script>`
Set the history entry can be undo	Not applicable	Property:`HistoryList.CanUndo` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; diagram.historyList.canUndo = true; </script>`
Set the history entry can be redo	Not applicable	Property:`HistoryList.CanRedo` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; diagram.historyList.canRedo = true; </script>`
Used to decide to stored the changes to history	Property:`HistoryManager.CanLog` HTML `var diagram = $("#diagram").ejDiagram("instance"); diagram.model.historyManager.canLog();`	Property:`HistoryList.CanLog` HTML `<script> var diagram = document.getElementById("container").ej2_instances[0]; diagram.historyList.canLog = function (entry: HistoryEntry) { entry.cancel = true; return entry; } </script>`

## Nodes </td> </td> </td> </table> ## NodeTemplate

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> <e-nodes> <e-node name="nodeName"></e-node> </e-nodes> </ej-diagram>`	Property:`Nodes` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node id="nodeId"></e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity	Property:`Nodes.Activity` HTML `<ej-diagram> <e-nodes> <e-bpmn-node activity="SubProcess"></e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Activity` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-activity activity="SubProcess"></e-basicshape-activity> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
To maintain additional information about nodes	Property:`Nodes.AddInfo` [View] HTML `<ej-diagram> <e-nodes> <e-node addInfo="@ViewBag.addInfo"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `Dictionary<string, object> addInfo = new Dictionary<string, object>(); addInfo.Add("Description", "Bidirectional Flow"); ViewBag.addInfo = addInfo;`	Property:`Nodes.AddInfo` [View] HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node addInfo="@ViewBag.addInfo"></e-diagram-node> </e-diagram-nodes> </ejs-diagram>` [Model] HTML `Dictionary<string, object> addInfo = new Dictionary<string, object>(); addInfo.Add("Description", "Bidirectional Flow"); ViewBag.addInfo = addInfo;`
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> <e-nodes> <e-bpmn-node> <e-annotation text="text"></e-annotation> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Annotations` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-bpmnannotations> <e-basicshape-bpmnannotation text="text"></e-basicshape-bpmnannotation> </e-basicshape-bpmnannotations> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the angle between the BPMN shape and the annotation	Property:`Nodes.Annotation.Angle` HTML `<ej-diagram> <e-nodes> <e-bpmn-node> <e-annotation angle="-45"></e-annotation> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Annotations.Angle` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-bpmnannotations> <e-basicshape-bpmnannotation angle="-45"></e-basicshape-bpmnannotation> </e-basicshape-bpmnannotations> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the direction of the text annotation	Property:`Nodes.Annotation.Direction` HTML `<ej-diagram> <e-nodes> <e-bpmn-node> <e-annotation direction="Left"></e-annotation> </e-bpmn-node> </e-nodes> </ej-diagram>`	Not applicable
Sets the height of the text annotation	Property:`Nodes.Annotation.Height` HTML `<ej-diagram> <e-nodes> <e-bpmn-node> <e-annotation height="50"></e-annotation> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Annotation.Height` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-bpmnannotations> <e-basicshape-bpmnannotation height="50"></e-basicshape-bpmnannotation> </e-basicshape-bpmnannotations> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the distance between the BPMN shape and the annotation	Property:`Nodes.Annotation.Length` HTML `<ej-diagram> <e-nodes> <e-bpmn-node> <e-annotation length="150" width="50"></e-annotation> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Annotations.Length` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-bpmnannotations> <e-basicshape-bpmnannotation length="150"></e-basicshape-bpmnannotation> </e-basicshape-bpmnannotations> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the additional information about the flow object in a BPMN Process	Property:`Nodes.Annotation.Text` HTML `<ej-diagram> <e-nodes> <e-bpmn-node> <e-annotation text="text"></e-annotation> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Annotations.Text` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-bpmnannotations> <e-basicshape-bpmnannotation text="text"></e-basicshape-bpmnannotation> </e-basicshape-bpmnannotations> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the width of the text annotation	Property:`Nodes.Annotation.Width` HTML `<ej-diagram> <e-nodes> <e-bpmn-node> <e-annotation width="50"></e-annotation> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Annotations.Width` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-bpmnannotations> <e-basicshape-bpmnannotation width="50"></e-basicshape-bpmnannotation> </e-basicshape-bpmnannotations> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the id for the annotation	Not applicable	Property:`Nodes.Shape.Annotations.Id` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-bpmnannotations> <e-basicshape-bpmnannotation id="annotationId"></e-basicshape-bpmnannotation> </e-basicshape-bpmnannotations> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines whether the group can be ungrouped or not	Property:`Nodes.CanUngroup` HTML `<ej-diagram> <e-nodes> <e-group can-ungroup="false"> <e-children> <e-node name="node1"></e-node> <e-node name="node2"></e-node> </e-children> <e-container orientation="Horizontal"></e-container> </e-group> </e-nodes> </ej-diagram>`	Not applicable
Sets the type of UML classifier	Property:`Nodes.Classifier` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"></e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class	Property:`Nodes.Class` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class></e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the name of class	Property:`Nodes.Class.Name` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class name="name"></e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the collection of attributes	Property:`Nodes.Class.Attributes` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-attributes> <e-attribute name="name"></e-attribute> </e-attributes> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the name of the attribute	Property:`Nodes.Class.Attributes.Name` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-attributes> <e-attribute name="name"></e-attribute> </e-attributes> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the data type of attribute	Property:`Nodes.Class.Attributes.Type` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-attributes> <e-attribute type="Data"></e-attribute> </e-attributes> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the visibility of the attribute	Property:`Nodes.Class.Attributes.Scope` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-attributes> <e-attribute scope="Protected"></e-attribute> </e-attributes> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the collection of methods of a Class	Property:`Nodes.Class.Methods` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-methods> <e-method name="name"></e-method> </e-methods> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the name of the method	Property:`Nodes.Class.Methods.Name` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-methods> <e-method name="name"></e-method> </e-methods> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the arguments of the method	Property:`Nodes.Class.Methods.Arguments` [View] HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-methods> <e-method parameters="@ViewBag.parameters"></e-method> </e-methods> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>` [Model] HTML `Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Name = "name" }); ViewBag.parameters = parameters;`	Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class	Property:`Nodes.Class.Methods.Arguments.Name` [View] HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-methods> <e-method parameters="@ViewBag.parameters"></e-method> </e-methods> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>` [Model] HTML `Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Name = "name" }); ViewBag.parameters = parameters;`	Not applicable
Sets the type of the argument	Property:`Nodes.Class.Methods.Arguments.Type` [View] HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-methods> <e-method parameters="@ViewBag.parameters"></e-method> </e-methods> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>` [Model] HTML `Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Type = "String" }); ViewBag.parameters = parameters;`	Not applicable
Sets the return type of the method	Property:`Nodes.Class.Methods.Type` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-methods> <e-method type="String"></e-method> </e-methods> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the visibility of the method	Property:`Nodes.Class.Methods.Scope` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Class"> <e-class> <e-methods> <e-method scope="Protected"></e-method> </e-methods> </e-class> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the state of the node is collapsed/expanded	Property:`Nodes.CollapseIcon` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { Shape = IconShapes.ArrowDown }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon shape="ArrowUp"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the border color for collapse icon of node	Property:`Nodes.CollapseIcon.BorderColor` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { BorderColor = "red" }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon.BorderColor` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon borderColor="red"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the border width for collapse icon of node	Property:`Nodes.CollapseIcon.BorderWidth` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { BorderWidth = 2 }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon.BorderWidth` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon borderWidth="2"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the fill color for collapse icon of node	Property:`Nodes.CollapseIcon.FillColor` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { FillColor = "red" }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon.Fill` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon fill="red"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the height for collapse icon of node	Property:`Nodes.CollapseIcon.Height` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { Height = 10 }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon.Height` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon height="10"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the horizontal alignment of the icon	Property:`Nodes.CollapseIcon.HorizontalAlignment` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { HorizontalAlignment = HorizontalAlignment.Left }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon.HorizontalAlignment` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon horizontalAlignment="Center"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
To set the margin for the collapse icon of node	Property:`Nodes.CollapseIcon.Margin` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { Margin = { Bottom = 15, Left = 15, Right = 15, Top = 15} }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon.Margin` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon> <e-iconshape-margin bottom="10" left="10" right="10" top="10"></e-iconshape-margin> </e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the fraction/ratio(relative to node) that defines the position of the icon	Property:`Nodes.CollapseIcon.Offset` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { Offset = { X = 0.5F, Y = 0.5F } }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon.Offset` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon> <e-iconshape-offset x="0" y="0.5F"></e-iconshape-offset> </e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the shape of the collapsed state of the node	Property:`Nodes.CollapseIcon.Shape` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { Shape = IconShapes.ArrowDown }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon.Shape` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon horizontalAlignment="Center"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the vertical alignment of the icon	Property:`Nodes.CollapseIcon.VerticalAlignment ` [View] HTML `<ej-diagram> <e-nodes> <e-node collapse-icon="@ViewBag.collapseIcon"></e-node> </e-nodes> </ej-diagram>` [Model] HTML `DiagramIcon collapseIcon = new DiagramIcon() { VerticalAlignment = VerticalAlignment.Top }; ViewBag.collapseIcon = collapseIcon;`	Property:`Nodes.CollapseIcon.VerticalAlignment ` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon verticalAlignment="Top"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the custom content of the icon	Not applicable	Property:`Nodes.CollapseIcon.Content` HTML <ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon shape="Template" content="<g><path d='M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455L0,90l7.975-23.522" + "c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982" + "c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537" + "c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938" + "c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537" + "c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333" + "c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882" + "c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977" + "c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344" + "c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223" + "C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z'>"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>
Defines the geometry of a path	Not applicable	Property:`Nodes.CollapseIcon.PathData` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon shape="Path" pathData = "M0,0 L0,100"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the corner radius of the icon border	Not applicable	Property:`Nodes.CollapseIcon.CornerRadius` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon cornerRadius="5"></e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the space that the icon has to be moved from the icon border	Not applicable	Property:`Nodes.CollapseIcon.Padding` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-collapseicon> <e-iconshape-padding bottom="15" left="15" right="15" top="15"></e-iconshape-padding> </e-node-collapseicon> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the distance to be left between a node and its connections(In coming and out going connections)	Property:`Nodes.ConnectorPadding` HTML `<ej-diagram> <e-nodes> <e-node connector-padding="5"></e-node> </e-nodes> </ej-diagram>`	Not applicable
Enables or disables the default behaviors of the node	Property:`Nodes.Constraints` HTML `<ej-diagram> <e-nodes> <e-node constraints="Default"></e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Constraints` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node constraints="Default"></e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the orientation of the container. Applicable, if the group is a container	Property:`Nodes.Container.Orientation` HTML `<ej-diagram> <e-nodes> <e-group> <e-children> <e-node name="node1"></e-node> <e-node name="node2"></e-node> </e-children> <e-container orientation="Horizontal"></e-container> </e-group> </e-nodes> </ej-diagram>`	Not applicable
Sets the type of the container. Applicable if the group is a container.	Property:`Nodes.Container.Type` HTML `<ej-diagram> <e-nodes> <e-group> <e-children> <e-node name="node1"></e-node> <e-node name="node2"></e-node> </e-children> <e-container type="Canvas"></e-container> </e-group> </e-nodes> </ej-diagram>`	Not applicable
Defines the corner radius of rectangular shapes	Property:`Nodes.CornerRadius` HTML `<ej-diagram> <e-nodes> <e-basic-shape corner-radius="5"></e-basic-shape> </e-nodes> </ej-diagram>`	Property:`Nodes.Shapes.CornerRadius` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape cornerRadius="5"></e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>` </tr>
This property allows you to customize nodes appearance using user-defined CSS	Property:`Nodes.CssClass` HTML `<ej-diagram> <e-nodes> <e-node css-class="hoverNode"></e-node> </e-nodes> </ej-diagram>`	Not applicable
Defines the BPMN data object	Property:`Nodes.Data.Type` HTML `<ej-diagram> <e-nodes> <e-bpmn-node> <e-data type="Input"></e-data> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.DataObject.Type` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-dataobject type="Input"></e-basicshape-dataobject> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines whether the BPMN data object is a collection or not	Property:`Nodes.Data.Collection` HTML `<ej-diagram> <e-nodes> <e-bpmn-node> <e-data collection="false"></e-data> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.DataObject.Collection` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-dataobject collection="false"></e-basicshape-dataobject> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines an Enumeration in a UML Class Diagram	Property:`Nodes.Enumeration` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Enumeration"> <e-enumeration name="name"></e-enumeration> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the name of the Enumeration	Property:`Nodes.Enumeration.Name` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Enumeration"> <e-enumeration name="name"></e-enumeration> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the collection of enumeration members	Property:`Nodes.Enumeration.Members` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Enumeration"> <e-enumeration> <e-members> <e-member name="name"></e-member> </e-members> </e-enumeration> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the name of the enumeration member	Property:`Nodes.Enumeration.Members.Name` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Enumeration"> <e-enumeration> <e-members> <e-member name="name"></e-member> </e-members> </e-enumeration> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the type of the BPMN Events. Applicable, if the node is a BPMN event	Property:`Nodes.Event` HTML `<ej-diagram> <e-nodes> <e-bpmn-node event="Intermediate"></e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Event` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-event event="Intermediate"></e-basicshape-event> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the type of the trigger	Property:`Nodes.Event.Trigger` HTML `<ej-diagram> <e-nodes> <e-bpmn-node shape="Event" trigger="None"></e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Event.Trigger` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-event event="Intermediate" trigger="None"></e-basicshape-event> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines whether the node can be automatically arranged using layout or not	Property:`Nodes.ExcludeFromLayout` HTML `<ej-diagram> <e-layout type="HierarchicalTree"></e-layout> <e-nodes> <e-node name="node1" exclude-from-layout="true"></e-node> <e-node name="node2"></e-node> <e-node name="node3"></e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.ExcludeFromLayout` HTML `<ejs-diagram> <e-diagram-layout type="HierarchicalTree"></e-diagram-layout> <e-diagram-nodes> <e-diagram-node id="node1" excludeFromLayout="true"></e-diagram-node> <e-diagram-node id="node2"></e-diagram-node> <e-diagram-node id="node3"></e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the fill color of the node	Property:`Nodes.FillColor` HTML `<ej-diagram> <e-nodes> <e-node fill-color="red"></e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.Fill` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-style fill="red"></e-node-style> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway	Property:`Nodes.Gateway` HTML `<ej-diagram> <e-nodes> <e-bpmn-node shape="Gateway" gateway="Exclusive"></e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Gateway` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-gateway type="Exclusive"></e-basicshape-gateway> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the x1 value of linear gradient	Property:`Nodes.Gradient.LinearGradient.X1` HTML `<ej-diagram> <e-nodes> <e-node> <e-linear-gradient x1="0"></e-linear-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.Gradient.LinearGradient.X1`
Defines the x2 value of linear gradient	Property:`Nodes.Gradient.LinearGradient.X2` HTML `<ej-diagram> <e-nodes> <e-node> <e-linear-gradient x2="50"></e-linear-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.Gradient.LinearGradient.X2`
Defines the y1 value of linear gradient	Property:`Nodes.Gradient.LinearGradient.Y1` HTML `<ej-diagram> <e-nodes> <e-node> <e-linear-gradient y1="0"></e-linear-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.Gradient.LinearGradient.Y1`
Defines the y2 value of linear gradient	Property:`Nodes.Gradient.LinearGradient.Y2` HTML `<ej-diagram> <e-nodes> <e-node> <e-linear-gradient y2="50"></e-linear-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.Gradient.LinearGradient.Y2`
Defines the position of the outermost circle	Property:`Nodes.Gradient.RadialGradient.Cx` HTML `<ej-diagram> <e-nodes> <e-node> <e-radial-gradient cx="50"></e-radial-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.RadialGradient.Cx`
Defines the outer most circle of the radial gradient	Property:`Nodes.Gradient.RadialGradient.Cy` HTML `<ej-diagram> <e-nodes> <e-node> <e-radial-gradient cy="50"></e-radial-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.RadialGradient.Cy`
Defines the innermost circle of the radial gradient	Property:`Nodes.Gradient.RadialGradient.Fx` HTML `<ej-diagram> <e-nodes> <e-node> <e-radial-gradient fx="50"></e-radial-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.RadialGradient.Fx`
Defines the innermost circle of the radial gradient	Property:`Nodes.Gradient.RadialGradient.Fy` HTML `<ej-diagram> <e-nodes> <e-node> <e-radial-gradient fy="50"></e-radial-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.RadialGradient.Fy`
Defines the different colors and the region of color transitions	Property:`Nodes.Gradient.RadialGradient.Stops` HTML `<ej-diagram> <e-nodes> <e-node> <e-radial-gradient> <e-stops> <e-stop color="white" offset="0"></e-stop> <e-stop color="red" offset="50"></e-stop> </e-stops> </e-radial-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.RadialGradient.Stops` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-style> <e-textstyle-gradient type="Radial"> <e-gradient-stops> <e-gradient-stop color="white" offset="0"></e-gradient-stop> <e-gradient-stop color="red" offset="50"></e-gradient-stop> </e-gradient-stops> </e-textstyle-gradient> </e-node-style> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the color to be filled over the specified region	Property:`Nodes.Gradient.Stops.Color` HTML `<ej-diagram> <e-nodes> <e-node> <e-radial-gradient> <e-stops> <e-stop color="white"></e-stop> </e-stops> </e-radial-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.Gradient.Stops.Color` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-style> <e-textstyle-gradient type="Radial"> <e-gradient-stops> <e-gradient-stop color="white"></e-gradient-stop> </e-gradient-stops> </e-textstyle-gradient> </e-node-style> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the position where the previous color transition ends and a new color transition starts	Property:`Nodes.Gradient.Stops.Offset` HTML `<ej-diagram> <e-nodes> <e-node> <e-radial-gradient> <e-stops> <e-stop offset="0"></e-stop> </e-stops> </e-radial-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.Gradient.Stops.Offset` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-style> <e-textstyle-gradient type="Radial"> <e-gradient-stops> <e-gradient-stop offset="0"></e-gradient-stop> </e-gradient-stops> </e-textstyle-gradient> </e-node-style> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Describes the transparency level of the region	Property:`Nodes.Gradient.Stops.Opacity` HTML `<ej-diagram> <e-nodes> <e-node> <e-radial-gradient> <e-stops> <e-stop opacity="0.5f"></e-stop> </e-stops> </e-radial-gradient> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Style.Gradient.Stops.Opacity` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-style> <e-textstyle-gradient type="Radial"> <e-gradient-stops> <e-gradient-stop opacity="0.5f"></e-gradient-stop> </e-gradient-stops> </e-textstyle-gradient> </e-node-style> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the header of a swimlane/lane	Property:`Nodes.Header` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-swim-lane-header text="text"></e-swim-lane-header> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Defines the height of the node	Property:`Nodes.Height` HTML `<ej-diagram> <e-nodes> <e-node height="100"></e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Height` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node height="100"></e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container	Property:`Nodes.HorizontalAlign` HTML `<ej-diagram> <e-nodes> <e-node horizontal-align="Left"></e-node> </e-nodes> </ej-diagram>`	Not applicable
Defines an interface in a UML interface Diagram	Property:`Nodes.Interface` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface name="name"></e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	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> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface name="name"></e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the collection of attributes	Property:`Nodes.Interface.Attributes` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-attributes> <e-attribute name="name"></e-attribute> </e-attributes> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the name of the attribute	Property:`Nodes.Interface.Attributes.Name` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-attributes> <e-attribute name="name"></e-attribute> </e-attributes> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the data type of attribute	Property:`Nodes.Interface.Attributes.Type` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-attributes> <e-attribute type="Data"></e-attribute> </e-attributes> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the visibility of the attribute	Property:`Nodes.Interface.Attributes.Scope` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-attributes> <e-attribute scope="Protected"></e-attribute> </e-attributes> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the collection of methods of a interface	Property:`Nodes.Interface.Methods` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-methods> <e-method name="name"></e-method> </e-methods> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the name of the method	Property:`Nodes.Interface.Methods.Name` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-methods> <e-method name="name"></e-method> </e-methods> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines the arguments of the method	Property:`Nodes.Interface.Methods.Arguments` [View] HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-methods> <e-method parameters="@ViewBag.parameters"></e-method> </e-methods> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>` [Model] HTML `Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Name = "Date", Type = "String" }); ViewBag.parameters = parameters;`	Not applicable
Defines the name, attributes and methods of a interface. Applicable, if the node is a interface	Property:`Nodes.Interface.Methods.Arguments.Name` [View] HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-methods> <e-method parameters="@ViewBag.parameters"></e-method> </e-methods> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>` [Model] HTML `Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Name = "Date" }); ViewBag.parameters = parameters;`	Not applicable
Sets the type of the argument	Property:`Nodes.Interface.Methods.Arguments.Type` [View] HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-methods> <e-method parameters="@ViewBag.parameters"></e-method> </e-methods> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>` [Model] HTML `Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Type = "String" }); ViewBag.parameters = parameters;`	Not applicable
Sets the return type of the method	Property:`Nodes.Interface.Methods.Type` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-methods> <e-method type="String"> </e-method> </e-methods> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Sets the visibility of the method	Property:`Nodes.Interface.Methods.Scope` HTML `<ej-diagram> <e-nodes> <e-uml-classifier classifier="Interface"> <e-interface> <e-methods> <e-method scope="Protected"> </e-method> </e-methods> </e-interface> </e-uml-classifier> </e-nodes> </ej-diagram>`	Not applicable
Defines whether the sub tree of the node is expanded or collapsed	Property:`Nodes.IsExpanded` HTML `<ej-diagram> <e-nodes> <e-node is-expanded="true"></e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.IsExpanded` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node isExpanded="true"></e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the node as a swimlane	Property:`Nodes.IsSwimlane` HTML `<ej-diagram> <e-nodes> <e-swim-lane is-swimlane="true"></e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
A collection of objects where each object represents a label	Property:`Nodes.Labels` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label text="text" ></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Annotations` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation content="annotation"></e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
An array of objects where each object represents a lane. Applicable, if the node is a swimlane	Property:`Nodes.Lanes` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-lanes> <e-lane name="lane1"></e-lane> <e-lane name="lane2"></e-lane> </e-lanes> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
This property allows you to customize lanes appearance using user-defined CSS	Property:`Nodes.Lanes.CssClass` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-lanes> <e-lane css-class="hoverLane"></e-lane> </e-lanes> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Defines the header of the lane	Property:`Nodes.Lanes.Header` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-lanes> <e-lane> <e-lane-header text="text"></e-lane-header> </e-lane> </e-lanes> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Defines the width of lane	Property:`Nodes.Lanes.Width` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-lanes> <e-lane width="200"></e-lane> </e-lanes> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
An array of objects where each object represents a child node of the lane	Property:`Nodes.Lanes.Children` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-lanes> <e-lane> <e-children name="process"></e-children> </e-lane> </e-lanes> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Defines the object as a lane	Property:`Nodes.Lanes.IsLane` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-lanes> <e-lane is-lane="true"></e-lane> </e-lanes> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Defines the minimum space to be left between the bottom of parent bounds and the node	Property:`Nodes.Margin` HTML `<ej-diagram> <e-nodes> <e-node margin-bottom="15" margin-left="15" margin-right="15" margin-top="15"></e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Margin` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-margin bottom="15" left="15" right="15" top="15"></e-node-margin> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the maximum height limit of the node	Property:`Nodes.MaxHeight` HTML `<ej-diagram> <e-nodes> <e-node max-height="200"></e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.MaxHeight` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node maxHeight="200"></e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the unique identifier of the node	Property:`Nodes.Name` HTML `<ej-diagram> <e-nodes> <e-node name="nodeName"></e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Id` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node id="nodeId"></e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the path geometry that defines the shape of a path node	Property:`Nodes.PathData` HTML `<ej-diagram> <e-nodes> <e-basic-shape shape="Path" path-data="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"></e-basic-shape> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Data` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Path"></e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
An array of objects, where each object represents a smaller region(phase) of a swimlane	Property:`Nodes.Phases` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-phases> <e-phase name="phase1"></e-phase> </e-phases> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Defines the header of the smaller regions	Property:`Nodes.Phases.Label` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-phases> <e-phase> <e-label name="name"></e-label> </e-phase> </e-phases> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Defines the line color of the splitter that splits adjacent phases	Property:`Nodes.Phases.LineColor` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-phases> <e-phase line-color="red"></e-phase> </e-phases> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Sets the length of the smaller region(phase) of a swimlane	Property:`Nodes.Phases.Offset` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-phases> <e-phase offset="150"></e-phase> </e-phases> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Sets the orientation of the phase	Property:`Nodes.Phases.Orientation` HTML `<ej-diagram> <e-nodes> <e-swim-lane> <e-phases> <e-phase orientation="Horizontal"></e-phase> </e-phases> </e-swim-lane> </e-nodes> </ej-diagram>`	Not applicable
Sets the height of the phase headers	Property:`Nodes.PhaseSize` HTML `<ej-diagram> <e-nodes> <e-swim-lane phase-size="150"></e-swim-lane> </e-nodes> </ej-diagram>`	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> <e-nodes> <e-node> <e-pivot x="0" y="0"></e-pivot> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Pivot` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-pivot x="0" y="0"></e-node-pivot> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon	Property:`Nodes.Points` HTML `<ej-diagram> <e-nodes> <e-basic-shape shape="Polygon"> <e-points> <e-shape-point x="0" y="12.5F"></e-shape-point> <e-shape-point x="0" y="50"></e-shape-point> <e-shape-point x="50" y="50"></e-shape-point> <e-shape-point x="50" y="0"></e-shape-point> <e-shape-point x="12.5F" y="0"></e-shape-point> <e-shape-point x="0" y="12.5F"></e-shape-point> </e-points> </e-basic-shape> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Points` HTML <ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape shape="Polygon"> <e-basicshape-polygonpoints> <e-basicshape-point x="0" y="12.5"></e-basicshape-point> <e-basicshape-point x="0" y="50"></e-basicshape-point> <e-basicshape-point x="50" y="50"></e-basicshape-point> <e-basicshape-point x="50" y="0"></e-basicshape-point> <e-basicshape-point x="12.5" y="0"></e-basicshape-point> <e-basicshape-point x="0" y="12.5"></e-basicshape-point> </e-basicshape-polygonpoints> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>
An array of objects where each object represents a port	Property:`Nodes.Ports` HTML `<ej-diagram> <e-nodes> <e-node> <e-ports> <e-port name="portName"></e-port> </e-ports> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Ports` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-ports> <e-node-port id="portId"></e-node-port> </e-node-ports> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the border color of the port	Property:`Nodes.Ports.BorderColor` HTML `<ej-diagram> <e-nodes> <e-node> <e-ports> <e-port border-color="red"></e-port> </e-ports> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Ports.Style.StrokeColor` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-ports> <e-node-port> <e-pointport-style strokeColor="red"></e-pointport-style> </e-node-port> </e-node-ports> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines whether connections can be created with the port	Property:`Nodes.Ports.Constraints` HTML `<ej-diagram> <e-nodes> <e-node> <e-ports> <e-port constraints="ConnectOnDrag"></e-port> </e-ports> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Ports.Constraints` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-ports> <e-node-port constraints="Draw"></e-node-port> </e-node-ports> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
An array of objects where each object represents a port	Property:`Nodes.Ports.Shape` HTML `<ej-diagram> <e-nodes> <e-node> <e-ports> <e-port shape="Square"></e-port> </e-ports> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Ports.Shape` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-ports> <e-node-port shape="Square"></e-node-port> </e-node-ports> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the vertical alignment of the port with respect to its immediate parent	Not applicable	Property:`Nodes.Ports.VerticalAlignment` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-ports> <e-node-port id="portId" constraints="Draw" shape="Square" verticalAlignment="Top"></e-node-port> </e-node-ports> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the opacity and the position of shadow	Property:`Nodes.Shadow` HTML `<ej-diagram> <e-nodes> <e-node> <e-shadow opacity="0.5F"></e-shadow> </e-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shadow` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shadow opacity="0.5"></e-node-shadow> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
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> <e-nodes> <e-bpmn-node shape="Activity" activity="SubProcess"></e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Activity.SubProcess` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-activity activity="SubProcess"></e-basicshape-activity> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines the collection of events that need to be appended with BPMN Sub-Process	Property:`Nodes.SubProcess.Events` HTML `<ej-diagram> <e-nodes> <e-bpmn-node shape="Activity" activity="SubProcess"> <e-subProcess type="Event"> <e-events> <e-event name="eventName"></e-event> </e-events> </e-subProcess> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Activity.SubProcess.Events` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-activity activity="SubProcess"> <e-bpmnactivity-subprocess type="Event"> <e-bpmnsubprocess-bpmnsubevents> <e-bpmnsubprocess-bpmnsubevent id="eventId"></e-bpmnsubprocess-bpmnsubevent> </e-bpmnsubprocess-bpmnsubevents> </e-bpmnactivity-subprocess> </e-basicshape-activity> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
An array of objects where each object represents a port	Property:`Nodes.SubProcess.Events.Ports` [View] HTML `<ej-diagram> <e-nodes> <e-bpmn-node activity="SubProcess"> <e-subProcess events="@ViewBag.events"> </e-subProcess> </e-bpmn-node> </e-nodes> </ej-diagram>` [Model] HTML `Collection labels = new Collection(); labels.Add(new Label() { Name = "labelName" }); Collection ports = new Collection(); ports.Add(new Port() { Name = "portName" }); Collection events = new Collection(); events.Add(new BPMNEvent() { Ports = ports }); ViewBag.events = events;`	Property:`Nodes.Shape.Activity.SubProcess.Events.Ports` HTML <ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-activity activity="SubProcess"> <e-bpmnactivity-subprocess type="Event"> <e-bpmnsubprocess-bpmnsubevents> <e-bpmnsubprocess-bpmnsubevent id="eventId"> <e-bpmnsubevent-ports> <e-bpmnsubevent-port id="portId"></e-bpmnsubevent-port> </e-bpmnsubevent-ports> </e-bpmnsubprocess-bpmnsubevent> </e-bpmnsubprocess-bpmnsubevents> </e-bpmnactivity-subprocess> </e-basicshape-activity> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>
A collection of objects where each object represents a label	Property:`Nodes.SubProcess.Events.Labels` [View] HTML `<ej-diagram> <e-nodes> <e-bpmn-node activity="SubProcess"> <e-subProcess events="@ViewBag.events"> </e-subProcess> </e-bpmn-node> </e-nodes> </ej-diagram>` [Model] HTML `Collection labels = new Collection(); labels.Add(new Label() { Name = "labelName" }); Collection events = new Collection(); events.Add(new BPMNEvent() { Labels = labels }); ViewBag.events = events;`	Property:`Nodes.Shape.Activity.SubProcess.Events.Annotations` HTML <ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-activity activity="SubProcess"> <e-bpmnactivity-subprocess type="Event"> <e-bpmnsubprocess-bpmnsubevents> <e-bpmnsubprocess-bpmnsubevent id="eventId"> <e-bpmnsubevent-nodeannotations> <e-bpmnsubevent-nodeannotation content="text"></e-bpmnsubevent-nodeannotation> </e-bpmnsubevent-nodeannotations> </e-bpmnsubprocess-bpmnsubevent> </e-bpmnsubprocess-bpmnsubevents> </e-bpmnactivity-subprocess> </e-basicshape-activity> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>
Defines the task of the BPMN activity. Applicable, if the type of activity is set as task	Property:`Nodes.Task` HTML `<ej-diagram> <e-nodes> <e-bpmn-node shape="Activity" activity="Task"> <e-task type="Service"></e-task> </e-bpmn-node> </e-nodes> </ej-diagram>`	Property:`Nodes.Shape.Activity.Task` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-shape type="Bpmn"> <e-basicshape-activity activity="Task"> <e-bpmnactivity-task type="Service"></e-bpmnactivity-task> </e-basicshape-activity> </e-node-shape> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`

behavior API in Essential JS 1 API in Essential JS 2

Binds the custom JSON data with node properties

Property:`NodeTemplate`

[View]

HTML

<ej-diagram node-template="@ViewBag.nodeTemplate"></ej-diagram>

HTML

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

[Model]

HTML

ViewBag.nodeTemplate = nodeTemplate;

Property:`SetNodeTemplate`

[View]

HTML

<ejs-diagram setNodeTemplate="@ViewBag.setNodeTemplate"></ejs-diagram>

HTML

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

[Model]

HTML

ViewBag.setNodeTemplate = "setNodeTemplate";

## 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` HTML `<ej-diagram> <e-diagram-layers> <e-diagram-layer name="name"></e-diagram-layer> </e-diagram-layers> </ej-diagram>`	Property:`Layers` HTML `<ejs-diagram> <e-diagram-layers> <e-diagram-layer id="layerId"></e-diagram-layer> </e-diagram-layers> </ejs-diagram>`
A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes	Property:`Layers.Print` HTML `<ej-diagram> <e-diagram-layers> <e-diagram-layer print="true"></e-diagram-layer> </e-diagram-layers> </ej-diagram>`	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` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label text="text"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Content` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation content="content"></e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Offset for annotation content	Property:`Labels.Offset` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label> <e-offset x="0.5F" y="0.5F"></e-offset> </e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Offset` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation> <e-shapeannotation-offset x="0.5" y="0.5"></e-shapeannotation-offset> </e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the hyperlink for the labels	Property:`Labels.HyperLink` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label text="Syncfusion" hyperlink="https://www.Syncfusion.Com"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Hyperlink` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation content="Syncfusion" hyperlink="https://www.Syncfusion.Com"></e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Enables/disables the bold style	Property:`Labels.Bold` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label bold="true"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Style.Bold` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation> <e-shapeannotation-style bold="true"></e-shapeannotation-style> </e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the border color of the label	Property:`Labels.BorderColor` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label border-color="red"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Style.StrokeColor` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation> <e-shapeannotation-style strokeColor="red"></e-shapeannotation-style> </e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the border width of the label	Property:`Labels.BorderWidth` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label border-width="2"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Style.StrokeWidth` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation> <e-shapeannotation-style strokeWidth="2"></e-shapeannotation-style> </e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
This property allows you to customize labels appearance using user-defined CSS	Property:`Labels.CssClass` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label css-class="hoverText"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Not applicable
Enables or disables the default behaviors of the label	Property:`Labels.Constraints` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label constraints="Resizable"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Constraints` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation constraints="ReadOnly"></e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the fill color of the text area	Property:`Labels.FillColor` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label fill-color="white"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Style.Fill` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation> <e-shapeannotation-style fill="white"></e-shapeannotation-style> </e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the font color of the text	Property:`Labels.FontColor` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label font-color="black"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Style.Color` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation> <e-shapeannotation-style color="black"></e-shapeannotation-style> </e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the font family of the text	Property:`Labels.FontFamily` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label font-family="seugoe UI"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Style.FontFamily` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation> <e-shapeannotation-style fontFamily="seugoe UI"></e-shapeannotation-style> </e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the height of the label	Property:`Labels.Height` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label height="20"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Height` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation height="20"></e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the horizontal alignment of the label	Property:`Labels.HorizontalAlignment` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label horizontal-alignment="Left"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.HorizontalAlignment` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation horizontalAlignment="Left"></e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
To set the margin of the label	Property:`Labels.Margin` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label> <e-margin bottom="15" left="15" right="15" top="15"></e-margin> </e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Margin` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation> <e-shapeannotation-margin bottom="15" left="15" right="15" top="15"></e-shapeannotation-margin> </e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Defines whether the label is editable or not	Property:`Labels.ReadOnly` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label read-only="true"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Constraints` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation constraints="ReadOnly"></e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Sets the id of svg/html templates. Applicable, if the node’s label is HTML or native	Property:`Labels.TemplateId` HTML `<script id="SvgEllipse" type="text/x-jsrender"> <svg xmlns="http://www.w3.Org/2000/svg" xmlns:xlink="http://www.w3.Org/1999/xlink"> <circle cx="10" cy="6" r="5" style="stroke:#006600; fill:#00cc00" /> </svg> </script>` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label template-id="SvgEllipse"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Not applicable
Defines how to align the text inside the label	Property:`Labels.TextAlign` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label text-align="Left"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Style.TextAlign` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation> <e-shapeannotation-style textAlign="left"></e-shapeannotation-style> </e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Enables or disables the visibility of the label	Property:`Labels.Visible` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label visible="true"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Property:`Annotations.Visibility` HTML `<ejs-diagram> <e-diagram-nodes> <e-diagram-node> <e-node-nodeannotations> <e-node-nodeannotation visibility="false"></e-node-nodeannotation> </e-node-nodeannotations> </e-diagram-node> </e-diagram-nodes> </ejs-diagram>`
Gets whether the label is currently being edited or not	Property:`Labels.Mode` HTML `<ej-diagram> <e-nodes> <e-node> <e-labels> <e-diagram-label mode="View"></e-diagram-label> </e-labels> </e-node> </e-nodes> </ej-diagram>`	Not applicable

## PageSettings </tr> </table> ## ScrollSettings

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> <e-page-settings> <e-auto-scroll-border bottom="50" left="50" right="50" top="50"></e-auto-scroll-border> </e-page-settings> </ej-diagram>`	Not applicable
Sets whether multiple pages can be created to fit all nodes and connectors	Property:`PageSettings.MultiplePage` HTML `<ej-diagram> <e-page-settings multiple-page="true"></e-page-settings> </ej-diagram>`	Property:`PageSettings.MultiplePage` HTML `<ejs-diagram> <e-diagram-pagesettings multiplePage="false"></e-diagram-pagesettings> </ejs-diagram>`
Defines the background color of diagram pages	Property:`PageSettings.PageBackgroundColor` HTML `<ej-diagram> <e-page-settings page-background-color="grey"></e-page-settings> </ej-diagram>`	Property:`PageSettings.Background.Color` HTML `<ejs-diagram> <e-diagram-pagesettings > <e-pagesettings-background color="grey"></e-pagesettings-background> </e-diagram-pagesettings> </ejs-diagram>`
Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited”	Property:`PageSettings.scrollableArea` HTML `<ej-diagram> <e-page-settings> <e-scrollable-area height="300" width="300" x="0" y="0"></e-scrollable-area> </e-page-settings> </ej-diagram>`	Property:`ScrollSettings.ScrollableArea` [View] HTML `<ejs-diagram> <e-diagram-scrollsettings scrollableArea="@ViewBag.getScrollableArea"></e-diagram-scrollsettings> </ejs-diagram>` HTML `<script> function getScrollableArea() { var scrollableArea = { X = 0, Y = 0, Width = 300, Height = 300 }; return scrollableArea; } </script>` [Model] HTML `ViewBag.getScrollableArea = "getScrollableArea";`
Defines the draggable region of diagram elements	Property:`PageSettings.BoundaryConstraints` HTML `<ej-diagram> <e-page-settings boundary-constraints="Diagram"></e-page-settings> </ej-diagram>`	Property:`PageSettings.BoundaryConstraints` HTML `<ejs-diagram> <e-diagram-pagesettings boundaryConstraints="Diagram"></e-diagram-pagesettings> </ejs-diagram>`

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` HTML `<ej-diagram> <e-scroll-settings horizontal-offset="300"></e-scroll-settings> </ej-diagram>`	Property:`ScrollSettings.HorizontalOffset` HTML `<ejs-diagram> <e-diagram-scrollsettings horizontalOffset="300"></e-diagram-scrollsettings> </ejs-diagram>`
Allows to extend the scrollable region that is based on the scroll limit	Property:`ScrollSettings.Padding` HTML `<ej-diagram> <e-scroll-settings> <e-padding bottom="15" left="15" right="15" top="15"></e-padding> </e-scroll-settings> </ej-diagram>`	Not applicable
Allows to read the maximum zoom value of scroller	Not applicable	Property:`ScrollSettings.MaxZoom` HTML `<ejs-diagram> <e-diagram-scrollsettings maxZoom="5"></e-diagram-scrollsettings> </ejs-diagram>`
Enables/Disables the autoscroll option	Not applicable	Property:`ScrollSettings.CanAutoScroll` HTML `<ejs-diagram> <e-diagram-scrollsettings canAutoScroll="true"></e-diagram-scrollsettings> </ejs-diagram>`
Defines the scrollable area of diagram	Not applicable	Property:`ScrollSettings.ScrollableArea` [View] HTML `<ejs-diagram> <e-diagram-scrollsettings scrollableArea="@ViewBag.getScrollableArea"></e-diagram-scrollsettings> </ejs-diagram>` HTML `<script> function getScrollableArea() { var scrollableArea = { X = 0, Y = 0, Width = 300, Height = 300 }; return scrollableArea; } </script>` [Model] HTML `ViewBag.getScrollableArea = "getScrollableArea";`

## 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> <e-snap-settings enable-snap-to-object="true"></e-snap-settings> </ej-diagram>`	Not applicable
Defines the appearance of horizontal gridlines	Property:`SnapSettings.HorizontalGridLines` [View] HTML `<ej-diagram> <e-snap-settings horizontal-gridlines="@ViewBag.gridLines"></e-snap-settings> </ej-diagram>` [Model] HTML `List<decimal> lineInterval = new List<decimal>(); lineInterval.Add(1); lineInterval.Add(14); lineInterval.Add(0.5m); lineInterval.Add(14.5m); GridLines gridLines = new GridLines() { LinesInterval = lineInterval }; ViewBag.gridLines = gridLines;`	Property:`SnapSettings.HorizontalGridlines` [View] HTML `<ejs-diagram> <e-diagram-snapsettings horizontalGridlines="@ViewBag.gridLines"></e-diagram-snapsettings> </ejs-diagram>` [Model] HTML `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` [View] HTML `<ej-diagram> <e-snap-settings vertical-gridlines="@ViewBag.gridLines"></e-snap-settings> </ej-diagram>` [Model] HTML `List<decimal> lineInterval = new List<decimal>(); lineInterval.Add(1); lineInterval.Add(14); lineInterval.Add(0.5m); lineInterval.Add(14.5m); GridLines gridLines = new GridLines() { LinesInterval = lineInterval }; ViewBag.gridLines = gridLines;`	Property:`SnapSettings.VerticalGridLines` [View] HTML `<ejs-diagram> <e-diagram-snapsettings verticalGridlines="@ViewBag.gridLines"></e-diagram-snapsettings> </ejs-diagram>` [Model] HTML `double[] lineInterval = { 0.95, 9.05, 0.2, 9.75 }; DiagramGridlines gridlines = new DiagramGridlines() { LineIntervals = lineInterval }; ViewBag.lineInterval = lineInterval;`
Defines the angle by which the object needs to be snapped	Property:`SnapSettings.SnapAngle` HTML `<ej-diagram> <e-snap-settings snap-angle="5"></e-snap-settings> </ej-diagram>`	Property:`SnapSettings.SnapAngle` HTML `<ejs-diagram> <e-diagram-snapsettings snapAngle="5"></e-diagram-snapsettings> </ejs-diagram>`
Sets the minimum distance between the selected object and the nearest object	Property:`SnapSettings.SnapObjectDistance` HTML `<ej-diagram> <e-snap-settings snap-object-distance="5"></e-snap-settings> </ej-diagram>`	Property:`SnapSettings.SnapObjectDistance` HTML `<ejs-diagram> <e-diagram-snapsettings snapObjectDistance="5"></e-diagram-snapsettings> </ejs-diagram>`
Defines and sets the snapConstraints	Property:`SnapSettings.SnapConstraints` HTML `<ej-diagram> <e-snap-settings snap-constraints="ShowLines"></e-snap-settings> </ej-diagram>`	Property:`SnapSettings.Constraints` HTML `<ejs-diagram> <e-diagram-snapsettings constraints="ShowLines"></e-diagram-snapsettings> </ejs-diagram>`

## ZoomFactor </td>

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 zoom-factor="1"></ej-diagram>

Property:`ZoomFactor`

[View]

HTML

<ejs-diagram created="@ViewBag.created"></ejs-diagram>

HTML

function created() {
        diagram = document.getElementById("diagram").ej2_instances[0];
        var zoomIn = { type: 'ZoomIn', zoomFactor: 0.5 };
        diagram.ZoomTo(zoomIn);
    }

[Model]

HTML

ViewBag.created = created;

## Tool

behavior	API in Essential JS 1	API in Essential JS 2
Enables/Disables the interactive behaviors of diagram	Property:`Tool` HTML `<ej-diagram tool="ZoomPan"></ej-diagram>`	Property:`Tool` HTML `<ejs-diagram tool="ZoomPan"></ejs-diagram>`

## ShowTooltip

behavior	API in Essential JS 1	API in Essential JS 2
Enables or disables tooltip of diagram	Property:`ShowTooltip` HTML `<ej-diagram show-tooltip="true"></ej-diagram>`	Property:`Constraints` HTML `<ejs-diagram constraints="Tooltip"></ejs-diagram>`

## SelectedItems

behavior	API in Essential JS 1	API in Essential JS 2
A read only collection of the selected items	Property:`SelectedItems.Children` HTML `var diagram = $("#diagram").ejDiagram("instance"); for(var i =0; i< diagram.model.selectedItems.children.length; i++){ //Do your actions here }`	Not applicable
Controls the visibility of selector	Property:`SelectedItems.Constraints` HTML `<ej-diagram> <e-selected-items constraints="UserHandles"></e-selected-items> </ej-diagram>`	Property:`SelectedItems.Constraints` HTML `<ejs-diagram> <e-diagram-selecteditems constraints="UserHandle"></e-diagram-selecteditems> </ejs-diagram>`
Sets the angle to rotate the selected items	Property:`SelectedItems.Tooltip` HTML `<ej-diagram> <e-selected-items> <e-tooltip> <e-alignment horizontal="Left" vertical="Top"></e-alignment> </e-tooltip> </e-selected-items> </ej-diagram>`	Not applicable
A collection of frequently used commands that will be added around the selector	Property:`SelectedItems.UserHandles` HTML `var userHandle= []; var cloneHandle = ej.Datavisualization.Diagram.UserHandle(); userHandle.Push(cloneHandle); var diagram = $("#DiagramContent").EjDiagram("instance"); $("#diagramcontent").EjDiagram({ selectedItems: { userHandles:userHandle } });`	Property:`SelectedItems.UserHandles` HTML `<ejs-diagram> <e-diagram-selecteditems> <e-selector-userhandles> <e-selector-userhandle 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"></e-selector-userhandle> </e-selector-userhandles> </e-diagram-selecteditems> </ejs-diagram>`
Sets the horizontal alignment of the user handle	Property:`SelectedItems.UserHandles.HorizontalAlignment` HTML 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` HTML `<ejs-diagram> <e-diagram-selecteditems> <e-selector-userhandles> <e-selector-userhandle horizontalAlignment="Left"></e-selector-userhandle> </e-selector-userhandles> </e-diagram-selecteditems> </ejs-diagram>`
Defines the interactive behaviors of the user handle	Property:`SelectedItems.UserHandles.Tool` HTML 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` HTML `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` HTML `<ejs-diagram> <e-diagram-selecteditems> <e-selector-userhandles> <e-selector-userhandle displacement="30"></e-selector-userhandle> </e-selector-userhandles> </e-diagram-selecteditems> </ejs-diagram>`

## 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 `<ejs-diagram serializationSettings="@ViewBag.serializationSettings"></ejs-diagram>` [Model] HTML `SerializationSettings serializationSettings = new SerializationSettings() { PreventDefaultValues = true }; ViewBag.serializationSettings = serializationSettings;`	Not applicable

## How to load EJ1 diagram in EJ2 diagram To load EJ1 JSON data in an EJ2 diagram, follow these steps. 1. Import and inject the EJ1SerializationModule as shown in the following code example.

HTML

<ejs-diagram id="diagram" width="100%" height="550px" created="create" getNodeDefaults="@ViewBag.getNodeDefaults" getConnectorDefaults="@ViewBag.getConnectorDefaults">
     <e-diagram-layout type="MindMap" horizontalSpacing="50" getBranch="@ViewBag.getBranch" orientation="Horizontal"></e-diagram-layout>
   </ejs-diagram>

2. Load the EJ1 JSON data using the diagram loadDiagram method and set the second parameter to true.

HTML

function create(){
  var diagram = document.getElementById("diagram").ej2_instances[0];
  var ej1Data = {"JSONData"};  // Replace JSONData with your EJ1 JSON data
  //Load the EJ1 JSON and pass a boolean value as true.
  diagram.loadDiagram(ej1Data, true);
  }

## 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 `<script type="text/x-jsrender" id="mouseovertooltip"> <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px"> <span style="padding: 5px;"></span> </div> </script>` HTML `<ej-diagram> <e-tooltip template-id="mouseovertooltip"></e-tooltip> </ej-diagram>`	Property:`Tooltip` HTML `<ejs-diagram constraints="Tooltip"> <e-diagram-tooltip content="diagram"></e-diagram-tooltip> </ejs-diagram>`
Defines the alignment of tooltip	Property:`Tooltip.Alignment` HTML `<ej-diagram> <e-tooltip> <e-alignment horizontal="Left"></e-alignment> </e-tooltip> </ej-diagram>`	Not applicable
Sets the margin of the tooltip	Property:`Tooltip.Margin` HTML `<ej-diagram> <e-tooltip> <e-margin bottom="15" left="15" right="15" top="15"></e-margin> </e-tooltip> </ej-diagram>`	Not applicable
Sets the svg/html template to be bound with tooltip	Property:`Tooltip.TemplateId` HTML `<script type="text/x-jsrender" id="mouseovertooltip"> <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px"> <span style="padding: 5px;"> </span> </div> </script> <ej-diagram> <e-tooltip template-id="mouseovertooltip"></e-tooltip> </ej-diagram>`	Property:`Tooltip.Content` HTML `<ejs-diagram constraints="Tooltip"> <e-diagram-tooltip content="diagram"></e-diagram-tooltip> </ejs-diagram>`
Defines if the Tooltip has tip pointer or not	Not applicable	Property:`Tooltip.ShowTipPointer` HTML `<ejs-diagram constraints="Tooltip"> <e-diagram-tooltip showTipPointer="true"></e-diagram-tooltip> </ejs-diagram>`
Defines the position of the Tooltip	Not applicable	Property:`Tooltip.Position` HTML `<ejs-diagram constraints="Tooltip"> <e-diagram-tooltip position="TopLeft"></e-diagram-tooltip> </ejs-diagram>`