Migration from Essential JS 1

2 Mar 202224 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
    ## 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()