Class DiagramProperties

Inheritance
System.Object
EJTagHelper
DiagramProperties
Inherited Members
System.Object.ToString()
System.Object.Equals(System.Object)
System.Object.Equals(System.Object, System.Object)
System.Object.ReferenceEquals(System.Object, System.Object)
System.Object.GetHashCode()
System.Object.GetType()
System.Object.MemberwiseClone()
Namespace: Syncfusion.JavaScript.DataVisualization.Models
Assembly: Syncfusion.EJ.dll
Syntax
public class DiagramProperties : EJTagHelper

Constructors

DiagramProperties()

Declaration
public DiagramProperties()

Properties

AddInfo

Gets or sets the additional information about connectors

Declaration
[JsonProperty("addInfo")]
public object AddInfo { get; set; }
Property Value
Type Description
System.Object

null
Examples
            DiagramProperties Model = new DiagramProperties();
           Dictionary<string, object> AddInfo = new Dictionary<string, object>();
           AddInfo.Add("Description", "Bidirectional Flow");
           Model.AddInfo = AddInfo;          
           ViewData["diagramModel"] = Model;

AutoScrollChange

Gets or sets the name of the client side method that is defined to handle AutoScrollChange event

Declaration
[JsonProperty("autoScrollChange")]
public string AutoScrollChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle AutoScrollChange event.

<div>
@*Register AutoScrollChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.AutoScrollChange("autoScrollChange"))
</div>

<script>
  function autoScrollChange(args) {
  }
</script>

AutoScrollMargin

Declaration
[Obsolete("Use PageSettings.AutoScrollBorder")]
[JsonProperty("autoScrollMargin")]
public double AutoScrollMargin { get; set; }
Property Value
Type Description
System.Double

BackgroundColor

Gets or sets background color of diagram elements

Declaration
[JsonProperty("backgroundColor")]
public string BackgroundColor { get; set; }
Property Value
Type Description
System.String

"white"
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.BackgroundColor = "red";
           ViewData["diagramModel"] = Model;

BackgroundImage

Gets or sets the background image of diagram elements

Declaration
[JsonProperty("backgroundImage")]
public BackgroundImage BackgroundImage { get; set; }
Property Value
Type Description
BackgroundImage

""
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.BackgroundImage = "Syncfusion.png";
           ViewData["diagramModel"] = Model;

BridgeDirection

Gets or sets the direction of line bridges

Declaration
[JsonProperty("bridgeDirection")]
[JsonConverter(typeof(StringEnumConverter))]
public BridgeDirection BridgeDirection { get; set; }
Property Value
Type Description
BridgeDirection

BridgeDirection.Top;
Examples
            DiagramProperties Model = new DiagramProperties();
           Model.BridgeDirection = Syncfusion.JavaScript.DataVisualization.DiagramEnums.BridgeDirection.Top;
           ViewData["diagramModel"] = Model;

Click

Gets or sets the name of the client side method that is defined to handle Click event

Declaration
[JsonProperty("click")]
public string Click { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle Click event.

<div>
@*Register Click event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.Click("click"))
</div>

<script>
  function click(args) {
  }
</script>

CommandManager

Defines a set of custom commands and binds them with a set of desired key gestures.

Declaration
[JsonProperty("commandManager")]
public CommandManager CommandManager { get; set; }
Property Value
Type Description
CommandManager

Object
Examples
    <script>
       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();
       }
   </script>
           DiagramProperties Model = new DiagramProperties();
           Model.CommandManager = new CommandManager();
           Command Command = new Command();
           Command.Gesture = new Gesture();
           Command.Gesture.Key = Keys.C;
           Command.Gesture.KeyModifiers = KeyModifiers.Shift;
           Command.CanExecute = "canExecute";
           Command.Execute = "execute";
           Model.CommandManager.Commands.Add("clone", Command);
           ViewData["diagramModel"] = Model;

ConnectionChange

Gets or sets the name of the client side method that is defined to handle ConnectionChange event

Declaration
[JsonProperty("connectionChange")]
public string ConnectionChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle ConnectionChange event.

<div>
@*Register ConnectionChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.ConnectionChange("connectionChange"))
</div>

<script>
  function connectionChange(args) {
  }
</script>

ConnectorCollectionChange

Gets or sets the name of the client side method that is defined to handle ConnectorCollectionChange event

Declaration
[JsonProperty("connectorCollectionChange")]
public string ConnectorCollectionChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle ConnectorCollectionChange event.

<div>
@*Register ConnectorCollectionChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.ConnectorCollectionChange("connectorCollectionChange"))
</div>

<script>
  function connectorCollectionChange(args) {
  }
</script>

ConnectorDefaults

Declaration
[Obsolete("Use DefaultSettings.Connector")]
[JsonProperty("connectorDefaults")]
public Connector ConnectorDefaults { get; set; }
Property Value
Type Description
Connector

Connectors

Gets or sets collection of connector objects where each object represents a connector

Declaration
[JsonProperty("connectors")]
public Collection Connectors { get; set; }
Property Value
Type Description
Collection

new Collection()
Examples
           Connector Connector = new Connector()
           {
               Name = "connector1",
               SourcePoint = new DiagramPoint(100, 100),
               TargetPoint = new DiagramPoint(200, 200)
           };
           Model.Connectors.Add(Connector);

ConnectorSourceChange

Gets or sets the name of the client side method that is defined to handle ConnectorSourceChange event

Declaration
[JsonProperty("connectorSourceChange")]
public string ConnectorSourceChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle ConnectorSourceChange event.

<div>
@*Register ConnectorSourceChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.ConnectorSourceChange("connectorSourceChange"))
</div>

<script>
  function connectorSourceChange(args) {
  }
</script>

ConnectorTargetChange

Gets or sets the name of the client side method that is defined to handle ConnectorTargetChange event

Declaration
[JsonProperty("connectorTargetChange")]
public string ConnectorTargetChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle ConnectorTargetChange event.

<div>
@*Register ConnectorTargetChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.ConnectorTargetChange("connectorTargetChange"))
</div>

<script>
  function connectorTargetChange(args) {
  }
</script>

ConnectorTemplate

Gets or sets the custom JSON data with connector properties

Declaration
[JsonProperty("connectorTemplate")]
public string ConnectorTemplate { get; set; }
Property Value
Type Description
System.String

null
Examples
<script> 
   //Sets the default styles and binds custom data with connector
       function connectorTemplate(diagram, connector) {
           if(connector.sourceNode && connector.targetNode){
               connector.linecolor = "green";
           }
       }
</script>
           DiagramProperties Model = new DiagramProperties();
           Model.ConnectorTemplate = "connectorTemplate";
           ViewData["diagramModel"] = Model;

ConnectorType

Gets or sets  connector type to be drawn

Declaration
[JsonProperty("connectorType")]
[JsonConverter(typeof(StringEnumConverter))]
public ConnectorType ConnectorType { get; set; }
Property Value
Type Description
ConnectorType

ConnectorType.OrthogonalLine
Examples
         
        DiagramProperties Model = new DiagramProperties();
           Model.ConnectorType = ConnectorType.OrthogonalLine;
           ViewData["diagramModel"] = Model;

Constraints

Enables/Disables the default behaviors of the diagram

Declaration
[JsonConverter(typeof(StringEnumConverter))]
[JsonProperty("constraints")]
public DiagramConstraints Constraints { get; set; }
Property Value
Type Description
DiagramConstraints

DiagramConstraints.Default
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.Constraints = DiagramConstraints.Default | DiagramConstraints.Bridging;
           ViewData["diagramModel"] = Model;

ContextMenu

An object to customize the context menu of diagram

Declaration
[JsonProperty("contextMenu")]
public DiagramContextMenu ContextMenu { get; set; }
Property Value
Type Description
DiagramContextMenu

null
Examples
           DiagramProperties Model = new DiagramProperties();
           List<DiagramContextMenuItem> MenuItems = new List<DiagramContextMenuItem>();
           MenuItems.Add(new DiagramContextMenuItem() { Name = "name",Text="name" });
           MenuItems.Add(new DiagramContextMenuItem() { Name = "text", Text = "text" });
           MenuItems.Add(new DiagramContextMenuItem() { Name = "image", Text = "image" });
           MenuItems.Add(new DiagramContextMenuItem() { Name = "style", Text = "style" });
           Model.ContextMenu.Items = MenuItems;
           ViewData["diagramModel"] = Model;

ContextMenuBeforeOpen

Gets or sets the name of the client side method that is defined to handle ContextMenuBeforeOpen event

Declaration
[JsonProperty("contextMenuBeforeOpen")]
public string ContextMenuBeforeOpen { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle ContextMenuBeforeOpen event.

<div>
@*Register ContextMenuBeforeOpen event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.ContextMenuBeforeOpen("contextMenuBeforeOpen"))
</div>

<script>
  function contextMenuBeforeOpen(args) {
  }
</script>

ContextMenuClick

Gets or sets the name of the client side method that is defined to handle ContextMenuClick event

Declaration
[JsonProperty("contextMenuClick")]
public string ContextMenuClick { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle ContextMenuClick event.

<div>
@*Register ContextMenuClick event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.ContextMenuClick("contextMenuClick"))
</div>

<script>
  function contextMenuClick(args) {
  }
</script>

ContextMenuClose

Gets or sets the name of the client side method that is defined to handle ContextMenuClose event

Declaration
[JsonProperty("contextMenuClose")]
public string ContextMenuClose { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle ContextMenuClose event.

<div>
@*Register ContextMenuClose event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.ContextMenuClose("contextMenuClose"))
</div>

<script>
  function contextMenuClose(args) {
  }
</script>

Create

Gets or sets the name of the client side method that is defined to handle Create event

Declaration
[JsonProperty("create")]
public string Create { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle Create event.

<div>
@*Register create event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.Create("create"))
</div>

<script>
  function create(args) {
  }
</script>

DataSourceSettings

Configures the data source that is to be bound with diagram

Declaration
[JsonProperty("dataSourceSettings")]
[HtmlAttributeName("datasource-settings")]
public DataSourceSettings DataSourceSettings { get; set; }
Property Value
Type Description
DataSourceSettings

null
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.DataSourceSettings.DataSource = getDatasource();
           ViewData["diagramModel"] = Model;

DefaultSettings

Gets or sets the default values for nodes and connectors

Declaration
[JsonProperty("defaultSettings")]
public DefaultSettings DefaultSettings { get; set; }
Property Value
Type Description
DefaultSettings

new Object()
Examples
           DiagramProperties Model = new DiagramProperties();
           Node DefaultNode = new Node() { FillColor = "red" };
           Model.DefaultSettings.Node = DefaultNode;
           ViewData["diagramModel"] = Model;

Destroy

Gets or sets the name of the client side method that is defined to handle Destroy event

Declaration
[JsonProperty("destroy")]
public string Destroy { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle Destroy event.

<div>
@*Register destroy event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.Destroy("destroy"))
</div>

<script>
  function destroy(args) {
  }
</script>

DoubleClick

Gets or sets the name of the client side method that is defined to handle DoubleClick event

Declaration
[JsonProperty("doubleClick")]
public string DoubleClick { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle DoubleClick event.

<div>
@*Register DoubleClick event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.DoubleClick("doubleClick"))
</div>

<script>
  function doubleClick(args) {
  }
</script>

Drag

Gets or sets the name of the client side method that is defined to handle Drag event

Declaration
[JsonProperty("drag")]
public string Drag { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle Drag event.

<div>
@*Register Drag event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.Drag("drag"))
</div>

<script>
  function drag(args) {
  }
</script>

DragEnter

Gets or sets the name of the client side method that is defined to handle DragEnter event

Declaration
[JsonProperty("dragEnter")]
public string DragEnter { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle DragEnter event.

<div>
@*Register DragEnter event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.DragEnter("dragEnter"))
</div>

<script>
  function dragEnter(args) {
  }
</script>

DragLeave

Gets or sets the name of the client side method that is defined to handle DragLeave event

Declaration
[JsonProperty("dragLeave")]
public string DragLeave { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle DragLeave event.

<div>
@*Register DragLeave event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.DragLeave("dragLeave"))
</div>

<script>
  function dragLeave(args) {
  }
</script>

DragOver

Gets or sets the name of the client side method that is defined to handle DragOver event

Declaration
[JsonProperty("dragOver")]
public string DragOver { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle DragOver event.

<div>
@*Register DragOver event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.DragOver("dragOver"))
</div>

<script>
  function dragOver(args) {
  }
</script>

Drop

Gets or sets the name of the client side method that is defined to handle Drop event

Declaration
[JsonProperty("drop")]
public string Drop { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle Drop event.

<div>
@*Register Drop event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.Drop("drop"))
</div>

<script>
  function drop(args) {
  }
</script>

EditorFocusChange

Gets or sets the name of the client side method that is defined to handle EditorFocusChange event

Declaration
[JsonProperty("editorFocusChange")]
public string EditorFocusChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle EditorFocusChange event.

<div>
@*Register EditorFocusChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.EditorFocusChange("editorFocusChange"))
</div>

<script>
  function editorFocusChange(args) {
  }
</script>

EnableAutoScroll

Enables or disables auto scroll in diagram

Declaration
[JsonProperty("enableAutoScroll")]
public bool EnableAutoScroll { get; set; }
Property Value
Type Description
System.Boolean

true
Examples
            DiagramProperties Model = new DiagramProperties();
           Model.EnableAutoScroll = false;
           ViewData["diagramModel"] = Model;

EnableContextMenu

Enables or disables diagram context menu

Declaration
[JsonProperty("enableContextMenu")]
public bool EnableContextMenu { get; set; }
Property Value
Type Description
System.Boolean

true
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.EnableContextMenu = false;
           ViewData["diagramModel"] = Model;

GroupChange

Gets or sets the name of the client side method that is defined to handle GroupChange event

Declaration
[JsonProperty("groupChange")]
public string GroupChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle GroupChange event.

<div>
@*Register GroupChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.GroupChange("groupChange"))
</div>

<script>
  function groupChange(args) {
  }
</script>

Height

Gets or sets the height of the diagram

Declaration
[JsonProperty("height")]
public string Height { get; set; }
Property Value
Type Description
System.String

null
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.Height = "500px";
           ViewData["diagramModel"] = Model;

HistoryChange

Gets or sets the name of the client side method that is defined to handle HistoryChange event

Declaration
[JsonProperty("historyChange")]
public string HistoryChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle HistoryChange event.

<div>
@*Register HistoryChange event*@
@Html.EJ().Diagram("diagram").Width("100%").Height("100%").ClientSideEvents(s => s.HistoryChange("historyChange"))
</div>

<script>
  function historyChange(args) {
  }
</script>

HistoryManager

Customizes the undo redo functionality

Declaration
[JsonProperty("historyManager")]
public HistoryManager HistoryManager { get; set; }
Property Value
Type Description
HistoryManager

null
Examples
<script> 
       //Method to handle the custom action
       function customUndoRedo(args) {
       var Diagram = $("#diagram").ejDiagram("instance");
       var Node = args.object;
       var CurrentState = Node.empInfo;
       //Resets the state
       Node.empInfo = args.prevState;
       //Saves the previous state
       args.prevState = CurrentState;
   } 
</script>

           DiagramProperties Model = new DiagramProperties();
           Model.HistoryManager.Undo = "customUndoRedo";
           Model.HistoryManager.Redo = "customUndoRedo";

           ViewData["diagramModel"] = Model;

ItemClick

Gets or sets the name of the client side method that is defined to handle ItemClick event

Declaration
[JsonProperty("itemClick")]
public string ItemClick { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle ItemClick event.

<div>
@*Register ItemClick event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.ItemClick("itemClick"))
</div>

<script>
  function itemClick(args) {
  }
</script>

LabelRenderingMode

Gets or sets  label rendering mode

Declaration
[JsonProperty("labelRenderingMode")]
[JsonConverter(typeof(StringEnumConverter))]
public LabelRenderingMode LabelRenderingMode { get; set; }
Property Value
Type Description
LabelRenderingMode

LabelRenderingMode.Html
Examples
         
        DiagramProperties Model = new DiagramProperties();
           Model.labelRenderingMode = LabelRenderingMode.Svg;
           ViewData["diagramModel"] = Model;

Layers

Defines the properties of the layers

Declaration
[JsonProperty("layers")]
public Collection Layers { get; set; }
Property Value
Type Description
Collection

new Collection()
Examples
           DiagramProperties Model = new DiagramProperties();
           Layer layer = new Layer(){Name="layer",Visible=true,Print=true,Active=true,Lock=false,Objects=new Collection(){"layer1"}};            
           Model.Layers.Add(layer);
           ViewData["diagramModel"] = Model;

Layout

Automatically arranges the nodes and connectors in a predefined manner

Declaration
[JsonProperty("layout")]
public Layout Layout { get; set; }
Property Value
Type Description
Layout

null
Examples
           //fixedNode of the layout
           DiagramProperties Model = new DiagramProperties();
           Model.Layout.FixedNode = "nodename";
           ViewData["diagramModel"] = Model;

Locale

Gets or sets the current culture of diagram

Declaration
[JsonProperty("locale")]
public string Locale { get; set; }
Property Value
Type Description
System.String

"en-US"
Examples
            DiagramProperties Model = new DiagramProperties();
           Model.Locale = "en-US";
           ViewData["diagramModel"] = Model;

MouseEnter

Gets or sets the name of the client side method that is defined to handle MouseEnter event

Declaration
[JsonProperty("mouseEnter")]
public string MouseEnter { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle MouseEnter event.

<div>
@*Register MouseEnter event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.MouseEnter("mouseEnter"))
</div>

<script>
  function mouseEnter(args) {
  }
</script>

MouseHover

Gets or sets the name of the client side method that is defined to handle MouseOver event

Declaration
[JsonProperty("mouseOver")]
public string MouseHover { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle MouseOver event.

<div>
@*Register MouseOver event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.MouseHover("mouseOver"))
</div>

<script>
  function mouseOver(args) {
  }
</script>

MouseLeave

Gets or sets the name of the client side method that is defined to handle MouseLeave event

Declaration
[JsonProperty("mouseLeave")]
public string MouseLeave { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle MouseLeave event.

<div>
@*Register MouseLeave event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.MouseLeave("mouseLeave"))
</div>

<script>
  function mouseLeave(args) {
  }
</script>

NodeCollectionChange

Gets or sets the name of the client side method that is defined to handle NodeCollectionChange event

Declaration
[JsonProperty("nodeCollectionChange")]
public string NodeCollectionChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle NodeCollectionChange event.

<div>
@*Register NodeCollectionChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.NodeCollectionChange("nodeCollectionChange"))
</div>

<script>
  function nodeCollectionChange(args) {
  }
</script>

NodeDefaults

Declaration
[Obsolete("Use DefaultSettings.Node")]
[JsonProperty("nodeDefaults")]
public Node NodeDefaults { get; set; }
Property Value
Type Description
Node

Nodes

Gets or sets collection of Node/Group/swimlane objects where each object represents a node

Declaration
[JsonProperty("nodes")]
public Collection Nodes { get; set; }
Property Value
Type Description
Collection

new Collection()
Examples
           DiagramProperties Model = new DiagramProperties();
           Node Node = new Node();
           Node.Name = "node1";
           Node.Width = 175;
           Node.Height = 60; 
           Node.OffsetX = 100;
           Node.OffsetY = 100;
           Model.Nodes.Add(Node);
           ViewData["diagramModel"] = Model;

NodeTemplate

Gets or sets the custom JSON data with node properties

Declaration
[JsonProperty("nodeTemplate")]
public string NodeTemplate { get; set; }
Property Value
Type Description
System.String

null
Examples
   <script>
   //Binds the custom properties with node properties and sets the styles
   function nodeTemplate() {

   }
   </script>
          DiagramProperties Model = new DiagramProperties();
          Model.NodeTemplate = "nodeTemplate";
          ViewData["diagramModel"] = Model;

PageSettings

Defines the size and appearance of diagram page

Declaration
[JsonProperty("pageSettings")]
public PageSettings PageSettings { get; set; }
Property Value
Type Description
PageSettings

new PageSettings()
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.PageSettings.AutoScrollBorder = new AutoScrollBorder() { Left = 10, Right = 10, Bottom = 10, Top = 10 };
           ViewData["diagramModel"] = Model;

PropertyChange

Gets or sets the name of the client side method that is defined to handle PropertyChange event

Declaration
[JsonProperty("propertyChange")]
public string PropertyChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle PropertyChange event.

<div>
@*Register PropertyChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.PropertyChange("propertyChange"))
</div>

<script>
  function propertyChange(args) {
  }
</script>

RotationChange

Gets or sets the name of the client side method that is defined to handle RotationChange event

Declaration
[JsonProperty("rotationChange")]
public string RotationChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle RotationChange event.

<div>
@*Register RotationChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.RotationChange("rotationChange"))
</div>

<script>
  function rotationChange(args) {
  }
</script>

RulerSettings

Defines the properties of the horizontal/vertical ruler.

Declaration
[JsonProperty("rulerSettings")]
public RulerSettings RulerSettings { get; set; }
Property Value
Type Description
RulerSettings

new RulerSettings()
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.RulerSettings.ShowRulers = false;
           ViewData["diagramModel"] = Model;

ScrollChange

Gets or sets the name of the client side method that is defined to handle ScrollChange event

Declaration
[JsonProperty("scrollChange")]
public string ScrollChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle ScrollChange event.

<div>
@*Register ScrollChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.ScrollChange("scrollChange"))
</div>

<script>
  function scrollChange(args) {
  }
</script>

ScrollSettings

Defines the zoom value, zoom factor, scroll status and view port size of the diagram

Declaration
[JsonProperty("scrollSettings")]
public ScrollSettings ScrollSettings { get; set; }
Property Value
Type Description
ScrollSettings

new ScrollSettings()
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.ScrollSettings.HorizontalOffset = 50;
           ViewData["diagramModel"] = Model;

SegmentChange

Gets or sets the name of the client side method that is defined to handle SegmentChange event

Declaration
[JsonProperty("segmentChange")]
public string SegmentChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle SegmentChange event.

<div>
@*Register SegmentChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.SegmentChange("segmentChange"))
</div>

<script>
  function segmentChange(args) {
  }
</script>

Segments

Gets or sets collection of segment objects, where each object represents a segment.

Declaration
[JsonProperty("segments")]
public Collection Segments { get; set; }
Property Value
Type Description
Collection

SelectedItems

Defines the size and position of selected items and defines the appearance of selector

Declaration
[JsonProperty("selectedItems")]
public SelectedItems SelectedItems { get; set; }
Property Value
Type Description
SelectedItems

null
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.SelectedItems.Constraints = SelectorConstraints.UserHandles;
           ViewData["diagramModel"] = Model;

SelectionChange

Gets or sets the name of the client side method that is defined to handle SelectionChange event

Declaration
[HtmlAttributeName("selectionChange")]
[JsonProperty("selectionChange")]
public string SelectionChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle SelectionChange event.

<div>
@*Register SelectionChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.SelectionChange("selectionChange"))
</div>

<script>
  function selectionChange(args) {
  }
</script>

SelectorConstraints

Declaration
[JsonProperty("selectorConstraints")]
[JsonConverter(typeof(StringEnumConverter))]
[Obsolete("Use SelectedItems.Constraints")]
public SelectorConstraints SelectorConstraints { get; set; }
Property Value
Type Description
SelectorConstraints

SerializationSettings

Defines the serialization Settings for the objects

Declaration
[JsonProperty("serializationSettings")]
public SerializationSettings SerializationSettings { get; set; }
Property Value
Type Description
SerializationSettings

new SerializationSettings()
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.SerializationSettings.PreventDefaultValues = false;
           ViewData["diagramModel"] = Model;

SetTool

Declaration
[JsonProperty("setTool")]
public string SetTool { get; set; }
Property Value
Type Description
System.String

ShowTooltip

Declaration
[Obsolete("Use SelectedItems.Tooltip")]
[JsonProperty("showTooltip")]
public bool ShowTooltip { get; set; }
Property Value
Type Description
System.Boolean

SizeChange

Gets or sets the name of the client side method that is defined to handle SizeChange event

Declaration
[JsonProperty("sizeChange")]
public string SizeChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle SizeChange event.

<div>
@*Register SizeChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.SizeChange("sizeChange"))
</div>

<script>
  function sizeChange(args) {
  }
</script>

SnapSettings

Defines the gridlines and defines how and when the objects have to be snapped

Declaration
[JsonProperty("snapSettings")]
public SnapSettings SnapSettings { get; set; }
Property Value
Type Description
SnapSettings

new SnapSettings()
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.SnapSettings.EnableSnapToObject = false;
           ViewData["diagramModel"] = Model;

TemplateNodeRendering

Gets or sets the name of the client side method that is defined to handle TemplateNodeRendering event

Declaration
[JsonProperty("templateNodeRendering")]
public string TemplateNodeRendering { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle TemplateNodeRendering event.

<div>
@*Register TemplateNodeRendering event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.TemplateNodeRendering("templateNodeRendering"))
</div>

<script>
  function templateNodeRendering(args) {
  }
</script>

TextChange

Gets or sets the name of the client side method that is defined to handle TextChange event

Declaration
[JsonProperty("textChange")]
public string TextChange { get; set; }
Property Value
Type Description
System.String
Examples

This sample shows how to handle TextChange event.

<div>
@*Register TextChange event*@
@Html.EJ().Diagram("diagram").Width("900px").Height("100%").ClientSideEvents(s => s.TextChange("textChange"))
</div>

<script>
  function textChange(args) {
  }
</script>

Tool

Gets or sets the interactive behaviors of diagram

Declaration
[JsonProperty("tool")]
[JsonConverter(typeof(StringEnumConverter))]
public Tool Tool { get; set; }
Property Value
Type Description
Tool

Tool.MultipleSelect | Tool.SingleSelect
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.Tool = Tool.ContinuesDraw;
           ViewData["diagramModel"] = Model;

Tooltip

Gets or sets an object that defines the description, appearance and alignments of tooltips

Declaration
[JsonProperty("tooltip")]
public Tooltip Tooltip { get; set; }
Property Value
Type Description
Tooltip

null
Examples
   @Html.EJ().Diagram("diagramcontent")
   <script type="text/x-jsrender" id="mouseovertooltip">
   <div style="background-color: #F08080; color: white; white-space: nowrap; height: 20px">
       <span style="padding: 5px;"> {{:name}} </span>
   </div>
   </script>
           DiagramProperties Model = new DiagramProperties();
           Tooltip Tooltip = new Tooltip() { TemplateId = "mouseovertooltip", Alignment = new Alignment() { Vertical = VerticalAlignment.Bottom, Horizontal = HorizontalAlignment.Center } };
           Node Node = new Node() { Name = "elizabeth", Width = 70, Height = 40, OffsetX = 100, OffsetY = 100, Tooltip = Tooltip };
           Model.Nodes.Add(Node);
           ViewData["diagramModel"] = Model;

TooltipTemplateId

Declaration
[JsonProperty("tooltipTemplateId")]
[Obsolete("Use SelectedItems.Tooltip.TemplateId")]
public string TooltipTemplateId { get; set; }
Property Value
Type Description
System.String

Version

Declaration
[JsonProperty("version")]
public string Version { get; }
Property Value
Type Description
System.String

Width

Gets or sets the width of the diagram

Declaration
[JsonProperty("width")]
public string Width { get; set; }
Property Value
Type Description
System.String

null
Examples
           DiagramProperties Model = new DiagramProperties();
           Model.Width = "800px";
           ViewData["diagramModel"] = Model;

ZoomFactor

Declaration
[JsonProperty("zoomFactor")]
[Obsolete("Use ScrollSettings.ZoomFactor")]
public double ZoomFactor { get; set; }
Property Value
Type Description
System.Double

Methods

GetControlDetails()

Declaration
protected override object GetControlDetails()
Returns
Type Description
System.Object
Overrides

Load(String)

Load the diagram from JSON string

Declaration
public object Load(string JsonString)
Parameters
Type Name Description
System.String JsonString
Returns
Type Description
System.Object

ParseModel(String)

Declaration
public void ParseModel(string JsonString)
Parameters
Type Name Description
System.String JsonString

Save(String, String)

Save the diagram model as text file

Declaration
public void Save(string jsondata, string filename)
Parameters
Type Name Description
System.String jsondata
System.String filename