Search results

API Migration in ASP.NET Core Diagram control

29 Jul 2021 / 74 minutes to read

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

Background

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

Property:`Background.Align`
Defines how the background image should be scaled/stretched Property:`BackgroundImage.Scale` Property:`Background.Align`
Sets the source path of the background image Property:`BackgroundImage.Source` Property:`Background.Source`

Bridging

behavior API in Essential JS 1 API in Essential JS 2
Sets the direction of line bridges Property:`BridgeDirection`

Property:`BridgeDirection`

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`

Property:`CommandManager.Commands`

[View]

[Model]

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

Defines any additional parameters that are required at runtime Property:`CommandManager.Commands.Parameter` Property:`CommandManager.Commands.Parameter`

[View]

[Model]

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

Connectors

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

[View] [Model]

Dictionary<string, object> addInfo = new Dictionary<string, object>(); addInfo.Add(“Description”, “Bidirectional Flow”); ViewBag.addInfo = addInfo;

Property:`Connectors.AddInfo`

[View] [Model]

Dictionary<string, object> addInfo = new Dictionary<string, object>(); addInfo.Add(“Description”, “Bidirectional Flow”); ViewBag.addInfo = addInfo;

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

Property:`Connectors.BridgeSpace`

Enables or disables the behaviors of connectors Property:`Connector.Constraints`

Property:`Connector.Constraints`

Defines the radius of the rounded corner Property:`Connector.CornerRadius`

Property:`Connector.CornerRadius`

Customize connectors appearance using user-defined CSS Property:`Connector.CssClass`

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


Not applicable
Sets the horizontal alignment of the connector Property:`Connector.HorizontalAlign`

Not applicable
A collection of JSON objects where each object represents a label Property:`Connector.Labels` Property:`Connector.Annotations`

Stroke color of the connector Property:`Connector.LineColor`

Property:`Connector.Style.StrokeColor`

Sets the pattern of dashes and gaps used to stroke the path of the connector Property:`Connector.LineDashArray`

Property:`Connector.Style.StrokeDashArray`

Sets the width of the line Property:`Connector.LineWidth`

Property:`Connector.Style.StrokeWidth`

Defines the padding value to ease the interaction with connectors Property:`Connector.LineHitPadding`

Property:`Connectors.HitPadding`

Sets a unique name for the connector Property:`Connector.Name`

Property:`Connectors.Id`

Defines the transparency of the connector Property:`Connector.Opacity`

Property:`Connectors.Style.Opacity`

Sets the parent name of the connector. Property:`Connector.Parent`

Not applicable
An array of JSON objects where each object represents a segment Property:`Connector.Segments`

Property:`Connector.Segments`

[View] [Model]

List segments = new List(); segments.Add(new Segment() { Type = Segments.Orthogonal }); ViewBag.segments = segments;

Sets the direction of orthogonal segment Property:`Connector.Segments.Direction`

Property:`Connectors.Segments.Direction`

[View] [Model]

List segments = new List(); segments.Add(new Segment() { Direction = “Bottom” }); ViewBag.segments = segments;

Describes the length of orthogonal segment Property:`Connector.Segments.Length`

Property:`Connectors.Segments.Length`

[View] [Model]

List segments = new List(); segments.Add(new Segment() { Length = 30 }); ViewBag.segments = segments;

Describes the end point of bezier/straight segment Property:`Connector.Segments.Point`

Property:`Connectors.Segments.Point`

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

Property:`Connectors.Segments.Point1`

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

Property:`Connectors.Segments.Point2`

Sets the type of the segment Property:`Connectors.Segments.Type`

Property:`Connectors.Segments.Type`

[View]

@Html.EJS().Diagram(“container”).Connectors(ViewBag.Connectors).Render()

[Model]

List segments = new List(); segments.Add(new Segment() { Type = Segments.Bezier }); List connectors = new List(); connectors.Add(new DiagramConnector() { Segments = segments }); ViewBag.Connectors = connectors;

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

Property:`Connectors.Segments.Vector1`

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

Property:`Connectors.Segments.Vector2`

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

Property:`Connectors.Shape.Type`

Defines the source decorator of the connector Property:`Connector.SourceDecorator`

Property:`Connectors.SourceDecorator`

Sets the border color of the source decorator Property:`Connector.SourceDecorator.BorderColor`

Property:`Connectors.SourceDecorator.Style.StrokeColor`

Sets the border width of the decorator Property:`Connector.SourceDecorator.BorderWidth`

Property:`Connectors.SourceDecorator.Style.StrokeWidth`

Defines to customize sourceDecorator appearance using user-defined CSS Property:`Connector.SourceDecorator.CssClass`

Not applicable
Sets the fill color of the source decorator Property:`Connector.SourceDecorator.FillColor`

Property:`Connectors.SourceDecorator.Style.Fill`

Sets the height of the source decorator Property:`Connector.SourceDecorator.Height`

Property:`Connectors.SourceDecorator.Height`

Defines the custom shape of the source decorator Property:`Connector.SourceDecorator.PathData`

Property:`Connectors.SourceDecorator.PathData`

Defines the shape of the source decorator. Property:`Connector.SourceDecorator.Shape`

Property:`Connectors.SourceDecorator.Shape`

Defines the width of the source decorator Property:`Connector.SourceDecorator.Width`

Property:`Connectors.SourceDecorator.Width`

Sets the source node of the connector Property:`Connector.SourceNode`

Property:`Connectors.SourceID`

Defines the space to be left between the source node and the source point of a connector Property:`Connector.SourcePadding`

Property:`Connectors.HitPadding`

Describes the start point of the connector Property:`Connector.SourcePoint`

Property:`Connectors.SourcePoint`

Sets the source port of the connector Property:`Connector.SourcePort`

Property:`Connectors.SourcePortID`

Defines the target decorator of the connector Property:`Connector.TargetDecorator`

Property:`Connectors.TargetDecorator`

Sets the border color of the target decorator Property:`Connector.TargetDecorator.BorderColor`

Property:`Connectors.TargetDecorator.Style.StrokeColor`

Sets the border width of the decorator Property:`Connector.TargetDecorator.BorderWidth`

Property:`Connectors.TargetDecorator.Style.StrokeWidth`

Defines to customize target Decorator appearance using user-defined CSS Property:`Connector.TargetDecorator.CssClass`

Not applicable
Sets the fill color of the target decorator Property:`Connector.TargetDecorator.FillColor`

Property:`Connectors.TargetDecorator.Style.Fill`

Sets the height of the target decorator Property:`Connector.TargetDecorator.Height`

Property:`Connectors.TargetDecorator.Height`

Defines the custom shape of the target decorator Property:`Connector.TargetDecorator.PathData`

Property:`Connectors.TargetDecorator.PathData`

Defines the shape of the target decorator. Property:`Connector.TargetDecorator.Shape`

Property:`Connectors.TargetDecorator.Shape`

Defines the width of the target decorator Property:`Connector.TargetDecorator.Width`

Property:`Connectors.TargetDecorator.Width`

Sets the target node of the connector Property:`Connector.TargetNode`

Property:`Connectors.TargetID`

Defines the space to be left between the target node and the target point of a connector Property:`Connector.TargetPadding`

Property:`Connectors.HitPadding`

Describes the start point of the connector Property:`Connector.TargetPoint`

Property:`Connectors.TargetPoint`

Sets the target port of the connector Property:`Connector.TargetPort`

Property:`Connectors.TargetPortID`

Defines the tooltip that should be shown when the mouse hovers over connector Property:`Connector.Tooltip`

[View]
[Model]

Tooltip tooltip = new Tooltip() { TemplateId = “mouseOverTooltip”}; ViewBag.tooltip = tooltip;

Property:`Connectors.Tooltip`

Sets the vertical alignment of connector Property:`Connector.VerticalAlign`

Not applicable
Enables or disables the visibility of connector Property:`Connector.Visible`

Property:`Connectors.Visible`

Sets the z-index of the connector Property:`Connector.ZOrder`

Property:`Connectors.ZIndex`

ContextMenu

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

[View]

[Model]

List items = new List(); items.Add(new ContextMenuItem() { Name = “HyperLink” }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;

Property:`ContextMenuSettings.Items`

[View]

[Model]

List menuItems = new List(); menuItems.Add(new ContextMenuItem() { Text = “delete” }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = “menuItems” }; ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]

[Model]

List items = new List(); items.Add(new ContextMenuItem() { Text = “text” }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;

Property:`ContextMenuSettings.Items.Text`

[View]

[Model]

List menuItems = new List(); menuItems.Add(new ContextMenuItem() { Text = “text” }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = “menuItems” }; ViewBag.contextMenuSettings = contextMenuSettings;

Defines the name for the collection of context menu items Property:`ContextMenu.Items.Name`

[View]

[Model]

List items = new List(); items.Add(new ContextMenuItem() { Name = “HyperLink” }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;

Property:`ContextMenuSettings.Items.Id`

[View]

[Model]

List menuItems = new List(); menuItems.Add(new ContextMenuItem() { Id = “id” }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = “menuItems” }; ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]

[Model]

List items = new List(); items.Add(new ContextMenuItem() { ImageUrl = “Images/zoomIn.Png” }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;

Property:`ContextMenuSettings.Items.Url`

[View]

[Model]

List menuItems = new List(); menuItems.Add(new ContextMenuItem() { Url = “Images/zoomIn.Png” }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = “menuItems” }; ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]

[Model]

List items = new List(); items.Add(new ContextMenuItem() { CssClass = “menu” }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;

Property:`ContextMenuSettings.Items.IconCss`

[View]

[Model]

List menuItems = new List(); menuItems.Add(new ContextMenuItem() { IconCss = “e-copy” }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = “menuItems” }; ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]

[Model]

List subItems = new List(); subItems.Add(new ContextMenuItem() { Name = “HyperLink” }); List items = new List(); items.Add(new ContextMenuItem() { SubItems = subItems }); DiagramContextMenu contextMenu = new DiagramContextMenu() { Items = items }; ViewBag.contextMenu = contextMenu;

Property:`ContextMenuSettings.Items.Items`

[View]

[Model]

List SubItems = new List(); SubItems.Add(new ContextMenuItem() { Id = “id” }); List menuItems = new List(); menuItems.Add(new ContextMenuItem() { Items = SubItems }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = menuItems }; ViewBag.contextMenuSettings = contextMenuSettings;

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

Property:`ContextMenuSettings.ShowCustomMenuOnly`

Specifies separator between the menu items Not applicable Property:`ContextMenuSettings.Items.Separator`

[View]

[Model]

List menuItems = new List(); menuItems.Add(new ContextMenuItem() { Separator = true }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = menuItems }; ViewBag.contextMenuSettings = contextMenuSettings;

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

[View]

[Model]

List menuItems = new List(); menuItems.Add(new ContextMenuItem() { Target = “.E-diagramcontent” }); DiagramContextMenuSettings contextMenuSettings = new DiagramContextMenuSettings() { Items = menuItems }; ViewBag.contextMenuSettings = contextMenuSettings;

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

DataSourceSettings

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

Property:`DataSourceSettings.Id`

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

Property:`DataSourceSettings.ParentId`

Describes query to retrieve a set of data from the specified datasource Property:`DataSourceSettings.Query`

Not applicable
Sets the unique id of the root data source item Property:`DataSourceSettings.Root`

Property:`DataSourceSettings.Root`

Describes the name of the table on which the specified query has to be executed Property:`DataSourceSettings.TableName`

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

CRUDAction crudAction = new CRUDAction() { Read = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes” }; ViewBag.crudAction = crudAction;

Not applicable
Specifies the create method which is used to get the nodes to be added from client side to the server side Property:`DataSourceSettings.CrudAction.Create`

[Model]

CRUDAction crudAction = new CRUDAction() { Create = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/AddNodes” }; ViewBag.crudAction = crudAction;

Not applicable
Specifies the update method which is used to get the updated data from client side to the server side Property:`DataSourceSettings.CrudAction.Update`

[View] [Model]

CRUDAction crudAction = new CRUDAction() { Update = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/UpdateNodes” }; ViewBag.crudAction = crudAction;

Not applicable
Specifies the destroy method which is used to get the deleted items data from client side to the server side Property:`DataSourceSettings.CrudAction.Destroy`

[View] [Model]

CRUDAction crudAction = new CRUDAction() { Destroy = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/DeleteNodes” }; ViewBag.crudAction = crudAction;

Not applicable
Specifies the read method to get the created nodes from client side to the server side Property:`DataSourceSettings.CrudAction.Read`

[View] [Model]

CRUDAction crudAction = new CRUDAction() { Read = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes” }; ViewBag.crudAction = crudAction;

Not applicable
Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`DataSourceSettings.CustomFields`

[View] [Model]

List customFields = new List(); customFields.Add(“Description”); customFields.Add(“Color”); ViewBag.customFields = customFields;

Property:`DataSourceSettings.Data`

[View] [Model]

List data = new List(); data.Add(“Description”); data.Add(“Color”); ViewBag.data = data;

Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`DataSourceSettings.ConnectionDataSource`

[View] [Model]

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { DataSource = DiagramContext.HierarchicalDetails.ToList(), SourceNode = “sourceNode”, TargetNode = “targetNode” }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Sets the datasource for the connection datasource settings items Property:`DataSourceSettings.ConnectionDataSource.DataSource`

[View] [Model]

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { DataSource = DiagramContext.HierarchicalDetails.ToList() }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Sets the unique id of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.Id`

[View] [Model]

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { Id = “Id” }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Sets the source node of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.SourceNode`

[View] [Model]

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { SourceNode = “sourceNode” }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Sets the target node of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.TargetNode`

[View] [Model]

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { TargetNode = “targetNode” }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Sets the sourcePointX value of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.SourcePointX`

[View] [Model]

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { SourcePointX = “200” }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Sets the sourcePointY value of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.SourcePointY`

[View] [Model]

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { SourcePointY = “200” }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Sets the targetPoint-x value of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.TargetPointX`

[View] [Model]

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { TargetPointX =“100” }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Sets the targetPoint-y value of the connection data source item Property:`DataSourceSettings.ConnectionDataSource.TargetPointY`

[View] [Model]

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { TargetPointY = “100” }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Specifies the method name which is used to get updated connectors from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction`

[View] [Model]

CRUDAction crudAction = new CRUDAction() { Read = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes” };

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Specifies the create method which is used to get the connectors to be added from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction.Create`

[View] [Model]

CRUDAction crudAction = new CRUDAction() { Create = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/AddNodes” };

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Specifies the update method which is used to get the updated connectors from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction.Update`

[View] [Model]

CRUDAction crudAction = new CRUDAction() { Update = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/UpdateNodes” };

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Specifies the destroy method which is used to get the deleted items data from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction.Destroy`

[View] [Model]

CRUDAction crudAction = new CRUDAction() { Destroy = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/DeleteNodes” };

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Specifies the read method which is used to get the data from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CrudAction.Read`

[View] [Model]

CRUDAction crudAction = new CRUDAction() { Read = ”http://js.Syncfusion.Com/demos/ejservices/api/Diagram/GetNodes” };

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CrudAction = crudAction }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable
Specifies the custom fields to get the updated data from client side to the server side Property:`DataSourceSettings.ConnectionDataSource.CustomFields`

[View] [Model]

List customFields = new List(); customFields.Add(“Description”); customFields.Add(“Color”);

ConnectionDataSourceSettings connectionDataSourceSettings = new ConnectionDataSourceSettings() { CustomFields = customFields }; ViewBag.connectionDataSourceSettings = connectionDataSourceSettings;

Not applicable

DefaultSettings

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

Property:`GetNodeDefaults`

[View]

function getNodeDefaults(obj, diagram) { obj.Shape = { type: ‘Basic’ }; }

[Model]

ViewBag.getNodeDefaults = getNodeDefaults;

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

Property:`GetConnectorDefaults`

[View]

function getConnectorDefaults(obj, diagram) { obj.Type = ‘Bezier’; }

[Model]

ViewBag.getConnectorDefaults = getConnectorDefaults;

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

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]

[Model]

ViewBag.create = “create”;

Property:`DrawingObject`

[View]

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

[Model]

ViewBag.created = created;

EnableAutoScroll

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

Property:`CanAutoScroll`

[Model]

EnableContextMenu

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

Property:`ContextMenuSettings.Show`

GetCustomCursor

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

[View]

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

[Model]

ViewBag.getCustomCursor = “getCustomCursor”;

GetCustomProperty

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

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

[Model]

ViewBag.getCustomProperty = “getCustomProperty”;

GetCustomTool

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

function getTool(action) { var tool; if (action === ‘userHandle’) { tool = new CloneTool(diagram.CommandHandler, true); } return tool; }

[Model]

ViewBag.getTool = “getTool”;

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

Height

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

Property:`Height`

HistoryManager

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

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

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

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

Property:`HistoryList.Push`

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

[View]

function customUndoRedo(args) { var diagram = $(“#diagram”).ejDiagram(“instance”); var node = args.object; var currentState = node.employeeData; node.employeeData = args.PrevState; args.PrevState = currentState; }

[Model]

ViewBag.customUndoRedo = “customUndoRedo”;

Property:`HistoryList.Redo`

Gets the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified Property:`HistoryManager.RedoStack`

Property:`HistoryList.RedoStack`

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

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

Property:`HistoryList.StartGroupAction`

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

[View] [Model]

ViewBag.customUndoRedo = “customUndoRedo”;

Property:`HistoryList.Undo`

Gets the number of undo actions to be stored on the history manager. Its an read-only property and the collection should not be modified Property:`HistoryManager.UndoStack`

Property:`HistoryList.UndoStack`

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

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

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

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

var diagram = $(“#diagram”).ejDiagram(“instance”); diagram.model.historyManager.canLog();

Property:`HistoryList.CanLog`

Layout

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

[View] [Model]

ViewBag.getBounds = “getBounds”;

Property:`Layout.Bounds`

[View] [Model]

ViewBag.getBounds = “getBounds”;

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

Property:`Layout.FixedNode`

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

[View] [Model]

ViewBag.getLayoutInfo = “getLayoutInfo”;

Property:`Layout.GetLayoutInfo`

[View] [Model]

ViewBag.getLayoutInfo = “getLayoutInfo”;

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

[View] [Model]

ViewBag.getConnectorSegments = “getConnectorSegments”;

Property:`Layout.ConnectorSegments`

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

Property:`Layout.HorizontalSpacing`

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

Property:`Layout.Margin`

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

Property:`Layout.HorizontalAlignment`

Defines how to vertically align the layout within the layout bounds Property:`Layout.VerticalAlignment`

Property:`Layout.VerticalAlignment`

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

Property:`Layout.Orientation`

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

Property:`Layout.Type`

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

Property:`Layout.VerticalSpacing`

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

Property:`Layout.Root`

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

Property:`Layout.SpringFactor`

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

Property:`Layout.MaxIteration`

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

Property:`Layout.SpringLength`

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

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

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

[View]

function getBranch(node, nodes) { return node.Data.Branch; }

[Model]

ViewBag.getBranch = “getBranch”;

Nodes

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

Property:`Nodes`

Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity Property:`Nodes.Activity`

Property:`Nodes.Shape.Activity`

To maintain additional information about nodes Property:`Nodes.AddInfo`

[View] [Model]

Dictionary<string, object> addInfo = new Dictionary<string, object>(); addInfo.Add(“Description”, “Bidirectional Flow”); ViewBag.addInfo = addInfo;

Property:`Nodes.AddInfo`

[View] [Model]

Dictionary<string, object> addInfo = new Dictionary<string, object>(); addInfo.Add(“Description”, “Bidirectional Flow”); ViewBag.addInfo = addInfo;

Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process Property:`Nodes.Annotation`

Property:`Nodes.Shape.Annotations`

Sets the angle between the BPMN shape and the annotation Property:`Nodes.Annotation.Angle`

Property:`Nodes.Shape.Annotations.Angle`

Sets the direction of the text annotation Property:`Nodes.Annotation.Direction`

Not applicable
Sets the height of the text annotation Property:`Nodes.Annotation.Height`

Property:`Nodes.Annotation.Height`

Sets the distance between the BPMN shape and the annotation Property:`Nodes.Annotation.Length`

Property:`Nodes.Shape.Annotations.Length`

Defines the additional information about the flow object in a BPMN Process Property:`Nodes.Annotation.Text`

Property:`Nodes.Shape.Annotations.Text`

Sets the width of the text annotation Property:`Nodes.Annotation.Width`

Property:`Nodes.Shape.Annotations.Width`

Sets the id for the annotation Not applicable Property:`Nodes.Shape.Annotations.Id`

Defines whether the group can be ungrouped or not Property:`Nodes.CanUngroup`

Not applicable
Sets the type of UML classifier Property:`Nodes.Classifier`

Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class Property:`Nodes.Class`

Not applicable
Sets the name of class Property:`Nodes.Class.Name`

Not applicable
Defines the collection of attributes Property:`Nodes.Class.Attributes`

Not applicable
Sets the name of the attribute Property:`Nodes.Class.Attributes.Name`

Not applicable
Sets the data type of attribute Property:`Nodes.Class.Attributes.Type`

Not applicable
Defines the visibility of the attribute Property:`Nodes.Class.Attributes.Scope`

Not applicable
Defines the collection of methods of a Class Property:`Nodes.Class.Methods`

Not applicable
Sets the name of the method Property:`Nodes.Class.Methods.Name`

Not applicable
Defines the arguments of the method Property:`Nodes.Class.Methods.Arguments`

[View] [Model]

Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Name = “name” }); ViewBag.parameters = parameters;

Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class Property:`Nodes.Class.Methods.Arguments.Name`

[View] [Model]

Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Name = “name” }); ViewBag.parameters = parameters;

Not applicable
Sets the type of the argument Property:`Nodes.Class.Methods.Arguments.Type`

[View] [Model]

Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Type = “String” }); ViewBag.parameters = parameters;

Not applicable
Sets the return type of the method Property:`Nodes.Class.Methods.Type`

Not applicable
Sets the visibility of the method Property:`Nodes.Class.Methods.Scope`

Not applicable
Defines the state of the node is collapsed/expanded Property:`Nodes.CollapseIcon`

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { Shape = IconShapes.ArrowDown }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon`

Sets the border color for collapse icon of node Property:`Nodes.CollapseIcon.BorderColor`

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { BorderColor = “red” }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon.BorderColor`

Sets the border width for collapse icon of node Property:`Nodes.CollapseIcon.BorderWidth`

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { BorderWidth = 2 }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon.BorderWidth`

Sets the fill color for collapse icon of node Property:`Nodes.CollapseIcon.FillColor`

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { FillColor = “red” }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon.Fill`

Defines the height for collapse icon of node Property:`Nodes.CollapseIcon.Height`

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { Height = 10 }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon.Height`

Sets the horizontal alignment of the icon Property:`Nodes.CollapseIcon.HorizontalAlignment`

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { HorizontalAlignment = HorizontalAlignment.Left }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon.HorizontalAlignment`

To set the margin for the collapse icon of node Property:`Nodes.CollapseIcon.Margin`

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { Margin = { Bottom = 15, Left = 15, Right = 15, Top = 15} }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon.Margin`

Sets the fraction/ratio(relative to node) that defines the position of the icon Property:`Nodes.CollapseIcon.Offset`

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { Offset = { X = 0.5F, Y = 0.5F } }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon.Offset`

Defines the shape of the collapsed state of the node Property:`Nodes.CollapseIcon.Shape`

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { Shape = IconShapes.ArrowDown }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon.Shape`

Sets the vertical alignment of the icon Property:`Nodes.CollapseIcon.VerticalAlignment `

[View] [Model]

DiagramIcon collapseIcon = new DiagramIcon() { VerticalAlignment = VerticalAlignment.Top }; ViewBag.collapseIcon = collapseIcon;

Property:`Nodes.CollapseIcon.VerticalAlignment `

Defines the custom content of the icon Not applicable Property:`Nodes.CollapseIcon.Content`

">

Defines the geometry of a path Not applicable Property:`Nodes.CollapseIcon.PathData`

Defines the corner radius of the icon border Not applicable Property:`Nodes.CollapseIcon.CornerRadius`

Defines the space that the icon has to be moved from the icon border Not applicable Property:`Nodes.CollapseIcon.Padding`

Defines the distance to be left between a node and its connections(In coming and out going connections) Property:`Nodes.ConnectorPadding`

Not applicable
Enables or disables the default behaviors of the node Property:`Nodes.Constraints`

Property:`Nodes.Constraints`

Defines the orientation of the container. Applicable, if the group is a container Property:`Nodes.Container.Orientation`

Not applicable
Sets the type of the container. Applicable if the group is a container. Property:`Nodes.Container.Type`

Not applicable
Defines the corner radius of rectangular shapes Property:`Nodes.CornerRadius`

Property:`Nodes.Shapes.CornerRadius`

This property allows you to customize nodes appearance using user-defined CSS Property:`Nodes.CssClass`

Not applicable
Defines the BPMN data object Property:`Nodes.Data.Type`

Property:`Nodes.Shape.DataObject.Type`

Defines whether the BPMN data object is a collection or not Property:`Nodes.Data.Collection`

Property:`Nodes.Shape.DataObject.Collection`

Defines an Enumeration in a UML Class Diagram Property:`Nodes.Enumeration`

Not applicable
Sets the name of the Enumeration Property:`Nodes.Enumeration.Name`

Not applicable
Defines the collection of enumeration members Property:`Nodes.Enumeration.Members`

Not applicable
Sets the name of the enumeration member Property:`Nodes.Enumeration.Members.Name`

Not applicable
Sets the type of the BPMN Events. Applicable, if the node is a BPMN event Property:`Nodes.Event`

Property:`Nodes.Shape.Event`

Defines the type of the trigger Property:`Nodes.Event.Trigger`

Property:`Nodes.Shape.Event.Trigger`

Defines whether the node can be automatically arranged using layout or not Property:`Nodes.ExcludeFromLayout`

Property:`Nodes.ExcludeFromLayout`

Defines the fill color of the node Property:`Nodes.FillColor`

Property:`Nodes.Style.Fill`

Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway Property:`Nodes.Gateway`

Property:`Nodes.Shape.Gateway`

Defines the x1 value of linear gradient Property:`Nodes.Gradient.LinearGradient.X1`

Property:`Nodes.Style.Gradient.LinearGradient.X1`

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

Property:`Nodes.Style.Gradient.LinearGradient.X2`

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

Property:`Nodes.Style.Gradient.LinearGradient.Y1`

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

Property:`Nodes.Style.Gradient.LinearGradient.Y2`

Defines the position of the outermost circle Property:`Nodes.Gradient.RadialGradient.Cx`

Property:`Nodes.Style.RadialGradient.Cx`

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

Property:`Nodes.Style.RadialGradient.Cy`

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

Property:`Nodes.Style.RadialGradient.Fx`

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

Property:`Nodes.Style.RadialGradient.Fy`

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

Property:`Nodes.Style.RadialGradient.Stops`

Sets the color to be filled over the specified region Property:`Nodes.Gradient.Stops.Color`

Property:`Nodes.Style.Gradient.Stops.Color`

Sets the position where the previous color transition ends and a new color transition starts Property:`Nodes.Gradient.Stops.Offset`

Property:`Nodes.Style.Gradient.Stops.Offset`

Describes the transparency level of the region Property:`Nodes.Gradient.Stops.Opacity`

Property:`Nodes.Style.Gradient.Stops.Opacity`

Defines the header of a swimlane/lane Property:`Nodes.Header`

Not applicable
Defines the height of the node Property:`Nodes.Height`

Property:`Nodes.Height`

Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container Property:`Nodes.HorizontalAlign`

Not applicable
Defines an interface in a UML interface Diagram Property:`Nodes.Interface`

Not applicable
Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface Property:`Nodes.Interface.Name`

Not applicable
Defines the collection of attributes Property:`Nodes.Interface.Attributes`

Not applicable
Sets the name of the attribute Property:`Nodes.Interface.Attributes.Name`

Not applicable
Sets the data type of attribute Property:`Nodes.Interface.Attributes.Type`

Not applicable
Defines the visibility of the attribute Property:`Nodes.Interface.Attributes.Scope`

Not applicable
Defines the collection of methods of a interface Property:`Nodes.Interface.Methods`

Not applicable
Sets the name of the method Property:`Nodes.Interface.Methods.Name`

Not applicable
Defines the arguments of the method Property:`Nodes.Interface.Methods.Arguments`

[View] [Model]

Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Name = “Date”, Type = “String” }); ViewBag.parameters = parameters;

Not applicable
Defines the name, attributes and methods of a interface. Applicable, if the node is a interface Property:`Nodes.Interface.Methods.Arguments.Name`

[View] [Model]

Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Name = “Date” }); ViewBag.parameters = parameters;

Not applicable
Sets the type of the argument Property:`Nodes.Interface.Methods.Arguments.Type`

[View] [Model]

Collection parameters = new Collection(); parameters.Add(new UMLParameter() { Type = “String” }); ViewBag.parameters = parameters;

Not applicable
Sets the return type of the method Property:`Nodes.Interface.Methods.Type`

Not applicable
Sets the visibility of the method Property:`Nodes.Interface.Methods.Scope`

Not applicable
Defines whether the sub tree of the node is expanded or collapsed Property:`Nodes.IsExpanded`

Property:`Nodes.IsExpanded`

Sets the node as a swimlane Property:`Nodes.IsSwimlane`

Not applicable
A collection of objects where each object represents a label Property:`Nodes.Labels`

Property:`Nodes.Annotations`

An array of objects where each object represents a lane. Applicable, if the node is a swimlane Property:`Nodes.Lanes`

Not applicable
This property allows you to customize lanes appearance using user-defined CSS Property:`Nodes.Lanes.CssClass`

Not applicable
Defines the header of the lane Property:`Nodes.Lanes.Header`

Not applicable
Defines the width of lane Property:`Nodes.Lanes.Width`

Not applicable
An array of objects where each object represents a child node of the lane Property:`Nodes.Lanes.Children`

Not applicable
Defines the object as a lane Property:`Nodes.Lanes.IsLane`

Not applicable
Defines the minimum space to be left between the bottom of parent bounds and the node Property:`Nodes.Margin`

Property:`Nodes.Margin`

Defines the maximum height limit of the node Property:`Nodes.MaxHeight`

Property:`Nodes.MaxHeight`

Sets the unique identifier of the node Property:`Nodes.Name`

Property:`Nodes.Id`

Sets the path geometry that defines the shape of a path node Property:`Nodes.PathData`

Property:`Nodes.Shape.Data`

An array of objects, where each object represents a smaller region(phase) of a swimlane Property:`Nodes.Phases`

Not applicable
Defines the header of the smaller regions Property:`Nodes.Phases.Label`

Not applicable
Defines the line color of the splitter that splits adjacent phases Property:`Nodes.Phases.LineColor`

Not applicable
Sets the length of the smaller region(phase) of a swimlane Property:`Nodes.Phases.Offset`

Not applicable
Sets the orientation of the phase Property:`Nodes.Phases.Orientation`

Not applicable
Sets the height of the phase headers Property:`Nodes.PhaseSize`

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`

Property:`Nodes.Pivot`

Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon Property:`Nodes.Points`

Property:`Nodes.Shape.Points`

An array of objects where each object represents a port Property:`Nodes.Ports`

Property:`Nodes.Ports`

Sets the border color of the port Property:`Nodes.Ports.BorderColor`

Property:`Nodes.Ports.Style.StrokeColor`

Defines whether connections can be created with the port Property:`Nodes.Ports.Constraints`

Property:`Nodes.Ports.Constraints`

An array of objects where each object represents a port Property:`Nodes.Ports.Shape`

Property:`Nodes.Ports.Shape`

Sets the vertical alignment of the port with respect to its immediate parent Not applicable Property:`Nodes.Ports.VerticalAlignment`

Defines the opacity and the position of shadow Property:`Nodes.Shadow`

Property:`Nodes.Shadow`

Defines the sub process of a BPMN Activity. Applicable, if the type of the BPMN activity is sub process Property:`Nodes.SubProcess`

Property:`Nodes.Shape.Activity.SubProcess`

Defines the collection of events that need to be appended with BPMN Sub-Process Property:`Nodes.SubProcess.Events`

Property:`Nodes.Shape.Activity.SubProcess.Events`

An array of objects where each object represents a port Property:`Nodes.SubProcess.Events.Ports`

[View] [Model]

Collection labels = new Collection(); labels.Add(new Label() { Name = “labelName” }); Collection ports = new Collection(); ports.Add(new Port() { Name = “portName” }); Collection events = new Collection(); events.Add(new BPMNEvent() { Ports = ports }); ViewBag.events = events;

Property:`Nodes.Shape.Activity.SubProcess.Events.Ports`

A collection of objects where each object represents a label Property:`Nodes.SubProcess.Events.Labels`

[View] [Model]

Collection labels = new Collection(); labels.Add(new Label() { Name = “labelName” }); Collection events = new Collection(); events.Add(new BPMNEvent() { Labels = labels }); ViewBag.events = events;

Property:`Nodes.Shape.Activity.SubProcess.Events.Annotations`

Defines the task of the BPMN activity. Applicable, if the type of activity is set as task Property:`Nodes.Task`

Property:`Nodes.Shape.Activity.Task`

NodeTemplate

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

[View]

[Model]

ViewBag.nodeTemplate = nodeTemplate;

Property:`SetNodeTemplate`

[View]

[Model]

ViewBag.setNodeTemplate = “setNodeTemplate”;

Layers

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

Property:`Layers`

A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes Property:`Layers.Print`

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`

Property:`Annotations.Content`

Offset for annotation content Property:`Labels.Offset`

Property:`Annotations.Offset`

Sets the hyperlink for the labels Property:`Labels.HyperLink`

Property:`Annotations.Hyperlink`

Enables/disables the bold style Property:`Labels.Bold`

Property:`Annotations.Style.Bold`

Sets the border color of the label Property:`Labels.BorderColor`

Property:`Annotations.Style.StrokeColor`

Sets the border width of the label Property:`Labels.BorderWidth`

Property:`Annotations.Style.StrokeWidth`

This property allows you to customize labels appearance using user-defined CSS Property:`Labels.CssClass`

Not applicable
Enables or disables the default behaviors of the label Property:`Labels.Constraints`

Property:`Annotations.Constraints`

Sets the fill color of the text area Property:`Labels.FillColor`

Property:`Annotations.Style.Fill`

Sets the font color of the text Property:`Labels.FontColor`

Property:`Annotations.Style.Color`

Sets the font family of the text Property:`Labels.FontFamily`

Property:`Annotations.Style.FontFamily`

Sets the height of the label Property:`Labels.Height`

Property:`Annotations.Height`

Sets the horizontal alignment of the label Property:`Labels.HorizontalAlignment`

Property:`Annotations.HorizontalAlignment`

To set the margin of the label Property:`Labels.Margin`

Property:`Annotations.Margin`

Defines whether the label is editable or not Property:`Labels.ReadOnly`

Property:`Annotations.Constraints`

Sets the id of svg/html templates. Applicable, if the node’s label is HTML or native Property:`Labels.TemplateId`

Not applicable
Defines how to align the text inside the label Property:`Labels.TextAlign`

Property:`Annotations.Style.TextAlign`

Enables or disables the visibility of the label Property:`Labels.Visible`

Property:`Annotations.Visibility`

Gets whether the label is currently being edited or not Property:`Labels.Mode`

Not applicable

PageSettings

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

Not applicable
Sets whether multiple pages can be created to fit all nodes and connectors Property:`PageSettings.MultiplePage`

Property:`PageSettings.MultiplePage`

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

Property:`PageSettings.Background.Color`

Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” Property:`PageSettings.scrollableArea`

Property:`ScrollSettings.ScrollableArea`

[View] [Model]

ViewBag.getScrollableArea = “getScrollableArea”;

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

Property:`PageSettings.BoundaryConstraints`

ScrollSettings

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

Property:`ScrollSettings.HorizontalOffset`

Allows to extend the scrollable region that is based on the scroll limit Property:`ScrollSettings.Padding`

Not applicable
Allows to read the maximum zoom value of scroller Not applicable Property:`ScrollSettings.MaxZoom`

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

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

[View] [Model]

ViewBag.getScrollableArea = “getScrollableArea”;

SnapSettings

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

Not applicable
Defines the appearance of horizontal gridlines Property:`SnapSettings.HorizontalGridLines`

[View] [Model]

List lineInterval = new List(); lineInterval.Add(1); lineInterval.Add(14); lineInterval.Add(0.5m); lineInterval.Add(14.5m); GridLines gridLines = new GridLines() { LinesInterval = lineInterval }; ViewBag.gridLines = gridLines;

Property:`SnapSettings.HorizontalGridlines`

[View] [Model]

double[] intervals = { 0.95, 9.05, 0.2, 9.75 }; DiagramSnapSettings snapSettings = new DiagramSnapSettings(); snapSettings.HorizontalGridlines = new DiagramGridlines() { LineIntervals = intervals }; ViewBag.SnapSettings = snapSettings;

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

[View] [Model]

List lineInterval = new List(); lineInterval.Add(1); lineInterval.Add(14); lineInterval.Add(0.5m); lineInterval.Add(14.5m); GridLines gridLines = new GridLines() { LinesInterval = lineInterval }; ViewBag.gridLines = gridLines;

Property:`SnapSettings.VerticalGridLines`

[View] [Model]

double[] lineInterval = { 0.95, 9.05, 0.2, 9.75 }; DiagramGridlines gridlines = new DiagramGridlines() { LineIntervals = lineInterval }; ViewBag.lineInterval = lineInterval;

Defines the angle by which the object needs to be snapped Property:`SnapSettings.SnapAngle`

Property:`SnapSettings.SnapAngle`

Sets the minimum distance between the selected object and the nearest object Property:`SnapSettings.SnapObjectDistance`

Property:`SnapSettings.SnapObjectDistance`

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

Property:`SnapSettings.Constraints`

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`

Property:`ZoomFactor`

[View]

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

[Model]

ViewBag.created = created;

Tool

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

Property:`Tool`

ShowTooltip

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

Property:`Constraints`

SelectedItems

behavior API in Essential JS 1 API in Essential JS 2
A read only collection of the selected items Property:`SelectedItems.Children`

var diagram = $(“#diagram”).ejDiagram(“instance”); for(var i =0; i< diagram.model.selectedItems.children.length; i++){ //Do your actions here }

Not applicable
Controls the visibility of selector Property:`SelectedItems.Constraints`

Property:`SelectedItems.Constraints`

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

Not applicable
A collection of frequently used commands that will be added around the selector Property:`SelectedItems.UserHandles`

var userHandle= []; var cloneHandle = ej.Datavisualization.Diagram.UserHandle(); userHandle.Push(cloneHandle); var diagram = $(“#DiagramContent”).EjDiagram(“instance”); $(“#diagramcontent”).EjDiagram({ selectedItems: { userHandles:userHandle } });

Property:`SelectedItems.UserHandles`

Sets the horizontal alignment of the user handle Property:`SelectedItems.UserHandles.HorizontalAlignment`

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

Property:`SelectedItems.UserHandles.HorizontalAlignment`

Defines the interactive behaviors of the user handle Property:`SelectedItems.UserHandles.Tool`

var CloneTool = (function(base) { ej.Datavisualization.Diagram.Extend(CloneTool, base); function CloneTool(name) { base.Call(this, name); this.SingleAction = true; this.ClonedNodes = []; this.Cursor = “pointer”; } CloneTool.Prototype.Mouseup = function(event) { this.Diagram.Copy(); this.Diagram.Paste(); } } return CloneTool; }); (ej.Datavisualization.Diagram.ToolBase); var userHandle = []; var cloneHandle = ej.Datavisualization.Diagram.UserHandle(); cloneHandle.Name = “cloneHandle”; cloneHandle.PathData = “M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z”; cloneHandle.Tool = new CloneTool(cloneHandle.Name);; userHandle.Push(cloneHandle); $(“#diagramcontent”).EjDiagram({ selectedItems: { userHandles: userHandle } });

Not applicable
Defines whether the user handle should be added, when more than one element is selected Property:`SelectedItems.UserHandles.EnableMultiSelection`

var userHandle = []; var cloneHandle = ej.Datavisualization.Diagram.UserHandle(); cloneHandle.Name = “cloneHandle”; cloneHandle.EnableMultiSelection = true; userHandle.Push(cloneHandle); $(“#diagramcontent”).EjDiagram({ selectedItems: { userHandles: userHandle } });

Not applicable
Sets the horizontal alignment of the user handle Not applicable Property:`SelectedItems.UserHandles.Displacement`

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]

[Model]

SerializationSettings serializationSettings = new SerializationSettings() { PreventDefaultValues = true }; ViewBag.serializationSettings = serializationSettings;

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`

Property:`Tooltip`

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

Not applicable
Sets the margin of the tooltip Property:`Tooltip.Margin`

Not applicable
Sets the svg/html template to be bound with tooltip Property:`Tooltip.TemplateId`

Property:`Tooltip.Content`

Defines if the Tooltip has tip pointer or not Not applicable Property:`Tooltip.ShowTipPointer`

Defines the position of the Tooltip Not applicable Property:`Tooltip.Position`