Search results

Migration from Essential JS 1

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

Background

Behaviour API in Essential JS 1 API in Essential JS 2
Defines how to align the background image over the diagram area Property:`BackgroundImage.Alignment`

<ej-diagram>
    <e-background-image alignment="XMidYMid"></e-background-image>
</ej-diagram>
Property:`Background.Align`
<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`
<ej-diagram>
    <e-background-image scale="Meet"></e-background-image>
</ej-diagram>
Property:`Background.Align`
<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`
<ej-diagram>
    <e-background-image source="../images/Employee/Artboard 13.Png"></e-background-image>
</ej-diagram>
Property:`Background.Source`
<ejs-diagram>
    <e-diagram-pagesettings>
        <e-pagesettings-background source="../images/Employee/Artboard 13.Png"></e-pagesettings-background>
    </e-diagram-pagesettings>
</ejs-diagram>

Bridging

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

CommandManager

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

<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>
<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]
<ejs-diagram commandManager="@ViewBag.commands"></ejs-diagram>
<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]
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`
<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>
<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]
<ejs-diagram commandManager="@ViewBag.commands"></ejs-diagram>
<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]
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

Behaviour API in Essential JS 1 API in Essential JS 2
Allows the user to save custom information/data about a connector Property:`Connector.AddInfo`

[View]
<ej-diagram>
    <e-connectors>
        <e-connector add-info="@ViewBag.addInfo"></e-connector>
    </e-connectors>
</ej-diagram>
[Model]
Dictionary<string, object> addInfo = new Dictionary<string, object>();
addInfo.Add("Description", "Bidirectional Flow");
ViewBag.addInfo = addInfo;
Property:`Connectors.AddInfo`

[View]
<ejs-diagram>
    <e-diagram-connectors>
        <e-diagram-connector addInfo="@ViewBag.addInfo"></e-diagram-connector>
    </e-diagram-connectors>
</ejs-diagram>
[Model]
Dictionary<string, object> addInfo = new Dictionary<string, object>();
addInfo.Add("Description", "Bidirectional Flow");
ViewBag.addInfo = addInfo;

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

<ej-diagram>
    <e-connectors>
        <e-connector bridge-space="15"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.BridgeSpace`

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

<ej-diagram>
    <e-connectors>
        <e-connector constraints="Bridging"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connector.Constraints`

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

<ej-diagram>
    <e-connectors>
        <e-connector corner-radius="5"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connector.CornerRadius`

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

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


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

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

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

<ej-diagram>
    <e-connectors>
        <e-connector line-color="bllue"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connector.Style.StrokeColor`

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

<ej-diagram>
    <e-connectors>
        <e-connector line-dash-array="2,2"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connector.Style.StrokeDashArray`

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

<ej-diagram>
    <e-connectors>
        <e-connector line-width="2"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connector.Style.StrokeWidth`

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

<ej-diagram>
    <e-connectors>
        <e-connector line-hit-padding="15"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.HitPadding`

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

<ej-diagram>
    <e-connectors>
        <e-connector name="connector"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.Id`

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

<ej-diagram>
    <e-connectors>
        <e-connector opacity="0.5"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.Style.Opacity`

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

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

<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]
<ejs-diagram>
    <e-diagram-connectors>
        <e-diagram-connector segments="@ViewBag.segments"></e-diagram-connector>
    </e-diagram-connectors>
</ejs-diagram>
[Model]
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`

<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]
<ejs-diagram>
    <e-diagram-connectors>
        <e-diagram-connector segments="@ViewBag.segments"></e-diagram-connector>
    </e-diagram-connectors>
</ejs-diagram>
[Model]
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`

<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]
<ejs-diagram>
    <e-diagram-connectors>
        <e-diagram-connector segments="@ViewBag.segments"></e-diagram-connector>
    </e-diagram-connectors>
</ejs-diagram>
[Model]
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`

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

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

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

<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.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
[Model]
List<Segment> segments = new List<Segment>();
segments.Add(new Segment() { Type = Segments.Bezier });
List<DiagramConnector> connectors = new List<DiagramConnector>();
connectors.Add(new DiagramConnector() { Segments = segments });
ViewBag.Connectors = connectors;

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

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

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

<ej-diagram>
    <e-connectors>
        <e-connector>
            <e-shape type="BPMN"></e-shape>
        </e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.Shape.Type`

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

<ej-diagram>
    <e-connectors>
        <e-connector>
            <e-source-decorator shape="Arrow"></e-source-decorator>
        </e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.SourceDecorator`

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

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

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

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

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

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

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

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

<ej-diagram>
    <e-connectors>
        <e-connector>
            <e-source-decorator height="10"></e-source-decorator>
        </e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.SourceDecorator.Height`

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

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

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

<ej-diagram>
    <e-connectors>
        <e-connector>
            <e-source-decorator shape="Arrow"></e-source-decorator>
        </e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.SourceDecorator.Shape`

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

<ej-diagram>
    <e-connectors>
        <e-connector>
            <e-source-decorator width="10"></e-source-decorator>
        </e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.SourceDecorator.Width`

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

<ej-diagram>
    <e-connectors>
        <e-connector source-node="source"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.SourceID`

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

<ej-diagram>
    <e-connectors>
        <e-connector source-padding="2"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.HitPadding`

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

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

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

<ej-diagram>
    <e-connectors>
        <e-connector source-port="sourceport"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.SourcePortID`

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

<ej-diagram>
    <e-connectors>
        <e-connector>
            <e-target-decorator shape="Arrow"></e-target-decorator>
        </e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.TargetDecorator`

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

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

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

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

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

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

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

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

<ej-diagram>
    <e-connectors>
        <e-connector>
            <e-target-decorator height="10"></e-target-decorator>
        </e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.TargetDecorator.Height`

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

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

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

<ej-diagram>
    <e-connectors>
        <e-connector>
            <e-target-decorator shape="Arrow"></e-target-decorator>
        </e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.TargetDecorator.Shape`

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

<ej-diagram>
    <e-connectors>
        <e-connector>
            <e-target-decorator width="10"></e-target-decorator>
        </e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.TargetDecorator.Width`

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

<ej-diagram>
    <e-connectors>
        <e-connector target-node="target"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.TargetID`

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

<ej-diagram>
    <e-connectors>
        <e-connector target-padding="2"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.HitPadding`

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

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

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

<ej-diagram>
    <e-connectors>
        <e-connector target-port="targetport"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.TargetPortID`

<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]
<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>

<ej-diagram>
    <e-connectors>
        <e-connector tooltip="@ViewBag.toolTip"></e-connector>
    </e-connectors>
</ej-diagram>
[Model]
Tooltip tooltip = new Tooltip() { TemplateId = "mouseovertooltip"};
ViewBag.tooltip = tooltip;
Property:`Connectors.Tooltip`

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

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

<ej-diagram>
    <e-connectors>
        <e-connector visible="true"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.Visible`

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

<ej-diagram>
    <e-connectors>
        <e-connector z-order="3"></e-connector>
    </e-connectors>
</ej-diagram>
Property:`Connectors.ZIndex`

<ejs-diagram>
    <e-diagram-connectors>
        <e-diagram-connector zIndex="3"></e-diagram-connector>
    </e-diagram-connectors>
</ejs-diagram>

ContextMenu

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

[View]
<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>
[Model]
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]
<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Text = "delete" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = "menuItems"
};
ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]
<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>
[Model]
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]
<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>
[Model]
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]
<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>
[Model]
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]
<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Id = "id" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = "menuItems"
};
ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]
<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>
[Model]
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]
<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Url = "Images/zoomin.Png" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = "menuItems"
};
ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]
<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>
[Model]
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]
<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { IconCss = "e-copy" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = "menuItems"
};
ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]
<ej-diagram context-menu="@ViewBag.contextMenu"></ej-diagram>
[Model]
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]
<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>
[Model]
List<ContextMenuItem> SubItems = new List<ContextMenuItem>();
SubItems.Add(new ContextMenuItem() { Id = "id" });
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Items = SubItems });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

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

<ej-diagram >
    <e-context-menu show-custom-menu-items-only="true"></e-context-menu>
</ej-diagram>
Property:`ContextMenuSettings.ShowCustomMenuOnly`

<ejs-diagram>
    <e-diagram-contextmenusettings showCustomMenuOnly="true"></e-diagram-contextmenusettings>
</ejs-diagram>
Specifies separator between the menu items Not applicable Property:`ContextMenuSettings.Items.Separator`

[View]
<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Separator = true });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]
<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings"></ejs-diagram>
[Model]
List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
menuItems.Add(new ContextMenuItem() { Target = ".E-diagramcontent" });
DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
{
    Items = menuItems
};
ViewBag.contextMenuSettings = contextMenuSettings;

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

<ejs-diagram contextMenuSettings="@ViewBag.contextMenuSettings">
    <e-diagram-contextmenusettings show="true"></e-diagram-contextmenusettings>
</ejs-diagram>

DataSourceSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Sets the unique id of the data source items Property:`DataSourceSettings.Id`

<ej-diagram>
    <e-datasource-settings  id="id"></e-datasource-settings>
</ej-diagram>
Property:`DataSourceSettings.Id`

<ejs-diagram>
    <e-diagram-datasourcesettings id="id"></e-diagram-datasourcesettings>
</ejs-diagram>

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

<ej-diagram>
    <e-datasource-settings parent="parent"></e-datasource-settings>
</ej-diagram>
Property:`DataSourceSettings.ParentId`

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

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

<ej-diagram>
    <e-datasource-settings root="E1"></e-datasource-settings>
</ej-diagram>
Property:`DataSourceSettings.Root`

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

<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]
<ej-diagram>
    <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings>
</ej-diagram>
[Model]
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`

<ej-diagram>
    <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings crud-action="@ViewBag.crudAction"></e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings custom-fields="@ViewBag.customFeilds"></e-datasource-settings>
</ej-diagram>
[Model]
List<string> customFeilds = new List<string>();
customFeilds.Add("Description");
customFeilds.Add("Color");
ViewBag.customFeilds = customFeilds;
Property:`DataSourceSettings.Data`

[View]
<ejs-diagram>
    <e-diagram-datasourcesettings data="@ViewBag.data"></e-diagram-datasourcesettings>
</ejs-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
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]
<ej-diagram>
    <e-datasource-settings connection-DataSource="@ViewBag.connectionDataSourceSettings">
    </e-datasource-settings>
</ej-diagram>
[Model]
List<string> customFeilds = new List<string>();
customFeilds.Add("Description");
customFeilds.Add("Color");

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings()
{
    CustomFields = customFeilds
};
ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;
Not applicable

DefaultSettings

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

<ej-diagram>
    <e-default-settings>
        <e-node border-color="black"></e-node>
    </e-default-settings>
</ej-diagram>
Property:`GetNodeDefaults`

[View]
<ejs-diagram getNodeDefaults="@ViewBag.getNodeDefaults"></ejs-diagram>
function getNodeDefaults(obj, diagram) {
    obj.Shape = { type: 'Basic' };
}
[Model]
ViewBag.getNodeDefaults = getNodeDefaults;

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

<ej-diagram>
    <e-default-settings>
        <e-connector constraints="Default &~ ConnectorConstraints.InheritTooltip"></e-connector>
    </e-default-settings>
</ej-diagram>
Property:`GetConnectorDefaults`

[View]
<ejs-diagram getConnectorDefaults="@ViewBag.getConnectorDefaults"></ejs-diagram>
function getConnectorDefaults(obj, diagram) {
    obj.Type = 'Bezier';
}
[Model]
ViewBag.getConnectorDefaults = getConnectorDefaults;

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

<ej-diagram>
    <e-default-settings>
        <e-group border-color="red"></e-group>
    </e-default-settings>
</ej-diagram>
Not applicable

DrawType

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

[View]
<ej-diagram create="@ViewBag.create"></ej-diagram>
<script>
    function create(args) {
        var diagram = $("#diagram").ejDiagram("instance");
        diagram.model.drawType = { type: "node" };
    }
</script>
[Model]
ViewBag.create = "create";
Property:`DrawingObject`

[View]
<ejs-diagram created="@ViewBag.created"></ejs-diagram>
function created() {
    diagram = document.getElementById("diagram").ej2_instances[0];
    diagram.drawingObject = { shape: { type: 'Basic', shape: 'Rectangle' } };
    diagram.dataBind();
}
[Model]
ViewBag.created = created;

EnableAutoScroll

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

<ej-diagram enable-auto-scroll="true"></ej-diagram>
Property:`CanAutoScroll`

<ejs-diagram>
    <e-diagram-scrollsettings canAutoScroll="true"></e-diagram-scrollsettings>
</ejs-diagram>
[Model]

EnableContextMenu

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

<ej-diagram enable-context-menu="true"></ej-diagram>
Property:`ContextMenuSettings.Show`

<ejs-diagram>
    <e-diagram-contextmenusettings show="true"></e-diagram-contextmenusettings>
</ejs-diagram>

GetCustomCursor

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

[View]
<ejs-diagram getCustomCursor="@ViewBag.getCustomCursor"></ejs-diagram>
function getCustomCursor(action, active) {
    var cursor;
    if (active && action === 'Drag') {
        cursor = '-webkit-grabbing';
    } else if (action === 'Drag') {
        cursor = '-webkit-grabbing'
    }
    return cursor;
}
[Model]
ViewBag.getCustomCursor = "getCustomCursor";

GetCustomProperty

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

<ejs-diagram getCustomProperty="@ViewBag.getCustomProperty"></ejs-diagram>
function getCustomProperty(key: string) {
    if (key === 'nodes') {
        return ['description'];
        }
    return null;
}
[Model]
ViewBag.getCustomProperty = "getCustomProperty";

GetDescription

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

<ejs-diagram getDescription="@ViewBag.getAccessibility"></ejs-diagram>
function getAccessibility(object, diagram) {
    var value;
    if (object instanceof Connector) {
        value = 'clicked on Connector';
    } else {
        value = undefined;
    }
    return value;
}
[Model]
ViewBag.getAccessibility = "getAccessibility";

GetCustomTool

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

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

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

Height

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

<ej-diagram height="500px"></ej-diagram>
Property:`Height`

<ejs-diagram height="500px"></ejs-diagram>

HistoryManager

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

<script>
    var diagram = $("#diagram").ejDiagram("instance");
    var entry = { object: node, prevState: node.EmpInfo };
    diagram.model.historyManager.push(entry);
    var value = { role: "New role" };
    node.EmpInfo = value;
    if(diagram.model.historyManager.canPop(entry)){
        diagram.model.historyManager.pop();
    }
</script>
Not applicable
A method that ends grouping the changes Property:`HistoryManager.CloseGroupAction`

<script>
    var 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();
</sccript>
Property:`HistoryList.EndGroupAction`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    var objects = [];
    objects.Push(diagram.nodes[0], diagram.nodes[1], diagram.Connectors[0]);
    diagram.historyList.startGroupAction();
    diagram.distribute('Top', objects);
    diagram.distribute('Bottom', objects);
    diagram.distribute('BottomToTop', objects);
    diagram.historyList.endGroupAction();
</script>

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

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

<script>
    var diagram = $("#diagram").ejDiagram("instance");
    var entry = { object: node, prevState: node.EmpInfo };
    diagram.model.historyManager.push(entry);
    var value = { role: "New role" };
    node.EmpInfo = value;
</script>
Property:`HistoryList.Push`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    var object = diagram.nodes[0];
    object['description'] = (document.getElementById('custom') as HTMLSelectElement).value;
    var entry = { undoObject: object };
    diagram.historyList.Push(entry);
    diagram.dataBind();
</script>

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

[View]
<ej-diagram>
    <e-history-manager redo="@ViewBag.customUndoRedo"></e-history-manager>
</ej-diagram>
function customUndoRedo(args) {
    var diagram = $("#diagram").ejDiagram("instance");
    var node = args.object;
    var currentState = node.EmpInfo;
    node.EmpInfo = args.PrevState;
    args.PrevState = currentState;
}
[Model]
ViewBag.customUndoRedo = "customUndoRedo";
Property:`HistoryList.Redo`

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

<script>
    var diagram = $("#diagram").ejDiagram("instance");
    diagram.model.historyManager.redoStack();
</script>
Property:`HistoryList.RedoStack`

<script>
    var diagram = document.getElementById("container").ej2_instances[0];
    diagram.appendTo('#diagram');
    diagram.historyList.redoStack();
</script>

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

<script>
    var diagram = $("#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`

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

<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]
<ej-diagram>
    <e-history-manager undo="@ViewBag.customUndoRedo"></e-history-manager>
</ej-diagram>
<script>
    function customUndoRedo(args) {
        var diagram = $("#diagram").ejDiagram("instance");
        var node = args.Object;
        var currentState = node.EmpInfo;
        node.EmpInfo = args.PrevState;
        args.PrevState = currentState;
    }
</script>
[Model]
ViewBag.customUndoRedo = "customUndoRedo";
Property:`HistoryList.Undo`

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

<script>
    var diagram = $("#diagram").ejDiagram("instance");
    diagram.model.historyManager.undoStack();
</script>
Property:`HistoryList.UndoStack`

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

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

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

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

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

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

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

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

var diagram = $("#diagram").ejDiagram("instance");
diagram.model.historyManager.canLog();
Property:`HistoryList.CanLog`

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

Layout

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

[View]
<ej-diagram>
    <e-layout bounds="@ViewBag.getBounds"></e-layout>
</ej-diagram>
<script>
    function getBounds() {
        var bounds = { X = 10, Y = 10, Width = 100, Height = 100 };
        return bounds;
    }
</script>
[Model]
ViewBag.getBounds = "getBounds";

Property:`Layout.Bounds`

[View]
<ejs-diagram>
    <e-diagram-layout bounds="@ViewBag.getBounds"></e-diagram-layout>
</ejs-diagram>
<script>
    function getBounds() {
        var bounds = { X = 10, Y = 10, Width = 100, Height = 100 };
        return bounds;
    }
</script>
[Model]
ViewBag.getBounds = "getBounds";

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

<ej-diagram>
    <e-layout fixed-node="nodeName"></e-layout>
</ej-diagram>
Property:`Layout.FixedNode`

<ejs-diagram>
    <e-diagram-layout fixedNode="nodeId"></e-diagram-layout>
</ejs-diagram>

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

[View]
<ej-diagram>
    <e-layout getLayoutInfo="@ViewBag.getLayoutInfo"></e-layout>
</ej-diagram>
<script>
    function getLayoutInfo(diagram, node, options) {
        options.Orientation = "vertical";
        options.Type = "left"; offset = 10;
    };
</script>
[Model]
ViewBag.getLayoutInfo = "getLayoutInfo";
Property:`Layout.GetLayoutInfo`

[View]
<ejs-diagram>
    <e-diagram-layout getLayoutInfo="@ViewBag.getLayoutInfo"></e-diagram-layout>
</ejs-diagram>
<script>
    function getLayoutInfo(node, options) {
        if (node.Data.Role === 'General Manager') {
            options.Assistants.Push(options.Children[0]);
            options.Children.Splice(0, 1);
        }
        if (!options.HasSubTree) {
            options.Type = 'Right';
        }
    }
</script>
[Model]
ViewBag.getLayoutInfo = "getLayoutInfo";

Defines a method to customize the segments based on source and target nodes Property:`Layout.GetConnectorSegments`

[View]
<ej-diagram>
    <e-layout getConnectorSegments="@ViewBag.getConnectorSegments"></e-layout>
</ej-diagram>
[Model]
ViewBag.getConnectorSegments = "getConnectorSegments";
Property:`Layout.ConnectorSegments`

<ejs-diagram>
    <e-diagram-layout connectorSegments="Default"></e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout horizontal-spacing="50"></e-layout>
</ej-diagram>
Property:`Layout.HorizontalSpacing`

<ejs-diagram>
    <e-diagram-layout horizontalSpacing="50"></e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout >
        <e-margin left="15" bottom="15" right="15" top="15"></e-margin>
    </e-layout>
</ej-diagram>
Property:`Layout.Margin`

<ejs-diagram>
    <e-diagram-layout>
        <e-layout-margin bottom="15" left="15" right="15" top="15"></e-layout-margin>
    </e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout horizontal-alignment="Left"></e-layout>
</ej-diagram>
Property:`Layout.HorizontalAlignment`

<ejs-diagram>
    <e-diagram-layout horizontalAlignment="Left"></e-diagram-layout>
</ejs-diagram>
Defines how to vertically align the layout within the layout bounds Property:`Layout.VerticalAlignment`

<ej-diagram>
    <e-layout vertical-alignment="Bottom"></e-layout>
</ej-diagram>
Property:`Layout.VerticalAlignment`

<ejs-diagram>
    <e-diagram-layout verticalAlignment="Bottom"></e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout orientation="TopToBottom"></e-layout>
</ej-diagram>
Property:`Layout.Orientation`

<ejs-diagram>
    <e-diagram-layout orientation="TopToBottom"></e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout type="OrganizationalChart"></e-layout>
</ej-diagram>
Property:`Layout.Type`

<ejs-diagram>
    <e-diagram-layout type="OrganizationalChart"></e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout vertical-spacing="50"></e-layout>
</ej-diagram>
Property:`Layout.VerticalSpacing`

<ejs-diagram>
    <e-diagram-layout verticalSpacing="50"></e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout root="nodeName"></e-layout>
</ej-diagram>
Property:`Layout.Root`

<ejs-diagram>
    <e-diagram-layout root="nodeId"></e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout spring-factor="0.4F"></e-layout>
</ej-diagram>
Property:`Layout.SpringFactor`

<ejs-diagram>
    <e-diagram-layout springFactor="0.4"></e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout max-iteration="50"></e-layout>
</ej-diagram>
Property:`Layout.MaxIteration`

<ejs-diagram>
    <e-diagram-layout maxIteration="50"></e-diagram-layout>
</ejs-diagram>

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

<ej-diagram>
    <e-layout spring-length="80"></e-layout>
</ej-diagram>
Property:`Layout.SpringLength`

<ejs-diagram>
    <e-diagram-layout springLength="80"></e-diagram-layout>
</ejs-diagram>

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

<ejs-diagram>
    <e-diagram-layout connectionDirection="Auto"></e-diagram-layout>
</ejs-diagram>

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

<ejs-diagram>
    <e-diagram-layout enableAnimation="true"></e-diagram-layout>
</ejs-diagram>

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

[View]
<ejs-diagram>
    <e-diagram-layout getBranch="@ViewBag.getBranch"></e-diagram-layout>
</ejs-diagram>
function getBranch(node, nodes) {
    return node.Data.Branch;
}
[Model]
ViewBag.getBranch = "getBranch";

Nodes

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

<ej-diagram>
    <e-nodes>
        <e-node name="nodeName"></e-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes`

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

<ej-diagram>
    <e-nodes>
        <e-bpmn-node activity="SubProcess"></e-bpmn-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Shape.Activity`

<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]
<ej-diagram>
    <e-nodes>
        <e-node addInfo="@ViewBag.addInfo"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
Dictionary<string, object> addInfo = new Dictionary<string, object>();
addInfo.Add("Description", "Bidirectional Flow");
ViewBag.addInfo = addInfo;
Property:`Nodes.AddInfo`

[View]
<ejs-diagram>
    <e-diagram-nodes>
        <e-diagram-node addInfo="@ViewBag.addInfo"></e-diagram-node>
    </e-diagram-nodes>
</ejs-diagram>
[Model]
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`

<ej-diagram>
    <e-nodes>
        <e-bpmn-node>
            <e-annotation text="text"></e-annotation>
        </e-bpmn-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Shape.Annotations`

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

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

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

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

<ej-diagram>
    <e-nodes>
        <e-bpmn-node>
            <e-annotation height="50"></e-annotation>
        </e-bpmn-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Annotation.Height`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    Shape = IconShapes.ArrowDown
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon`

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    BorderColor = "red"
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon.BorderColor`

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    BorderWidth = 2
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon.BorderWidth`

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    FillColor = "red"
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon.Fill`

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    Height = 10
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon.Height`

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    HorizontalAlignment = HorizontalAlignment.Left
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon.HorizontalAlignment`

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    Margin = { Bottom = 15, Left = 15, Right = 15, Top = 15}
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon.Margin`

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    Offset = { X = 0.5F, Y = 0.5F }
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon.Offset`

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    Shape = IconShapes.ArrowDown
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon.Shape`

<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]
<ej-diagram>
    <e-nodes>
        <e-node collapse-icon="@ViewBag.collapseIcon"></e-node>
    </e-nodes>
</ej-diagram>
[Model]
DiagramIcon collapseIcon = new DiagramIcon()
{
    VerticalAlignment = VerticalAlignment.Top
};
ViewBag.collapseIcon = collapseIcon;
Property:`Nodes.CollapseIcon.VerticalAlignment `

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

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

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

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

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

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

<ej-diagram>
    <e-nodes>
        <e-node constraints="Default"></e-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Constraints`

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

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

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

<ej-diagram>
    <e-nodes>
        <e-basic-shape corner-radius="5"></e-basic-shape>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Shapes.CornerRadius`

<ejs-diagram>
    <e-diagram-nodes>
        <e-diagram-node>
            <e-node-shape cornerRadius="5"></e-node-shape>
        </e-diagram-node>
    </e-diagram-nodes>
</ejs-diagram>
This property allows you to customize nodes appearance using user-defined CSS Property:`Nodes.CssClass`

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

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

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

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

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

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

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

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

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

<ej-diagram>
    <e-nodes>
        <e-bpmn-node event="Intermediate"></e-bpmn-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Shape.Event`

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

<ej-diagram>
    <e-nodes>
        <e-bpmn-node shape="Event" trigger="None"></e-bpmn-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Shape.Event.Trigger`

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

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

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

<ej-diagram>
    <e-nodes>
        <e-node fill-color="red"></e-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Style.Fill`

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

<ej-diagram>
    <e-nodes>
        <e-bpmn-node shape="Gateway" gateway="Exclusive"></e-bpmn-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Shape.Gateway`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<ej-diagram>
    <e-nodes>
        <e-node height="100"></e-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Height`

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

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

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

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

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

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

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

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

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

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

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

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

<ej-diagram>
    <e-nodes>
        <e-node is-expanded="true"></e-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.IsExpanded`

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

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

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

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

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

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

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

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

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

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

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

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

<ej-diagram>
    <e-nodes>
        <e-node max-height="200"></e-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.MaxHeight`

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

<ej-diagram>
    <e-nodes>
        <e-node name="nodeName"></e-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Id`

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

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

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

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

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

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

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

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

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

<ej-diagram>
    <e-nodes>
        <e-node>
            <e-pivot x="0" y="0"></e-pivot>
        </e-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Pivot`

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

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

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

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

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

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

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

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

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

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

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

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

<ej-diagram>
    <e-nodes>
        <e-node>
            <e-shadow opacity="0.5F"></e-shadow>
        </e-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Shadow`

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

<ej-diagram>
    <e-nodes>
        <e-bpmn-node shape="Activity" activity="SubProcess"></e-bpmn-node>
    </e-nodes>
</ej-diagram>
Property:`Nodes.Shape.Activity.SubProcess`

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

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

<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]
<ej-diagram>
    <e-nodes>
        <e-bpmn-node activity="SubProcess">
            <e-subProcess events="@ViewBag.events">
            </e-subProcess>
        </e-bpmn-node>
    </e-nodes>
</ej-diagram>
[Model]
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`

<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]
<ej-diagram>
    <e-nodes>
        <e-bpmn-node activity="SubProcess">
            <e-subProcess events="@ViewBag.events">
            </e-subProcess>
        </e-bpmn-node>
    </e-nodes>
</ej-diagram>
[Model]
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`

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

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

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

NodeTemplate

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

[View]
<ej-diagram node-template="@ViewBag.nodeTemplate"></ej-diagram>
<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]
ViewBag.nodeTemplate = nodeTemplate;

Property:`SetNodeTemplate`

[View]
<ejs-diagram setNodeTemplate="@ViewBag.setNodeTemplate"></ejs-diagram>
<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]
ViewBag.setNodeTemplate = "setNodeTemplate";

Layers

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

<ej-diagram>
    <e-diagram-layers>
        <e-diagram-layer name="name"></e-diagram-layer>
    </e-diagram-layers>
</ej-diagram>
Property:`Layers`

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

<ej-diagram>
    <e-diagram-layers>
        <e-diagram-layer print="true"></e-diagram-layer>
    </e-diagram-layers>
</ej-diagram>
Not applicable

Annotations

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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

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

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

<ej-diagram>
    <e-page-settings multiple-page="true"></e-page-settings>
</ej-diagram>
Property:`PageSettings.MultiplePage`

<ejs-diagram>
    <e-diagram-pagesettings multiplePage="false"></e-diagram-pagesettings>
</ejs-diagram>

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

<ej-diagram>
    <e-page-settings page-background-color="grey"></e-page-settings>
</ej-diagram>
Property:`PageSettings.Background.Color`

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

<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]
<ejs-diagram>
    <e-diagram-scrollsettings scrollableArea="@ViewBag.getScrollableArea"></e-diagram-scrollsettings>
</ejs-diagram>
<script>
    function getScrollableArea() {
        var scrollableArea = { X = 0, Y = 0, Width = 300, Height = 300 };
        return scrollableArea;
    }
</script>
[Model]
ViewBag.getScrollableArea = "getScrollableArea";

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

<ej-diagram>
    <e-page-settings boundary-constraints="Diagram"></e-page-settings>
</ej-diagram>
Property:`PageSettings.BoundaryConstraints`

<ejs-diagram>
    <e-diagram-pagesettings boundaryConstraints="Diagram"></e-diagram-pagesettings>
</ejs-diagram>

ScrollSettings

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

<ej-diagram>
    <e-scroll-settings horizontal-offset="300"></e-scroll-settings>
</ej-diagram>
Property:`ScrollSettings.HorizontalOffset`

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

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

<ejs-diagram>
    <e-diagram-scrollsettings maxZoom="5"></e-diagram-scrollsettings>
</ejs-diagram>

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

<ejs-diagram>
    <e-diagram-scrollsettings canAutoScroll="true"></e-diagram-scrollsettings>
</ejs-diagram>

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

[View]
<ejs-diagram>
    <e-diagram-scrollsettings scrollableArea="@ViewBag.getScrollableArea"></e-diagram-scrollsettings>
</ejs-diagram>
<script>
    function getScrollableArea() {
        var scrollableArea = { X = 0, Y = 0, Width = 300, Height = 300 };
        return scrollableArea;
    }
</script>
[Model]
ViewBag.getScrollableArea = "getScrollableArea";

SnapSettings

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

<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]
<ej-diagram>
    <e-snap-settings horizontal-gridlines="@ViewBag.gridLines"></e-snap-settings>
</ej-diagram>
[Model]
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]
<ejs-diagram>
    <e-diagram-snapsettings horizontalGridlines="@ViewBag.gridLines"></e-diagram-snapsettings>
</ejs-diagram>
[Model]
double[] intervals = { 0.95, 9.05, 0.2, 9.75 };
DiagramSnapSettings snapSettings = new DiagramSnapSettings();
snapSettings.HorizontalGridlines = new DiagramGridlines() {
    LineIntervals = intervals
};
ViewBag.SnapSettings = snapSettings;

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

[View]
<ej-diagram>
    <e-snap-settings vertical-gridlines="@ViewBag.gridLines"></e-snap-settings>
</ej-diagram>
[Model]
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]
<ejs-diagram>
    <e-diagram-snapsettings verticalGridlines="@ViewBag.gridLines"></e-diagram-snapsettings>
</ejs-diagram>
[Model]
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`

<ej-diagram>
    <e-snap-settings snap-angle="5"></e-snap-settings>
</ej-diagram>
Property:`SnapSettings.SnapAngle`

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

<ej-diagram>
    <e-snap-settings snap-object-distance="5"></e-snap-settings>
</ej-diagram>
Property:`SnapSettings.SnapObjectDistance`

<ejs-diagram>
    <e-diagram-snapsettings snapObjectDistance="5"></e-diagram-snapsettings>
</ejs-diagram>

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

<ej-diagram>
    <e-snap-settings snap-constraints="ShowLines"></e-snap-settings>
</ej-diagram>
Property:`SnapSettings.Constraints`

<ejs-diagram>
    <e-diagram-snapsettings constraints="ShowLines"></e-diagram-snapsettings>
</ejs-diagram>

ZoomFactor

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

<ej-diagram zoom-factor="1"></ej-diagram>
Property:`ZoomFactor`

[View]
<ejs-diagram created="@ViewBag.created"></ejs-diagram>
function created() {
    diagram = document.getElementById("diagram").ej2_instances[0];
    var zoomin = { type: 'ZoomIn', zoomFactor: 0.5 };
    diagram.ZoomTo(zoomin);
}
[Model]
ViewBag.created = created;

Tool

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

<ej-diagram tool="ZoomPan"></ej-diagram>
Property:`Tool`

<ejs-diagram tool="ZoomPan"></ejs-diagram>

ShowTooltip

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

<ej-diagram show-tooltip="true"></ej-diagram>
Property:`Constraints`

<ejs-diagram constraints="Tooltip"></ejs-diagram>

SelectedItems

Behaviour API in Essential JS 1 API in Essential JS 2
A read only collection of the selected items Property:`SelectedItems.Children`
var diagram = $("#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`

<ej-diagram>
    <e-selected-items constraints="UserHandles"></e-selected-items>
</ej-diagram>
Property:`SelectedItems.Constraints`

<ejs-diagram>
    <e-diagram-selecteditems constraints="UserHandle"></e-diagram-selecteditems>
</ejs-diagram>

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

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

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

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

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`

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

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

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

<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

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

[View]
<ejs-diagram serializationSettings="@ViewBag.serializationSettings"></ejs-diagram>
[Model]
SerializationSettings serializationSettings = new SerializationSettings()
{
    PreventDefaultValues = true
};
ViewBag.serializationSettings = serializationSettings;
Not applicable

Tooltip

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

<script type="text/x-jsrender" id="mouseovertooltip">
    <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
        <span style="padding: 5px;"></span>
    </div>
</script>
<ej-diagram>
    <e-tooltip template-id="mouseovertooltip"></e-tooltip>
</ej-diagram>
Property:`Tooltip`

<ejs-diagram constraints="Tooltip">
    <e-diagram-tooltip content="diagram"></e-diagram-tooltip>
</ejs-diagram>

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

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

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

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

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

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

<ejs-diagram constraints="Tooltip">
    <e-diagram-tooltip position="TopLeft"></e-diagram-tooltip>
</ejs-diagram>