Class DiagramProperties
Inherited Members
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
[JsonConverter(typeof(StringEnumConverter))]
[JsonProperty("connectorType")]
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
[JsonConverter(typeof(StringEnumConverter))]
[JsonProperty("labelRenderingMode")]
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
[JsonProperty("selectionChange")]
[HtmlAttributeName("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
[JsonConverter(typeof(StringEnumConverter))]
[Obsolete("Use SelectedItems.Constraints")]
[JsonProperty("selectorConstraints")]
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
[JsonProperty("showTooltip")]
[Obsolete("Use SelectedItems.Tooltip")]
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
[JsonConverter(typeof(StringEnumConverter))]
[JsonProperty("tool")]
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
[Obsolete("Use SelectedItems.Tooltip.TemplateId")]
[JsonProperty("tooltipTemplateId")]
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
[Obsolete("Use ScrollSettings.ZoomFactor")]
[JsonProperty("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 |