Migration from Essential JS 1

23 Jun 202324 minutes to read

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

Background

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

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

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

    Bridging

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

    CommandManager

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").CommandManager(ViewBag.commandManager).Render()
    [Model]
  • HTML
    • List<DiagramCommand> commands = new List<DiagramCommand>();
    commands.Add(new DiagramCommand() { Name = "customCopy" });
    DiagramCommandManager commandManager = new DiagramCommandManager()
    {
        Commands = commands
    };
    ViewBag.commandManager = commandManager;
    Defines any additional parameters that are required at runtime Property:`CommandManager.Commands.Parameter` [View]
  • HTML
    • @Html.EJ().Diagram("diagram", ViewData["diagramModel"] as Syncfusion.JavaScript.DataVisualization.Models.DiagramProperties);
  • HTML
    • function canExecute(args) {
        var diagram = $("#DiagramContent").EjDiagram("instance");
        return diagram.Model.SelectedItems.Children.Length;
    }
    function execute(args) {
        var diagram = $("#DiagramContent").EjDiagram("instance");
        diagram.Copy();
        diagram.Paste();
    }
    [Model]
  • HTML
    • DiagramProperties Model = new DiagramProperties();
    Command clone = new Command() {
        parameter : "node", Execute = "executeClone", CanExecute = "canExecuteClone",
        Gesture = new Gesture() { Key = Keys.C, KeyModifiers = KeyModifiers.Shift }
    };
    Model.CommandManager.Commands.Add("clone", clone);
    ViewData["diagramModel"] = Model;
    		 Property:`CommandManager.Commands.Parameter`

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

    Connectors

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • Dictionary<string, object> AddInfo = new Dictionary<string, object>();
    AddInfo.Add("Description", "Bidirectional Flow");
    List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { AddInfo = AddInfo });
    ViewBag.Connectors = connectors;
    Defines the bridgeSpace of connector Property:`Connector.BridgeSpace`

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Constraints = ConnectorConstraints.Bridging });
    ViewBag.Connectors = connectors;
    Defines the radius of the rounded corner Property:`Connector.CornerRadius`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { CornerRadius = 5});
    ViewBag.Connectors = connectors;
    Customize connectors appearance using user-defined CSS Property:`Connector.CssClass`

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnectorAnnotation> annotation = new List<DiagramConnectorAnnotation>();
    annotation.Add(new DiagramConnectorAnnotation() { Content = "connector" });
    List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Annotations =  annotation});
    ViewBag.Connectors = connectors;
    Stroke color of the connector Property:`Connector.LineColor`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Style = { StrokeColor = "blue" }});
    ViewBag.Connectors = connectors;
    Sets the pattern of dashes and gaps used to stroke the path of the connector Property:`Connector.LineDashArray`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() {  Style = { StrokeDashArray= "2, 2" }});
    ViewBag.Connectors = connectors;
    Sets the width of the line Property:`Connector.LineWidth`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() {  Style = { StrokeWidth = 2 }});
    ViewBag.Connectors = connectors;
    Defines the padding value to ease the interaction with connectors Property:`Connector.LineHitPadding`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { HitPadding = 20 });
    ViewBag.Connectors = connectors;
    Sets a unique name for the connector Property:`Connector.Name`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Id = "connector1" });
    ViewBag.Connectors = connectors;
    Defines the transparency of the connector Property:`Connector.Opacity`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Style = { Opacity = 0.5} });
    ViewBag.Connectors = connectors;
    Sets the parent name of the connector. Property:`Connector.Parent`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<Segment> segments = new List<Segment>();
    segments.Add(new Segment() { Type = Segments.Orthogonal });
    List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Segments = segments });
    ViewBag.Connectors = connectors;
    Sets the direction of orthogonal segment Property:`Connector.Segments.Direction`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<Segment> segments = new List<Segment>();
    segments.Add(new Segment() { Direction = "Bottom" });
    List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Segments = segments });
    ViewBag.Connectors = connectors;
    Describes the length of orthogonal segment Property:`Connector.Segments.Length`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<Segment> segments = new List<Segment>();
    segments.Add(new Segment() { Length=30 });
    List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Segments = segments });
    ViewBag.Connectors = connectors;
    Describes the end point of bezier/straight segment Property:`Connector.Segments.Point`

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

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<Segment> segments = new List<Segment>();
    segments.Add(new Segment() { Type = Segments.Bezier });
    List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Segments = segments });
    ViewBag.Connectors = connectors;
    Describes the length and angle between the first control point and the start point of bezier segment Property:`Connector.Segments.Vector1`

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Shape= new BpmnConnectors() { Type = "Bpmn" } });
    ViewBag.Connectors = connectors;
    Defines the source decorator of the connector Property:`Connector.SourceDecorator`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () { Shape = DecoratorShapes.OpenArrow } } });
    ViewBag.Connectors = connectors;
    Sets the border color of the source decorator Property:`Connector.SourceDecorator.BorderColor`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () {  Style = { StrokeColor="green" } } });
    ViewBag.Connectors = connectors;
    Sets the border width of the decorator Property:`Connector.SourceDecorator.BorderWidth`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () { Style = { StrokeWidth=2 } } });
    ViewBag.Connectors = connectors;
    Defines to customize sourceDecorator appearance using user-defined CSS Property:`Connector.SourceDecorator.CssClass`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Width("1000").Height("645px").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () {  Style = { Fill= "red" } } });
    ViewBag.Connectors = connectors;
    Sets the height of the source decorator Property:`Connector.SourceDecorator.Height`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () {  Height=10 } });
    ViewBag.Connectors = connectors;
    Defines the custom shape of the source decorator Property:`Connector.SourceDecorator.PathData`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() {  SourceDecorator = new DiagramDecorator () { Shape = DecoratorShapes.Custom, PathData= "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" } });
    ViewBag.Connectors = connectors;
    Defines the shape of the source decorator. Property:`Connector.SourceDecorator.Shape`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { SourceDecorator = new DiagramDecorator () { Shape = DecoratorShapes.OpenArrow } });
    ViewBag.Connectors = connectors;
    Defines the width of the source decorator Property:`Connector.SourceDecorator.Width`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() {  SourceDecorator = new DiagramDecorator () { Width=10 } });
    ViewBag.Connectors = connectors;
    Sets the source node of the connector Property:`Connector.SourceNode`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { SourceID="source" } });
    ViewBag.Connectors = connectors;
    Defines the space to be left between the source node and the source point of a connector Property:`Connector.SourcePadding`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() {HitPadding=2 });
    ViewBag.Connectors = connectors;
    Describes the start point of the connector Property:`Connector.SourcePoint`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { SourcePoint = { X= 100, Y=100} } });
    ViewBag.Connectors = connectors;
    Sets the source port of the connector Property:`Connector.SourcePort`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() {  SourceID="source", SourcePortID="sourcePortId" });
    ViewBag.Connectors = connectors;
    Defines the target decorator of the connector Property:`Connector.TargetDecorator`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Shape = DecoratorShapes.OpenArrow } });
    ViewBag.Connectors = connectors;
    Sets the border color of the target decorator Property:`Connector.TargetDecorator.BorderColor`

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

  • HTML
    • <b>[View]</b>

    @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Style = { StrokeColor="green" } } });
    ViewBag.Connectors = connectors;
    Sets the border width of the decorator Property:`Connector.TargetDecorator.BorderWidth`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Style = { StrokeWidth=2 } }});
    ViewBag.Connectors = connectors;
    Defines to customize target Decorator appearance using user-defined CSS Property:`Connector.TargetDecorator.CssClass`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Style = {Fill= "red" }} });
    ViewBag.Connectors = connectors;
    Sets the height of the target decorator Property:`Connector.TargetDecorator.Height`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Width("1000").Height("645px").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Height=10 } });
    ViewBag.Connectors = connectors;
    Defines the custom shape of the target decorator Property:`Connector.TargetDecorator.PathData`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Shape = DecoratorShapes.Custom, PathData= "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" } });
    ViewBag.Connectors = connectors;
    Defines the shape of the target decorator. Property:`Connector.TargetDecorator.Shape`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Width("1000").Height("645px").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Shape = DecoratorShapes.OpenArrow } });
    ViewBag.Connectors = connectors;
    Defines the width of the target decorator Property:`Connector.TargetDecorator.Width`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { Width=10 } });
    ViewBag.Connectors = connectors;
    Sets the target node of the connector Property:`Connector.TargetNode`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() {  TargetID="target" });
    ViewBag.Connectors = connectors;
    Defines the space to be left between the target node and the target point of a connector Property:`Connector.TargetPadding`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetDecorator = new DiagramDecorator () { HitPadding = 2 });
    ViewBag.Connectors = connectors;
    Describes the start point of the connector Property:`Connector.TargetPoint`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { TargetPoint = { X = 200, Y = 200 } } });
    ViewBag.Connectors = connectors;
    Sets the target port of the connector Property:`Connector.TargetPort`

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

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

  • HTML
    • <script type="text/x-jsrender" id="mouseovertooltip"><br>
        <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px"><br>
            <span style="padding: 5px;">  </span><br>
        </div><br>
    </script>
<br>

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Constraints=ConnectorConstraints.Default | ConnectorConstraints.Tooltip, Tooltip = { Content = "Connector" } });
    ViewBag.Connectors = connectors;
    Sets the vertical alignment of connector Property:`Connector.VerticalAlign`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { Visible = true });
    ViewBag.Connectors = connectors;
    Sets the z-index of the connector Property:`Connector.ZOrder`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Connectors(ViewBag.Connectors).Render()
    [Model]
  • HTML
    • List<DiagramConnector> connectors = new List<DiagramConnector>();
    connectors.Add(new DiagramConnector() { ZIndex = -1 });
    ViewBag.Connectors = connectors;
    Enables/Disables the default behaviors of the diagram Property:`Constraints`

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

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

    ContextMenu

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
    [Model]
  • HTML
    • List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
    menuItems.Add(new ContextMenuItem() { Text = "delete" });
    DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
    {
        Items = menuItems
    };
    ViewBag.contextMenuSettings = contextMenuSettings;
    Defines the text for the collection of context menu item Property:`ContextMenu.Items.Text`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
    [Model]
  • HTML
    • List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
    menuItems.Add(new ContextMenuItem() { Text = "delete" });
    DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
    {
        Items = menuItems
    };
    ViewBag.contextMenuSettings = contextMenuSettings;
    Defines the name for the collection of context menu items Property:`ContextMenu.Items.Name`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
    [Model]
  • HTML
    • List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
    menuItems.Add(new ContextMenuItem() { Id = "id" });
    DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
    {
        Items = menuItems
    };
    ViewBag.contextMenuSettings = contextMenuSettings;
    Defines the image url for the collection of context menu items Property:`ContextMenu.Items.ImageUrl`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
    [Model]
  • HTML
    • List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
    menuItems.Add(new ContextMenuItem() { Url = "Images/zoomIn.Png" });
    DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
    {
        Items = menuItems
    };
    ViewBag.contextMenuSettings = contextMenuSettings;
    Defines the cssClass for the collection of context menu items Property:`ContextMenu.Items.CssClass`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
    [Model]
  • HTML
    • List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
    menuItems.Add(new ContextMenuItem() { IconCss = "e-copy" });
    DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
    {
        Items = menuItems
    };
    ViewBag.contextMenuSettings = contextMenuSettings;
    Defines the collection of sub items for the context menu items Property:`ContextMenu.Items.SubItems`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
    [Model]
  • HTML
    • List<ContextMenuItem> SubItems = new List<ContextMenuItem>();
    SubItems.Add(new ContextMenuItem() { Id = "id" });
    List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
    menuItems.Add(new ContextMenuItem() { Items = SubItems });
    DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
    {
        Items = menuItems
    };
    ViewBag.contextMenuSettings = contextMenuSettings;
    Set whether to display the default context menu items or not Property:`ContextMenu.ShowCustomMenuItemsOnly`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
    [Model]
  • HTML
    • LDiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
    {
        ShowCustomMenuOnly = false
    };
    ViewBag.contextMenuSettings = contextMenuSettings;
    Specifies separator between the menu items Not applicable Property:`ContextMenuSettings.Items.Separator`

    [View]
  • HTML
    • @Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
    [Model]
  • HTML
    • List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
    menuItems.Add(new ContextMenuItem() { Separator = true });
    DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
    {
        Items = menuItems
    };
    ViewBag.contextMenuSettings = contextMenuSettings;
    Define the target to show the menu item. Not applicable Property:`ContextMenuSettings.Items.Target`

    [View]
  • HTML
    • @Html.EJS().Diagram("container").ContextMenuSettings(ViewBag.contextMenuSettings).Render()
    [Model]
  • HTML
    • List<ContextMenuItem> menuItems = new List<ContextMenuItem>();
    menuItems.Add(new ContextMenuItem() { Target = ".E-diagramcontent" });
    DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings()
    {
        Items = menuItems
    };
    ViewBag.contextMenuSettings = contextMenuSettings;
    Enables/Disables the context menu items Not applicable Property:`ContextMenuSettings.Show`

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

    DataSourceSettings

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
    [Model]
  • HTML
    • DiagramDataSource dataSource = new DiagramDataSource()
    {
        DataManager = items
    };
    ViewBag.dataSource = dataSource;
    Sets the unique id of the data source items Property:`DataSourceSettings.Id`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
    [Model]
  • HTML
    • DiagramDataSource dataSource = new DiagramDataSource()
    {
        Id = "Id"
    };
    ViewBag.dataSource = dataSource;
    Defines the parent id of the data source item Property:`DataSourceSettings.Parent`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
    [Model]
  • HTML
    • DiagramDataSource dataSource = new DiagramDataSource()
    {
        ParentId = "ReportingPerson"
    };
    ViewBag.dataSource = dataSource;
    Describes query to retrieve a set of data from the specified datasource Property:`DataSourceSettings.Query`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
    [Model]
  • HTML
    • DiagramDataSource dataSource = new DiagramDataSource()
    {
        Root = "E1"
    };
    ViewBag.dataSource = dataSource;
    Describes the name of the table on which the specified query has to be executed Property:`DataSourceSettings.TableName`

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

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

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").DataSourceSettings(ViewBag.dataSource).Render()
    [Model]
  • HTML
    • DiagramDataSource dataSource = new DiagramDataSource()
    {
        Data = new List<string>()
        {
            "Description",
            "Color"
        }
    };
    ViewBag.dataSource = dataSource;
    Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`DataSourceSettings.ConnectionDataSource`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    DefaultSettings

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

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

  • HTML
    • @Html.EJS().Diagram("container").GetNodeDefaults("getNodeDefaults")
  • HTML
    • function getNodeDefaults(obj, diagram) {
        obj.Shape = { type: 'Basic', shape: 'Rectangle', cornerRadius: 10 };
        obj.Width = 80;
        obj.Style.StrokeWidth = 2;
        obj.Style.StrokeColor = '#6F409F';
        obj.Height = 35;
    }
    Initializes the default connector properties Property:`DefaultSettings.Connector`

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

  • HTML
    • @Html.EJS().Diagram("container").GetConnectorDefaults("getConnectorDefaults").Render()
  • HTML
    • function getConnectorDefaults(obj, diagram) {
        obj.Type = 'Bezier';
        obj.Style.StrokeColor = '#6f409f';
        obj.Style.StrokeWidth = 2;
        obj.TargetDecorator = {
            style: {
                strokeColor: '#6f409f',
                fill: '#6f409f',
            }
        }
    }
    Initializes the default properties of groups Property:`DefaultSettings.Group`

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

    DrawType

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

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

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

    EnableAutoScroll

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

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

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

    EnableContextMenu

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

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

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

    GetCustomCursor

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

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

    GetCustomProperty

    </tr> </table> ## GetDescription
    behavior API in Essential JS 1 API in Essential JS 2
    Allows to get the custom properties that have to be serialized</td> Not applicable Property:`GetCustomProperty`

  • HTML
    • @Html.EJS().Diagram("container").GetCustomProperty("getCustomProperty").Render()
  • HTML
    • function getCustomProperty(key: string) {
        if (key === 'nodes') {
            return ['description'];
            }
        return null;
    }
    </tr> </table> ## GetCustomTool
    behavior API in Essential JS 1 API in Essential JS 2
    Allows to get the custom description</td> Not applicable Property:`GetDescription`

  • HTML
    • @Html.EJS().Diagram("container").GetDescription("getAccessibility").Render()
  • HTML
    • function getAccessibility(object, diagram) {
        var value;
        if (object.propName == "connectors") {
            value = 'clicked on Connector';
        } else {
            value = undefined;
        }
        return value;
    }
    </tr> </table> ## Height
    behavior API in Essential JS 1 API in Essential JS 2
    Allows to get the custom tool</td> Not applicable Property:`GetCustomTool`

  • HTML
    • @Html.EJS().Diagram("container").Width("1000").Height("645px").GetCustomTool("getTool")
  • HTML
    • function getTool(action) {
        var tool;
        if (action === 'userHandle') {
            tool = new CloneTool(diagram.CommandHandler, true);
        }
        return tool;
    }
    class CloneTool extends ToolBase {
        public mouseDown(args) {
            super.MouseDown(args);
            diagram.Copy();
            diagram.Paste();
        }
    }
    behavior API in Essential JS 1 API in Essential JS 2
    Specifies the height of the diagram Property:`Height`

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

  • HTML
    • @Html.EJS().Diagram("container").Height("645px").Render()
    ## HistoryManager </table> ## Layout
    behavior API in Essential JS 1 API in Essential JS 2
    A method that takes a history entry as argument and returns whether the specific entry can be popped or not Property:`HistoryManager.CanPop`

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

  • HTML
    • <script>
        var 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`

  • HTML
    • <script>
        var diagram = document.getElementById("container").ej2_instances[0];
        var objects = [];
        objects.Push(diagram.Nodes[0], diagram.Nodes[1], diagram.Connectors[0]);
        diagram.HistoryList.StartGroupAction();
        diagram.Distribute('Top', objects);
        diagram.Distribute('Bottom', objects);
        diagram.Distribute('BottomToTop', objects);
        diagram.HistoryList.EndGroupAction();
    </script>
    A method that removes the history of a recent change made in diagram Property:`HistoryManager.Pop`

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

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

  • HTML
    • <script>
        var diagram = document.getElementById("container").ej2_instances[0];
        var object = diagram.Nodes[0];
        object['description'] = (document.GetElementById('custom') as HTMLSelectElement).Value;
        var entry = { undoObject: object };
        diagram.HistoryList.Push(entry);
        diagram.DataBind();
    </script>
    Defines what should be happened while trying to restore a custom change Property:`HistoryManager.Redo`

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

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

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

  • HTML
    • <script>
        var diagram = document.getElementById("container").ej2_instances[0];
        diagram.AppendTo('#diagram');
        diagram.HistoryList.RedoStack();
    </script>
    Restricts the undo and redo actions to a certain limit Property:`HistoryManager.StackLimit`

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

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

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

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

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

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

  • HTML
    • <script>
        var diagram = document.getElementById("container").ej2_instances[0];
        diagram.HistoryList.UndoStack();
    </script>
    Set the current entry object Not applicable Property:`HistoryList.CurrentEntry`

  • HTML
    • <script>
        var diagram = document.getElementById("container").ej2_instances[0];
        diagram.HistoryList.CurrentEntry();
    </script>
    Set the history entry can be undo Not applicable Property:`HistoryList.CanUndo`

  • HTML
    • <script>
        var diagram = document.getElementById("container").ej2_instances[0];
        diagram.HistoryList.CanUndo = true;
    </script>
    Set the history entry can be redo Not applicable Property:`HistoryList.CanRedo`

  • HTML
    • <script>
        var diagram = document.getElementById("container").ej2_instances[0];
        diagram.HistoryList.CanRedo = true;
    </script>
    Used to decide to stored the changes to history Property:`HistoryManager.CanLog`

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

  • HTML
    • <script>
        var diagram = document.getElementById("container").ej2_instances[0];
        diagram.HistoryList.CanLog = function (entry: HistoryEntry) {
                entry.Cancel = true;
                return entry;
        }
    </script>
    behavior API in Essential JS 1 API in Essential JS 2
    Specifies the custom bounds to arrange/align the layout Property:`Layout.Bounds`

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

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


  • HTML
    • <script>
        function getBounds() {
            var bounds = { X = 10, Y = 10, Width = 100, Height = 100 };
            return bounds;
        }
    </script>
    Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned Property:`Layout.FixedNode`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.FixedNode("node")).Render();
    Customizes the orientation of trees/sub trees Property:`Layout.GetLayoutInfo`

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

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

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.ConnectorSegments(ConnectorSegments.Default)).Render();
    Sets the space to be horizontally left between nodes Property:`Layout.HorizontalSpacing`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.HorizontalSpacing(50)).Render();
    Defines the space to be left between layout bounds and layout Property:`Layout.Margin`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.Margin(m=> m.Top(50).Bottom(0).Left(50).Right(0))).Render();
    Defines how to horizontally align the layout within the layout bounds Property:`Layout.HorizontalAlignment`

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

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

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.VerticalAlignment(VerticalAlignment.Top)).Render();
    Sets the orientation/direction to arrange the diagram elements Property:`Layout.Orientation`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.Orientation(LayoutOrientation.TopToBottom)).Render();
    Sets the type of the layout based on which the elements will be arranged Property:`Layout.Type`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.Type(LayoutType.OrganizationalChart)).Render();
    Sets the space to be vertically left between nodes Property:`Layout.VerticalSpacing`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.VerticalSpacing(50)).Render();
    Sets the value is used to define the root node of the layout Property:`Layout.Root`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.Root("nodeName")).Render();
    Defines how long edges should be, ideally. This will be the resting length for the springs Property:`Layout.SpringFactor`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.SpringFactor(0.8)).Render();
    Defines how long edges should be, ideally. This will be the resting length for the springs Property:`Layout.MaxIteration`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.MaxIteration(500)).Render();
    Defines how long edges should be, ideally. This will be the resting length for the springs Property:`Layout.SpringLength`

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

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.SpringLength(80)).Render();
    Sets how to define the connection direction (first segment direction & last segment direction) Not applicable Property:`Layout.ConnectionDirection`

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.ConnectionDirection(ConnectionDirection.Auto)).Render();
    Enables/Disables animation option when a node is expanded/collapsed Not applicable Property:`Layout.EnableAnimation`

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.EnableAnimation(true)).Render();
    Defines whether an object should be at the left/right of the mind map. Applicable only for the direct children of the root node Not applicable Property:`Layout.GetBranch`

  • HTML
    • @Html.EJS().Diagram("container").Layout(l => l.GetBranch("getBranch")).Render();
  • HTML
    • function getBranch(node, nodes) {
        return node.Data.Branch;
    }
    ## Nodes </td> </td>
    behavior API in Essential JS 1 API in Essential JS 2
    Array of JSON objects where each object represents a node Property:`Nodes`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Id = "nodeName" });
    ViewBag.Nodes = nodes;
    Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity Property:`Nodes.Activity`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Id = "nodeName", shape: { type =  'Bpmn', shape =  'Activity', activity = { activity = "Task" } });
    ViewBag.Nodes = nodes;
    To maintain additional information about nodes Property:`Nodes.AddInfo`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • Dictionary<string, object> AddInfo = new Dictionary<string, object>();
    AddInfo.Add("Description", "Bidirectional Flow");
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { AddInfo = AddInfo });
    ViewBag.Nodes = nodes;
    Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process Property:`Nodes.Annotation`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> Node = new List<DiagramNodeAnnotation>();
    Node.Add(new DiagramNodeAnnotation() { Content = "Place Order" } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = Node});
    ViewBag.Nodes = nodes;
    Sets the angle between the BPMN shape and the annotation Property:`Nodes.Annotation.Angle`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
    Node.Add(new DiagramBpmnAnnotation() { Angle = -45 });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = Node});
    ViewBag.Nodes = nodes;
    Sets the direction of the text annotation Property:`Nodes.Annotation.Direction`

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

  • HTML
    • @{
        Html.EJ().Diagram("diagram").Nodes(n => n.Add(new BPMNNode() { Annotation = new BPMNAnnotation(){ Height=50 } })).Render();
    }
    		 [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
    Node.Add(new DiagramBpmnAnnotation() { Height = 50 });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = Node});
    ViewBag.Nodes = nodes;
    Sets the distance between the BPMN shape and the annotation Property:`Nodes.Annotation.Length`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
    Node.Add(new DiagramBpmnAnnotation() { Length = 150 });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = Node});
    ViewBag.Nodes = nodes;
    Defines the additional information about the flow object in a BPMN Process Property:`Nodes.Annotation.Text`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
    Node.Add(new DiagramBpmnAnnotation() { Text= "Text" });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = Node});
    ViewBag.Nodes = nodes;
    Sets the width of the text annotation Property:`Nodes.Annotation.Width`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
    Node.Add(new DiagramBpmnAnnotation() { Width = 100 });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = Node});
    ViewBag.Nodes = nodes;
    Sets the id for the annotation Not applicable Property:`Nodes.Shape.Annotations.Id`

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramBpmnAnnotation> Node = new List<DiagramBpmnAnnotation>();
    Node.Add(new DiagramBpmnAnnotation() { Id = "id" });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = Node});
    ViewBag.Nodes = nodes;
    Defines whether the group can be ungrouped or not Property:`Nodes.CanUngroup`

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

    [View]
  • HTML
    • @Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
    [Model]
  • HTML
    • DiagramProperties Model = new DiagramProperties();
    Node node1 = new Node() { Name = "node1"};
    Node node2 = new Node() { Name = "node2"};
    Group group = new Group();
    group.Children.Add(node1);
    group.Children.Add(node2);
    ViewData["diagramModel"] = Model;
    Sets the type of UML classifier Property:`Nodes.Classifier`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { Shape = IconShapes.ArrowUp} });
    ViewBag.Nodes = nodes;
    Sets the border color for collapse icon of node Property:`Nodes.CollapseIcon.BorderColor`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { BorderColor = "red" } });
    ViewBag.Nodes = nodes;
    Sets the border width for collapse icon of node Property:`Nodes.CollapseIcon.BorderWidth`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { BorderWidth = 2 } });
    ViewBag.Nodes = nodes;
    Sets the fill color for collapse icon of node Property:`Nodes.CollapseIcon.FillColor`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { Fill = "red" } });
    ViewBag.Nodes = nodes;
    Defines the height for collapse icon of node Property:`Nodes.CollapseIcon.Height`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { Height = 10 } });
    ViewBag.Nodes = nodes;
    Sets the horizontal alignment of the icon Property:`Nodes.CollapseIcon.HorizontalAlignment`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { HorizontalAlignment = HorizontalAlignment.Left } });
    ViewBag.Nodes = nodes;
    To set the margin for the collapse icon of node Property:`Nodes.CollapseIcon.Margin`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { Margin = new DiagramMargin() { Left = 5} } });
    ViewBag.Nodes = nodes;
    Sets the fraction/ratio(relative to node) that defines the position of the icon Property:`Nodes.CollapseIcon.Offset`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { Offset = { X = 0, Y = 0.5 } } });
    ViewBag.Nodes = nodes;
    Defines the shape of the collapsed state of the node Property:`Nodes.CollapseIcon.Shape`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { Shape = IconShapes.ArrowUp } });
    ViewBag.Nodes = nodes;
    Sets the vertical alignment of the icon Property:`Nodes.CollapseIcon.VerticalAlignment `

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { CollapseIcon = { VerticalAlignment= VerticalAlignment.Top } });
    ViewBag.Nodes = nodes;
    Defines the custom content of the icon Not applicable Property:`Nodes.CollapseIcon.Content`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() {
        CollapseIcon = { Shape = IconShapes.Path, PathData = "M0,0 L0,100" }
    });
    ViewBag.Nodes = nodes;
    Defines the corner radius of the icon border Not applicable Property:`Nodes.CollapseIcon.CornerRadius`

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() {
        CollapseIcon = { CornerRadius = 5 }
    });
    ViewBag.Nodes = nodes;
    Defines the space that the icon has to be moved from the icon border Not applicable Property:`Nodes.CollapseIcon.Padding`

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() {
        CollapseIcon = { Padding = { Left = 15} }
    });
    ViewBag.Nodes = nodes;
    Defines the distance to be left between a node and its connections(In coming and out going connections) Property:`Nodes.ConnectorPadding`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() {
        Constraints = NodeConstraints.Default
    });
    ViewBag.Nodes = nodes;
    Defines the orientation of the container. Applicable, if the group is a container Property:`Nodes.Container.Orientation`

    [View]
  • HTML
    • @Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
    [Model]
  • HTML
    • DiagramProperties Model = new DiagramProperties();
    Node node1 = new Node() { Name = "node1"};
    Node node2 = new Node() { Name = "node2"};
    Group group = new Group();
    group.Children.Add(node1);
    group.Children.Add(node2);
    group.Container = new Container() { Orientation = "Horizontal" };
    ViewData["diagramModel"] = Model;
    		 Not applicable
    Sets the type of the container. Applicable if the group is a container. Property:`Nodes.Container.Type`

    [View]
  • HTML
    • @Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
    [Model]
  • HTML
    • DiagramProperties Model = new DiagramProperties();
    Node node1 = new Node() { Name = "node1"};
    Node node2 = new Node() { Name = "node2"};
    Group group = new Group();
    group.Children.Add(node1);
    group.Children.Add(node2);
    group.Container = new Container() { Orientation = "Horizontal" };
    ViewData["diagramModel"] = Model;
    		 Not applicable
    Defines the corner radius of rectangular shapes Property:`Nodes.CornerRadius`

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "BPMN", Shape = "DataObject", dataObject = new DiagramBpmnDataObject() { Type = BpmnDataObjects.Input} } });
    ViewBag.Nodes = nodes;
    Defines whether the BPMN data object is a collection or not Property:`Nodes.Data.Collection`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "BPMN", Shape = "DataObject", dataObject = new DiagramBpmnDataObject() { Collection = false } } });
    ViewBag.Nodes = nodes;
    Defines an Enumeration in a UML Class Diagram Property:`Nodes.Enumeration`

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Event", Event = { Event = BpmnEvents.Start } } });
    ViewBag.Nodes = nodes;
    Defines the type of the trigger Property:`Nodes.Event.Trigger`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Event", Event = { Trigger = BpmnTriggers.None } } });
    ViewBag.Nodes = nodes;
    Defines whether the node can be automatically arranged using layout or not Property:`Nodes.ExcludeFromLayout`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Layout(new DiagramLayout() { Type = LayoutType.HierarchicalTree}).Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Id = "Patient", ExcludeFromLayout= true } } });
    nodes.Add(new DiagramNode() { Id = "Patient1" } } });
    nodes.Add(new DiagramNode() { Id = "Patient2" } } });
    ViewBag.Nodes = nodes;
    Defines the fill color of the node Property:`Nodes.FillColor`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Fill = "red" } });
    ViewBag.Nodes = nodes;
    Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway Property:`Nodes.Gateway`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Gateways", gateWay = { Type = BpmnGateways.Exclusive } } });
    ViewBag.Nodes = nodes;
    Paints the node with linear color transitions Property:`Nodes.Gradient.Type`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Type = GradientType.Linear } } });
    ViewBag.Nodes = nodes;
    Defines the x1 value of linear gradient Property:`Nodes.Gradient.LinearGradient.X1`

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

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

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

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

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Type = GradientType.Radial } } });
    ViewBag.Nodes = nodes;
    Defines the position of the outermost circle Property:`Nodes.Gradient.RadialGradient.Cx`

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

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

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

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

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramStop> stops = new List<DiagramStop>();
    stops.Add(new DiagramStop() { Color = "white", Offset = 0 });
    stops.Add(new DiagramStop() { Color = "red", Offset = 50 });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Stops = stops } } });
    ViewBag.Nodes = nodes;
    Sets the color to be filled over the specified region Property:`Nodes.Gradient.Stops.Color`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramStop> stops = new List<DiagramStop>();
    stops.Add(new DiagramStop() { Color = "white" });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Stops = stops } } });
    ViewBag.Nodes = nodes;
    Sets the position where the previous color transition ends and a new color transition starts Property:`Nodes.Gradient.Stops.Offset`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramStop> stops = new List<DiagramStop>();
    stops.Add(new DiagramStop() { Offset = 0 });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Stops = stops } } });
    ViewBag.Nodes = nodes;
    Describes the transparency level of the region Property:`Nodes.Gradient.Stops.Opacity`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramStop> stops = new List<DiagramStop>();
    stops.Add(new DiagramStop() { Opacity = 0.5 });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Style = new DiagramShapeStyle { Gradient = new DiagramGradient() { Stops = stops } } });
    ViewBag.Nodes = nodes;
    Defines the header of a swimlane/lane Property:`Nodes.Header`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Height = 100 });
    ViewBag.Nodes = nodes;
    Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container Property:`Nodes.HorizontalAlign`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { IsExpanded = false });
    ViewBag.Nodes = nodes;
    Sets the node as a swimlane Property:`Nodes.IsSwimlane`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Content = "Annotation" });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    An array of objects where each object represents a lane. Applicable, if the node is a swimlane Property:`Nodes.Lanes`

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

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

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Margin = new DiagramMargin() { Bottom = 15, Left = 15, Right = 15, Up = 15 }  });
    ViewBag.Nodes = nodes;
    Defines the maximum height limit of the node Property:`Nodes.MaxHeight`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { MaxHeight = 50  });
    ViewBag.Nodes = nodes;
    Sets the unique identifier of the node Property:`Nodes.Name`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { ID = "Name"  });
    ViewBag.Nodes = nodes;
    Sets the path geometry that defines the shape of a path node Property:`Nodes.PathData`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new DiagramBasicShape() { Type = Shapes.Path  } });
    ViewBag.Nodes = nodes;
    An array of objects, where each object represents a smaller region(phase) of a swimlane Property:`Nodes.Phases`

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

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

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

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

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

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Pivot = new DiagramPoint() { X = 0, Y = 0} });
    ViewBag.Nodes = nodes;
    Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon Property:`Nodes.Points`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramPoint> points = new List<DiagramPoint>();
    points.Add(new DiagramPoint() { X = 35, Y = 0 });
    points.Add(new DiagramPoint() { X = 65, Y = 0 });
    points.Add(new DiagramPoint() { X = 100, Y = 35 });
    points.Add(new DiagramPoint() { X = 100, Y = 65 });
    points.Add(new DiagramPoint() { X = 65, Y = 100 });
    points.Add(new DiagramPoint() { X = 35, Y = 100 });
    points.Add(new DiagramPoint() { X = 0, Y = 65 });
    points.Add(new DiagramPoint() { X = 0, Y = 35 });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new DiagramBasicShape() { Type = Basic, Shape = BasicShapes.Polygon, Points = points  } });
    ViewBag.Nodes = nodes;
    An array of objects where each object represents a port Property:`Nodes.Ports`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramPort> ports = new List<DiagramPort>();
    ports.Add(new DiagramPort() { Id = "port" });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Ports = ports });
    ViewBag.Nodes = nodes;
    Sets the border color of the port Property:`Nodes.Ports.BorderColor`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramPort> ports = new List<DiagramPort>();
    ports.Add(new DiagramPort() {  });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Ports = ports });
    ViewBag.Nodes = nodes;
    Defines whether connections can be created with the port Property:`Nodes.Ports.Constraints`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramPort> ports = new List<DiagramPort>();
    ports.Add(new DiagramPort() { Constraints = PortConstraints.Drag });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Ports = ports });
    ViewBag.Nodes = nodes;
    An array of objects where each object represents a port Property:`Nodes.Ports.Shape`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramPort> ports = new List<DiagramPort>();
    ports.Add(new DiagramPort() { Shape = PortShapes.Circle });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Ports = ports });
    ViewBag.Nodes = nodes;
    Sets the vertical alignment of the port with respect to its immediate parent Not applicable Property:`Nodes.Ports.VerticalAlignment`

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramPort> ports = new List<DiagramPort>();
    ports.Add(new DiagramPort() { VerticalAlignment = VerticalAlignment.Top });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Ports = ports });
    ViewBag.Nodes = nodes;
    Defines the opacity and the position of shadow Property:`Nodes.Shadow`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shadow = new DiagramShadow() { Opacity = 0.5 } });
    ViewBag.Nodes = nodes;
    Defines the sub process of a BPMN Activity. Applicable, if the type of the BPMN activity is sub process Property:`Nodes.SubProcess`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = { Activity = BpmnActivities.SubProcess} } });
    ViewBag.Nodes = nodes;
    Defines the collection of events that need to be appended with BPMN Sub-Process Property:`Nodes.SubProcess.Events`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramBpmnSubEvent> events = new List<DiagramBpmnSubEvent>();
    events.Add(new DiagramBpmnSubEvent() { Event = BpmnEvents.Intermediate });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = { Activity = BpmnActivities.SubProcess, SubProcess = { Type = BpmnSubProcessTypes.Event, Events = events }  } } });
    ViewBag.Nodes = nodes;
    An array of objects where each object represents a port Property:`Nodes.SubProcess.Events.Ports`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramPort> ports = new List<DiagramPort>();
    ports.Add(new DiagramPort() { Id = "port"};
    List<DiagramBpmnSubEvent> events = new List<DiagramBpmnSubEvent>();
    events.Add(new DiagramBpmnSubEvent() { Event = BpmnEvents.Intermediate, Ports = ports });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = { Activity = BpmnActivities.SubProcess, SubProcess = { Type = BpmnSubProcessTypes.Event, Events = events }  } } });
    ViewBag.Nodes = nodes;
    A collection of objects where each object represents a label Property:`Nodes.SubProcess.Events.Labels`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Content = "Annotation" });
    List<DiagramBpmnSubEvent> events = new List<DiagramBpmnSubEvent>();
    events.Add(new DiagramBpmnSubEvent() { Event = BpmnEvents.Intermediate, Annotation = annotation });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = { Activity = BpmnActivities.SubProcess, SubProcess = { Type = BpmnSubProcessTypes.Event, Events = events }  } } });
    ViewBag.Nodes = nodes;
    Defines the task of the BPMN activity. Applicable, if the type of activity is set as task Property:`Nodes.Task`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Shape = new BpmnShapes() { Type = "Bpmn", Shape = "Activity", Activity = BpmnActivities.Task, Task = { Type = BpmnTasks.Service } }  } } });
    ViewBag.Nodes = nodes;
    ## NodeTemplate
    behavior API in Essential JS 1 API in Essential JS 2
    Binds the custom JSON data with node properties Property:`NodeTemplate`

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

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

  • HTML
    • @Html.EJS().Diagram("container").SetNodeTemplate("setNodeTemplate").Render()
  • HTML
    • <script>
        var getTextElement = (text: string) => {
            var textElement = new TextElement();
            textElement.Width = 50;
            textElement.Height = 20;
            textElement.Content = text;
            return textElement;
        };
        function setNodeTemplate() {
            setNodeTemplate: (object: NodeModel, diagram: Diagram): StackPanel => {
                if (object.Id === 'node2') {
                    var table = new StackPanel();
                    table.Orientation = 'Horizontal';
                    var column1 = new StackPanel();
                    column1.Children = [];
                    column1.Children.Push(getTextElement('Column1'));
                    addRows(column1);
                    var column2 = new StackPanel();
                    column2.Children = [];
                    column2.Children.Push(getTextElement('Column2'));
                    addRows(column2);
                    table.Children = [column1, column2];
                    return table;
                }
                return null;
            }
        }
    </script>
    ## Layers
    behavior API in Essential JS 1 API in Essential JS 2
    A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes Property:`Layers`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Layers(ViewBag.Layers).Render()
    [Model]
  • HTML
    • List<DiagramLayer> layers = new List<DiagramLayer>();
    layers.Add(new DiagramLayer() { Id = "layer" });
    ViewBag.Layers = layers;
    A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes Property:`Layers.Print`

    [View]
  • HTML
    • @Html.EJ().Diagram("Diagram1", ViewData["diagramModel "] as DiagramProperties).Render()
    [Model]
  • HTML
    • Model.Layers = new Collection();
    Model.Layers.Add(new Layer() { Print = true });
    		 Not applicable
    ## Annotations
    behavior API in Essential JS 1 API in Essential JS 2
    A collection of objects where each object represents a label Property:`Labels.Text`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Content = "Annotation" });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Offset for annotation content Property:`Labels.Offset`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Offset=new DiagramPoint() { X = 0, Y = 1 } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Sets the hyperlink for the labels Property:`Labels.HyperLink`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() {Content = "HRPortal", Hyperlink = "https://www.Syncfusion.Com" });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Enables/disables the bold style Property:`Labels.Bold`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { Bold = true } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Sets the border color of the label Property:`Labels.BorderColor`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { StrokeColor = "red" } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Sets the border width of the label Property:`Labels.BorderWidth`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { StrokeWidth=2 } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    This property allows you to customize labels appearance using user-defined CSS Property:`Labels.CssClass`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Constraints = AnnotationConstraints.InheritReadOnly });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Sets the fill color of the text area Property:`Labels.FillColor`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { Fill = "white" } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Sets the font color of the text Property:`Labels.FontColor`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { Color = "black" } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Sets the font family of the text Property:`Labels.FontFamily`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { FontFamily = "segoe UI" } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Sets the height of the label Property:`Labels.Height`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Height = 10 });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Sets the horizontal alignment of the label Property:`Labels.HorizontalAlignment`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { HorizontalAlignment = HorizontalAlignment.Center });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    To set the margin of the label Property:`Labels.Margin`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Margin = new DiagramMargin() { Bottom = 15 } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Defines whether the label is editable or not Property:`Labels.ReadOnly`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Constraints = AnnotationConstraints.ReadOnly });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Sets the id of svg/html templates. Applicable, if the node’s label is HTML or native Property:`Labels.TemplateId`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Style = new DiagramTextStyle() { TextAlign = TextAlign.Left } });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Enables or disables the visibility of the label Property:`Labels.Visible`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").Nodes(ViewBag.Nodes).Render()
    [Model]
  • HTML
    • List<DiagramNodeAnnotation> annotation = new List<DiagramNodeAnnotation>();
    annotation.Add(new DiagramNodeAnnotation() { Visibility = false });
    List<DiagramNode> nodes = new List<DiagramNode>();
    nodes.Add(new DiagramNode() { Annotations = annotation });
    ViewBag.Nodes = nodes;
    Gets whether the label is currently being edited or not Property:`Labels.Mode`

  • HTML
    • @{
        Collection Labels = new Collection();
        Labels.Add(new Label() { Mode = LabelEditMode.View });
        Html.EJ().Diagram("diagram").Nodes(n => n.Add(new Node() { Labels = Labels })).Render();
    }
    		 Not applicable
    ## PageSettings </tr> </table> ## ScrollSettings
    behavior API in Essential JS 1 API in Essential JS 2
    Defines the size and appearance of diagram page Property:`PageSettings.AutoScrollBorder`

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

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

  • HTML
    • @Html.EJS().Diagram("container").PageSettings(new DiagramPageSettings() { MultiplePage= true  }).Render()
    Defines the background color of diagram pages Property:`PageSettings.PageBackgroundColor`

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

  • HTML
    • @Html.EJS().Diagram("container").PageSettings(new DiagramPageSettings() { Background = new DiagramBackground() {Color="red" }  }).Render()
    Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” Property:`PageSettings.ScrollableArea`

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

  • HTML
    • @Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { ScrollableArea = "getScrollableArea" }).Render()
  • HTML
    • <script>
        function getScrollableArea() {
            var scrollableArea = { X = 0, Y = 0, Width = 300, Height = 300 };
            return scrollableArea;
        }
    </script>
    Defines the draggable region of diagram elements Property:`PageSettings.BoundaryConstraints`

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

  • HTML
    • @Html.EJS().Diagram("container").PageSettings(new DiagramPageSettings() { BoundaryConstraints= BoundaryConstraints.Diagram  }).Render()
    behavior API in Essential JS 1 API in Essential JS 2
    Defines the zoom value, zoom factor, scroll status and view port size of the diagram Property:`ScrollSettings.HorizontalOffset`

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

  • HTML
    • @Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { HorizontalOffset = 300 }).Render()
    Allows to extend the scrollable region that is based on the scroll limit Property:`ScrollSettings.Padding`

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

  • HTML
    • @Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { MaxZoom = 2.5  }).Render()
    Allows to read the maximum zoom value of scroller Not applicable Property:`ScrollSettings.AutoScrollBorder`

  • HTML
    • @Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { MaxZoom = 2.5  }).Render()
    Enables/Disables the autoscroll option Not applicable Property:`ScrollSettings.CanAutoScroll`

  • HTML
    • @Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { CanAutoScroll = true }).Render()
    Defines the scrollable area of diagram Not applicable Property:`ScrollSettings.ScrollableArea`

  • HTML
    • @Html.EJS().Diagram("container").ScrollSettings(new DiagramScrollSettings() { ScrollableArea = "getScrollableArea" }).Render()
  • HTML
    • <script>
        function getScrollableArea() {
            var scrollableArea = { X = 0, Y = 0, Width = 300, Height = 300 };
            return scrollableArea;
        }
    </script>
    ## SnapSettings
    behavior API in Essential JS 1 API in Essential JS 2
    Enables or disables snapping nodes/connectors to objects Property:`SnapSettings.EnableSnapToObject`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
    [Model]
  • HTML
    • double[] intervals = { 0.95, 9.05, 0.2, 9.75 };
    DiagramSnapSettings snapSettings = new DiagramSnapSettings();
    snapSettings.HorizontalGridlines = new DiagramGridlines() {
        LineIntervals = intervals
    };
    ViewBag.SnapSettings = snapSettings;
    Defines the appearance of vertical gridlines Property:`SnapSettings.VerticalGridLines`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
    [Model]
  • HTML
    • double[] intervals = { 0.95, 9.05, 0.2, 9.75 };
    DiagramSnapSettings snapSettings = new DiagramSnapSettings();
    snapSettings.VerticalGridLines = new DiagramGridlines() {
        LineIntervals = intervals
    };
    ViewBag.SnapSettings = snapSettings;
    Defines the angle by which the object needs to be snapped Property:`SnapSettings.SnapAngle`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
    [Model]
  • HTML
    • DiagramSnapSettings snapSettings = new DiagramSnapSettings();
    snapSettings.SnapAngle = 5;
    ViewBag.SnapSettings = snapSettings;
    Sets the minimum distance between the selected object and the nearest object Property:`SnapSettings.SnapObjectDistance`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
    [Model]
  • HTML
    • DiagramSnapSettings snapSettings = new DiagramSnapSettings();
    snapSettings.SnapObjectDistance = 5;
    ViewBag.SnapSettings = snapSettings;
    Defines and sets the snapConstraints Property:`SnapSettings.SnapConstraints`

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").SnapSettings(ViewBag.SnapSettings).Render()
    [Model]
  • HTML
    • DiagramSnapSettings snapSettings = new DiagramSnapSettings();
    snapSettings.Constraints = SnapConstraints.ShowLines;
    ViewBag.SnapSettings = snapSettings;
    ## ZoomFactor
    behavior API in Essential JS 1 API in Essential JS 2
    Sets the factor by which we can zoom in or zoom out Property:`ZoomFactor`

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

  • HTML
    • var zoomIn = { type: 'ZoomIn', zoomFactor: 0.5 };
    diagram.ZoomTo(zoomIn);
    ## Tool
    behavior API in Essential JS 1 API in Essential JS 2
    Enables/Disables the interactive behaviors of diagram Property:`Tool`

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

  • HTML
    • @Html.EJS().Diagram("container").Tool(DiagramTools.ZoomPan).Render()
    ## ShowTooltip
    behavior API in Essential JS 1 API in Essential JS 2
    Enables or disables tooltip of diagram Property:`ShowTooltip`

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

  • HTML
    • @Html.EJS().Diagram("container").Constraints(DiagramConstraints.Default | DiagramConstraints.Tooltip).Render()
    ## SelectedItems
    behavior API in Essential JS 1 API in Essential JS 2
    A read only collection of the selected items Property:`SelectedItems.Children`
  • HTML
    • var diagram = $("#diagramcontent").EjDiagram("instance");
    for(var i =0; i< diagram.Model.SelectedItems.Children; i++){
        //Do your actions here
    }
    		 Not applicable
    Controls the visibility of selector Property:`SelectedItems.Constraints`

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

  • HTML
    • @Html.EJS().Diagram("container").SelectedItems(new DiagramSelector() { Constraints = SelectorConstraints.UserHandle}).Render()
    Sets the angle to rotate the selected items Property:`SelectedItems.Tooltip`

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

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

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

    DiagramSelector selector = new DiagramSelector();
    selector.UserHandles = userHandle;
    ViewBag.Selector = selector;
    Sets the horizontal alignment of the user handle Property:`SelectedItems.UserHandles.HorizontalAlignment`

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

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

    DiagramSelector selector = new DiagramSelector();
    selector.UserHandles = userHandle;
    ViewBag.Selector = selector;
    Defines the interactive behaviors of the user handle Property:`SelectedItems.UserHandles.Tool`

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

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

    [View]
  • HTML
    • @Html.EJS().Diagram("container").SelectedItems(ViewBag.Selector).Render()
    [Model]
  • HTML
    • List<DiagramUserHandle> userHandle = new List<DiagramUserHandle>();
    userHandle.Add(new DiagramUserHandle()
    {
        Displacement = 30
    });
    DiagramSelector selector = new DiagramSelector();
    selector.UserHandles = userHandle;
    ViewBag.Selector = selector;
    ## SerializationSettings
    behavior API in Essential JS 1 API in Essential JS 2
    Defines whether the default diagram properties can be serialized or not Property:`SerializationSettings.PreventDefaultValues`

    [View]
  • HTML
    • @Html.EJ().Diagram("diagram", ViewData["diagramModel"] as DiagramProperties);
    [Model]
  • HTML
    • DiagramProperties Model = new DiagramProperties();
    Model.SerializationSettings = new SerializationSettings() {
        PreventDefaultValues = true
    };
    ViewData["diagramModel"] = Model;
    		 Not applicable
    ## How to load EJ1 diagram in EJ2 diagram To load EJ1 JSON data in an EJ2 diagram, follow these steps. 1. Import and inject the EJ1SerializationModule as shown in the following code example.
  • HTML
    • @{
        Html.EJ().Diagram("diagram").Height("500px").Width("500px").Created("diagramCreated").GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").DataSourceSettings(ss => ss.Id("Id").ParentId("ParentId").DataSource(new DataManager() { Data = (List<MindMapDetails>)ViewBag.Nodes }))
        .Layout(l => l.Type(Syncfusion.EJ2.Diagrams.LayoutType.MindMap).GetBranch("getBranch")).Render();
    }
    2. Load the EJ1 JSON data using the diagram loadDiagram method and set the second parameter to true.
  • HTML
    • function diagramCreated(){
  var diagram = document.getElementById("diagram").ej2_instances[0];
  var ej1Data = {"JSONData"};  // Replace JSONData with your EJ1 JSON data
  //Load the EJ1 JSON and pass a boolean value as true.
  diagram.loadDiagram(ej1Data, true);
  }
    ## Tooltip
    behavior API in Essential JS 1 API in Essential JS 2
    An object that defines the description, appearance and alignments of tooltip Property:`Tooltip`

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

  • HTML
    • @Html.EJS().Diagram("container").Constraints(DiagramConstraints.Default | DiagramConstraints.Tooltip).Tooltip(new DiagramDiagramTooltip() { Content = "Diagram"}).Render()
    Defines the alignment of tooltip Property:`Tooltip.Alignment`

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

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

  • HTML
    • @{
        Html.EJ().Diagram("diagram").Tooltip(new Diagram.Tooltip() { TemplateId= "mouseOverTooltip"  }).Render();
    }
    		 Property:`Tooltip.Content`

  • HTML
    • @Html.EJS().Diagram("container").Tooltip(new DiagramDiagramTooltip() { Content = "Diagram"}).Render()
    Defines if the Tooltip has tip pointer or not Not applicable Property:`Tooltip.ShowTipPointer`

  • HTML
    • @Html.EJS().Diagram("container").Tooltip(new DiagramDiagramTooltip() { ShowTipPointer = true }).Render()
    Defines the position of the Tooltip Not applicable Property:`Tooltip.Position`

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