Contents
- Background
- Bridging
- CommandManager
- Connectors
- ContextMenu
- DataSourceSettings
- DefaultSettings
- DrawType
- EnableAutoScroll
- EnableContextMenu
- GetCustomCursor
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 JavaScript Diagram control
1 Jan 202524 minutes to read
This article describes the API migration process of Diagram component from Essential® JS 1 to Essential® JS 2.
Background
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the background color of diagram elements |
Property:`backgroundColor`
$("#diagram").ejDiagram({
backgroundColor: "red"
});
|
Property:`backgroundColor`
var diagram = new ej.diagrams.Diagram({
backgroundColor: 'red'
});
diagram.appendTo('#diagram');
|
| Defines how to align the background image over the diagram area |
Property:`backgroundImage.alignment`
$("#diagramcontent").ejDiagram({
backgroundImage: {
alignment: ej.datavisualization.Diagram.ImageAlignment.XMidYMid
}
});
|
Property:`background.align`
var diagram = new ej.diagrams.Diagram({
pageSettings: {
background: {
align: 'XMidYMid'
}
}
});
diagram.appendTo('#diagram');
|
| Defines how the background image should be scaled/stretched |
Property:`backgroundImage.scale`
$("#diagramcontent").ejDiagram({
backgroundImage: {
scale: ej.datavisualization.Diagram.ScaleConstraints.Meet
}
});
|
Property:`background.scale`
var diagram = new ej.diagrams.Diagram({
pageSettings: {
background: {
scale: 'Meet'
}
}
});
diagram.appendTo('#diagram');
|
| Sets the source path of the background image |
Property:`backgroundImage.source`
$("#diagramcontent").ejDiagram({
backgroundImage: {
source: "Syncfusion.png"
}
});
|
Property:`background.source`
var diagram = new ej.diagrams.Diagram({
pageSettings: {
background: {
source: 'Syncfusion.png'
}
}
});
diagram.appendTo('#diagram');
|
Bridging
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Sets the direction of line bridges |
Property:`bridgeDirection`
$("#diagramcontent").ejDiagram({
bridgeDirection: ej.datavisualization.Diagram.BridgeDirection.Bottom
});
|
Property:`bridgeDirection`
var diagram = new ej.diagrams.Diagram({
bridgeDirection: 'Top'
});
diagram.appendTo('#diagram');
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| The command is executable at the moment or not. |
Property:`commandManager.commands.canExecute`
</br>
</br>
$("#diagramcontent").ejDiagram({
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.canExecute`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Defines what to be executed when the key combination is recognized |
Property:`commandManager.commands.execute`
</br>
</br>
$("#diagramcontent").ejDiagram({
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.execute`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Defines a combination of keys and key modifiers, on recognition of which the command will be executed |
Property:`commandManager.commands.gesture`
</br>
</br>
$("#diagramcontent").ejDiagram({
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.gesture`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Sets the key value, on recognition of which the command will be executed |
Property:`commandManager.commands.gesture.key`
</br>
</br>
$("#diagramcontent").ejDiagram({
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.gesture.key`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Sets a combination of key modifiers, on recognition of which the command will be executed. |
Property:`commandManager.commands.gesture.keyModifiers`
</br>
</br>
$("#diagramcontent").ejDiagram({
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.gesture.keyModifiers`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Defines any additional parameters that are required at runtime |
Property:`commandManager.commands.parameter`
</br>
</br>
$("#diagramcontent").ejDiagram({
commandManager: {
commands: {
"clone": {
parameter : "node",
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property:`commandManager.commands.parameter`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (var i = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
Connectors
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Allows the user to save custom information/data about a connector |
Property:`connectors.addInfo`
</br>
</br>
var addInfo = {
Description: "Bidirectional Flow"
};
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
addInfo: addInfo
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.addInfo`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the bridgeSpace of connector |
Property:`connectors.bridgeSpace`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
bridgeSpace: 15,
targetPoint: {
x: 200,
y: 200
},
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.bridgeSpace`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
bridgeSpace: 15,
targetPoint: {
x: 600,
y: 200
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Enables or disables the behaviors of connectors |
Property:`connectors.constraints`
</br>
</br>
var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.constraints`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
constraints: ConnectorConstraints.Default | ConnectorConstraints.Drag
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the radius of the rounded corner |
Property:`connectors.cornerRadius`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cornerRadius: 10, segments:[{ type: "orthogonal"}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.cornerRadius`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
cornerRadius: 10,
type: 'Orthogonal',
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Customize connectors appearance using user-defined CSS |
Property:`connectors.cssClass`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cssClass: "hoverConnector"
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| Sets the horizontal alignment of the connector |
Property:`connectors.horizontalAlign`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
horizontalAlign:ej.datavisualization.Diagram.HorizontalAlignment.Right
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| A collection of JSON objects where each object represents a label |
Property:`connectors.labels`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
labels:[{ text:"connector" }]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.annotations`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
annotations: [{
id: 'label',
content: 'Text',
offset: 0.5
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Stroke color of the connector |
Property:`connectors.lineColor`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor: "blue"
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.style.strokeColor`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: {
strokeColor: 'blue'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the pattern of dashes and gaps used to stroke the path of the connector |
Property:`connectors.lineDashArray`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor: "blue",
lineDashArray: "2,2"
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.style.strokeDashArray`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: {
strokeColor: 'blue',
strokeWidth: 3,
strokeDashArray: '2,2'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the width of the line |
Property:`connectors.lineWidth`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineWidth: 10
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.style.strokeWidth`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: {
strokeColor: 'blue',
strokeWidth: 3,
strokeDashArray: '2,2'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the padding value to ease the interaction with connectors |
Property:`connectors.lineHitPadding`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineHitPadding: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.hitPadding`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
hitPadding: 10
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the bottom of parent bounds and the connector |
Property:`connectors.marginBottom`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginBottom: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.margin.bottom`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: {
bottom: 3
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the top of parent bounds and the connector |
Property:`connectors.marginTop`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginTop: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.margin.top`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: {
top: 3
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the left of parent bounds and the connector |
Property:`connectors.marginLeft`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginLeft: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.margin.left`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: {
left: 3
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the right of parent bounds and the connector |
Property:`connectors.marginRight`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginRight: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.margin.right`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: {
right: 3
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets a unique name for the connector |
Property:`connectors.name`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.id`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the transparency of the connector |
Property:`connectors.opacity`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
opacity: 0.5
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.style.opacity`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: {
opacity: 0.5
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the parent name of the connector. |
Property:`connectors.parent`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
parent: "group"
};
var group = {
name: "group",
children: ["connector"]
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [group]
});
|
Not applicable |
| An array of JSON objects where each object represents a segment |
Property:`connectors.segments`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "straight",
point: {
x: 75,
y: 150
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Orthogonal',
length: 30,
direction: 'Bottom'
},
{
type: 'Orthogonal',
length: 80,
direction: 'Right'
}
]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the direction of orthogonal segment |
Property:`connectors.segments.direction`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "straight",
point: {
x: 75,
y: 150
},
direction: "bottom"
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.direction`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Orthogonal',
length: 30,
direction: 'Bottom'
},
{
type: 'Orthogonal',
length: 80,
direction: 'Right'
}
]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length of orthogonal segment |
Property:`connectors.segments.length`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "straight",
point: {
x: 75,
y: 150
},
length: 50
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.length`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Orthogonal',
length: 30,
direction: 'Bottom'
},
{
type: 'Orthogonal',
length: 80,
direction: 'Right'
}
]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the end point of bezier/straight segment |
Property:`connectors.segments.point`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "straight",
point: {
x: 75,
y: 150
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.point`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Straight',
point: {
x: 800,
y: 50
}
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the first control point of the bezier segment |
Property:`connectors.segments.point1`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "bezier",
point1: {
x: 150,
y: 50
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.point1`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: {
x: 600,
y: 300
},
point1: {
x: 525,
y: 475
}
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the second control point of bezier segment |
Property:`connectors.segments.point2`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "bezier",
point1: {
x: 150,
y: 50
},
point2: {
x: 150,
y: 150
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.point2`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: {
x: 600,
y: 300
},
point1: {
x: 525,
y: 475
},
point2: {
x: 575,
y: 475
}
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the type of the segment |
Property:`connectors.segments.type`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: ej.datavisualization.Diagram.Segments.Bezier
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.type`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: {
x: 600,
y: 300
},
point1: {
x: 525,
y: 475
},
point2: {
x: 575,
y: 475
}
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length and angle between the first control point and the start point of bezier segment |
Property:`connectors.segments.vector1`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "bezier",
vector1: {
distance: 75,
angle: 0
},
vector2: {
distance: 75,
angle: 180
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.vector1`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: {
x: 900,
y: 160
},
vector1: {
angle: 20,
distance: 75
},
vector2: {
angle: 20,
distance: 75
}
}],
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length and angle between the second control point and end point of bezier segment |
Property:`connectors.segments.vector2`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "bezier",
vector1: {
distance: 75,
angle: 0
},
vector2: {
distance: 75,
angle: 180
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.vector2`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: {
x: 900,
y: 160
},
vector1: {
angle: 20,
distance: 75
},
vector2: {
angle: 20,
distance: 75
}
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the type of the connector |
Property:`connectors.shape.type`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape: {
type: "bpmn"
},
segments: [{
type: "straight"
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.shape.type`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: {
x: 600,
y: 300
},
point1: {
x: 525,
y: 475
},
point2: {
x: 575,
y: 475
}
}],
shape: {
type: 'Bpmn',
flow: 'Message',
message: 'InitiatingMessage'
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the source decorator of the connector |
Property:`connectors.sourceDecorator`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border color of the source decorator |
Property:`connectors.sourceDecorator.borderColor`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
borderColor: "red"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.style.strokeColor`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
style: {
strokeColor: 'red'
},
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border width of the decorator |
Property:`connectors.sourceDecorator.borderWidth`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
borderWidth: 5
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.style.strokeWidth`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
strokeWidth: 5
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines to customize sourceDecorator appearance using user-defined CSS |
Property:`connectors.sourceDecorator.cssClass`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
cssClass: "hoverDecorator"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| Sets the fill color of the source decorator |
Property:`connectors.sourceDecorator.fillColor`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
fillColor: "red"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.style.fill`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
fill: 'black'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the height of the source decorator |
Property:`connectors.sourceDecorator.height`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
width: 10,
height: 10
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.height`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
height: 10,
width: 10
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the custom shape of the source decorator |
Property:`connectors.sourceDecorator.pathData`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "path",
pathData: "M 376.892, 225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.pathData`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Custom',
pathData: "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the shape of the source decorator. |
Property:`connectors.sourceDecorator.shape`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: ej.datavisualization.Diagram.DecoratorShapes.Circle
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.shape`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the width of the source decorator |
Property:`connectors.sourceDecorator.width`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
width: 10,
height: 10
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.width`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
width: 10,
height: 10
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the source node of the connector |
Property:`connectors.sourceNode`
</br>
</br>
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50
};
var node2 = {
name: "target",
offsetX: 300,
offsetY: 300,
width: 50,
height: 50
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target"
};
$("#diagramcontent").ejDiagram({
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property:`connectors.sourceID`
</br>
</br>
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
sourceID: 'source',
targetID: 'target'
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the space to be left between the source node and the source point of a connector |
Property:`connectors.sourcePadding`
</br>
</br>
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50
};
var node2 = {
name: "target",
offsetX: 300,
offsetY: 300,
width: 50,
height: 50
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target",
sourcePadding: 2,
targetPadding: 2
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.hitPadding`
</br>
</br>
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source',
targetID: 'target'
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Describes the start point of the connector |
Property:`connectors.sourcePoint`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourcePoint`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the source port of the connector |
Property:`connectors.sourcePort`
</br>
</br>
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50,
ports: [{
name: "port",
offset: {
x: 1,
y: 0.5
}
}]
};
var node2 = {
name: "target",
offsetX: 200,
offsetY: 200,
width: 50,
height: 50,
ports: [{
name: "port1",
offset: {
x: 0,
y: 0.5
}
}]
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target",
sourcePort: "port",
targetPort: "port1"
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.sourcePortID`
</br>
</br>
var nodeport1 = {
id: 'port',
shape: 'Square',
offset: {
x: 1,
y: 0.5
}
};
var nodeport2 = {
id: 'port1',
shape: 'Square',
offset: {
x: 0,
y: 0.5
}
};
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90,
ports: [nodeport1]
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90,
ports: [nodeport2]
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
sourceID: 'source',
targetID: 'target',
sourcePortID: 'port',
targetPortID: 'port1',
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the target decorator of the connector |
Property:`connectors.targetDecorator`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border color of the target decorator |
Property:`connectors.targetDecorator.borderColor`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
borderColor: "red"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.style.strokeColor`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
style: {
strokeColor: 'red'
},
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border width of the decorator |
Property:`connectors.targetDecorator.borderWidth`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
borderWidth: 5
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.style.strokeWidth`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
strokeWidth: 5
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines to customize target Decorator appearance using user-defined CSS |
Property:`connectors.targetDecorator.cssClass`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
cssClass: "hoverDecorator"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| Sets the fill color of the target decorator |
Property:`connectors.targetDecorator.fillColor`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
fillColor: "red"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.style.fill`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
fill: 'black'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the height of the target decorator |
Property:`connectors.targetDecorator.height`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
width: 10,
height: 10
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.height`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
height: 10,
width: 10
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the custom shape of the target decorator |
Property:`connectors.targetDecorator.pathData`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "path",
pathData: "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.pathData`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Custom',
pathData: "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the shape of the target decorator. |
Property:`connectors.targetDecorator.shape`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: ej.datavisualization.Diagram.DecoratorShapes.Circle
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.shape`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the width of the target decorator |
Property:`connectors.targetDecorator.width`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
width: 10,
height: 10
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.width`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
width: 10,
height: 10
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the target node of the connector |
Property:`connectors.targetNode`
</br>
</br>
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50
};
var node2 = {
name: "target",
offsetX: 300,
offsetY: 300,
width: 50,
height: 50
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target"
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.targetID`
</br>
</br>
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
sourceID: 'source',
targetID: 'target'
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the space to be left between the target node and the target point of a connector |
Property:`connectors.targetPadding`
</br>
</br>
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50
};
var node2 = {
name: "target",
offsetX: 300,
offsetY: 300,
width: 50,
height: 50
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target",
sourcePadding: 2,
targetPadding: 2
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.hitPadding`
</br>
</br>
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source',
targetID: 'target'
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Describes the start point of the connector |
Property:`connectors.targetPoint`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetPoint`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the target port of the connector |
Property:`connectors.targetPort`
</br>
</br>
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50,
ports: [{
name: "port",
offset: {
x: 1,
y: 0.5
}
}]
};
var node2 = {
name: "target",
offsetX: 200,
offsetY: 200,
width: 50,
height: 50,
ports: [{
name: "port1",
offset: {
x: 0,
y: 0.5
}
}]
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target",
sourcePort: "port",
targetPort: "port1"
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.targetPortID`
</br>
</br>
var nodeport1 = {
id: 'port',
shape: 'Square',
offset: {
x: 1,
y: 0.5
}
};
var nodeport2 = {
id: 'port1',
shape: 'Square',
offset: {
x: 0,
y: 0.5
}
};
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90,
ports: [nodeport1]
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90,
ports: [nodeport2]
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
sourceID: 'source',
targetID: 'target',
sourcePortID: 'port',
targetPortID: 'port1',
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the tooltip that should be shown when the mouse hovers over connector |
Property:`connectors.tooltip`
</br>
</br>
var tooltip = {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
}
};
var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
var connector = {
name: "flow",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip,
tooltip: tooltip
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
}) < script type = "text/x-jsrender"
id = "mouseovertooltip" >
<
div style = "background-color: #F08080; color: white; white-space: nowrap; height: 20px" >
<
span style = "padding: 5px;" > < /span> <
/div> <
/script>
var tooltip = {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
}
};
var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
var connector = {
name: "flow",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip,
tooltip: tooltip
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});;
|
Property:`connectors.tooltip`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
tooltip: {
content: 'Connector',
position: 'TopCenter',
showTipPointer: true,
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the vertical alignment of connector |
Property:`connectors.verticalAlign`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 150,
y: 150
},
verticalAlign: ej.datavisualization.Diagram.VerticalAlignment.Bottom
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| Enables or disables the visibility of connector |
Property:`connectors.visible`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
visible: true
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.visible`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
visible: true
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the z-index of the connector |
Property:`connectors.zOrder`
</br>
</br>
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
zOrder: 1000
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.zIndex`
</br>
</br>
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
zIndex: -1
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Binds the custom JSON data with connector properties |
Property:`connectors.connectorTemplate`
</br>
</br>
var data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
id: "Id",
parent: "ReportingPerson",
dataSource: data
},
connectorTemplate: "connectorTemplate"
});
function connectorTemplate(diagram, connector) {
if (connector.sourceNode && connector.targetNode) {
connector.linecolor = "green";
}
}
|
Not applicable |
| Enables/Disables the default behaviors of the diagram |
Property:`constraints`
</br>
</br>
var DiagramConstraints = ej.datavisualization.Diagram.DiagramConstraints;
$("#diagramcontent").ejDiagram({
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging
});
|
Property:`constraints`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging
});
diagram.appendTo('#diagram');
|
ContextMenu
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the collection of context menu items |
Property:`contextMenu.items`
</br>
</br>
var menuitems = [{
"name": "hyperLink",
"text": "Hyperlink",
"image": "",
"style": ""
}];
var contextMenu = {
items: menuitems
};
$("#diagramcontent").ejDiagram({
contextMenu: contextMenu
});
|
Property:`contextMenuSettings.items`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true,
items: [{
text: 'delete',
id: 'delete',
target: '.e-diagramcontent',
iconCss: 'e-copy'
}],
},
});
diagram.appendTo('#diagram');
|
| Defines the text for the collection of context menu item |
Property:`contextMenu.items.text`
</br>
</br>
var menuitems = [{
"text": "ZoomIn"
}];
var contextMenu = {
items: menuitems
};
$("#diagramcontent").ejDiagram({
contextMenu: contextMenu
});
|
Property:`contextMenuSettings.items.text`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true,
items: [{
text: 'ZoomIn'
}],
},
});
diagram.appendTo('#diagram');
|
| Defines the name for the collection of context menu items |
Property:`contextMenu.items.name`
</br>
</br>
var menuitems = [{
"name": "hyperLink"
}];
var contextMenu = {
items: menuitems
};
$("#diagramcontent").ejDiagram({
contextMenu: contextMenu
});
|
Property:`contextMenuSettings.items.id`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true,
items: [{
text: 'delete',
id: 'delete'
}]
},
});
diagram.appendTo('#diagram');
|
| Defines the image url for the collection of context menu items |
Property:`contextMenu.items.imageUrl`
</br>
</br>
var menuitems = [{
"name": "zoomin",
"text": "ZoomIn",
"imageUrl": "Images/zoomin.png",
"style": ""
}];
var contextMenu = {
items: menuitems
};
$("#diagramcontent").ejDiagram({
contextMenu: contextMenu
});
|
Property:`contextMenuSettings.items.url`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true,
items: [{
'id': 'zoomin',
'text': 'ZoomIn',
'url': 'Images/zoomin.png',
}],
},
});
diagram.appendTo('#diagram');
|
| Defines the cssClass for the collection of context menu items |
Property:`contextMenu.items.cssClass`
</br>
</br>
var menuitems = [{
"name": "zoomin",
"text": "ZoomIn",
"imageUrl": "Images/zoomin.png",
"cssClass": "menu",
"style": ""
}];
var contextMenu = {
items: menuitems
};
$("#diagramcontent").ejDiagram({
contextMenu: contextMenu
});
|
Property:`contextMenuSettings.items.iconCss`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true,
items: [{
text: 'delete',
id: 'delete',
target: '.e-diagramcontent',
iconCss: 'e-copy'
}],
},
});
diagram.appendTo('#diagram');
|
| Defines the collection of sub items for the context menu items |
Property:`contextMenu.items.subItems`
</br>
</br>
$("#diagramcontent").ejDiagram({
contextMenu: {
items: [{
name: "zoom",
text: "Zoom",
subItems: [{
name: "zoomIn",
text: "ZoomIn"
}, {
name: "zoomOut",
text: "ZoomOut"
}]
}]
}
});
|
Property:`contextMenuSettings.items`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true,
items: [{
text: 'Zoom',
id: 'zoom',
items: [{
name: "zoomIn",
text: "ZoomIn"
}, {
name: "zoomOut",
text: "ZoomOut"
}]
}],
showCustomMenuOnly: false,
},
});
diagram.appendTo('#diagram');
|
| Set whether to display the default context menu items or not |
Property:`contextMenu.showCustomMenuItemsOnly`
</br>
</br>
var contextMenu = {
showCustomMenuItemsOnly: true
};
$("#diagramcontent").ejDiagram({
contextMenu: contextMenu
});
|
Property:`contextMenuSettings.showCustomMenuOnly`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
showCustomMenuOnly: false,
},
});
diagram.appendTo('#diagram');
|
| Specifies separator between the menu items | Not applicable |
Property:`contextMenuSettings.items.separator`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true,
items: [{
text: 'Save',
id: 'save',
target: '.e-diagramcontent',
iconCss: 'e-save',
separator: true
},
{
text: 'Load',
id: 'load',
target: '.e-diagramcontent',
iconCss: 'e-load'
},
},
});
diagram.appendTo('#diagram');
|
| Define the target to show the menu item. | Not applicable |
Property:`contextMenuSettings.items.target`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true,
items: [{
text: 'delete',
id: 'delete',
target: '.e-diagramcontent',
iconCss: 'e-copy'
}],
showCustomMenuOnly: false,
},
});
diagram.appendTo('#diagram');
|
| Enables/Disables the context menu items | Not applicable |
Property:`contextMenuSettings.show`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true,
items: [{
text: 'delete',
id: 'delete',
target: '.e-diagramcontent',
iconCss: 'e-copy'
}],
showCustomMenuOnly: false,
},
});
diagram.appendTo('#diagram');
|
DataSourceSettings
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property:`dataSourceSettings.dataSource`
</br>
</br>
var data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
dataSource: data
}
});
|
Property:`dataSourceSettings.dataManager`
</br>
</br>
var items = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
var diagram = new ej.diagrams.Diagram({
dataSourceSettings: {
dataManager: items
},
});
diagram.appendTo('#diagram');
|
| Sets the unique id of the data source items |
Property:`dataSourceSettings.id`
</br>
</br>
var data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
id: "Id",
dataSource: data
}
});
|
Property:`dataSourceSettings.id`
</br>
</br>
var items = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
var diagram = new ej.diagrams.Diagram({
dataSourceSettings: {
id: 'Id',
dataManager: items
},
});
diagram.appendTo('#diagram');
|
| Defines the parent id of the data source item |
Property:`dataSourceSettings.parent`
</br>
</br>
var data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
id: "Id",
parent: "ReportingPerson",
dataSource: data
}
});
|
Property:`dataSourceSettings.parentId`
</br>
</br>
var items = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
var diagram = new ej.diagrams.Diagram({
dataSourceSettings: {
id: 'Id',
parentId: 'ReportingPerson',
dataManager: items
},
});
diagram.appendTo('#diagram');
|
| Describes query to retrieve a set of data from the specified datasource |
Property:`dataSourceSettings.query`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
dataSource: ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
}),
query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
tableName: "Employees",
id: "EmployeeID",
parent: "ReportsTo"
}
});
|
Not applicable |
| Sets the unique id of the root data source item |
Property:`dataSourceSettings.root`
</br>
</br>
var data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
id: "Id",
parent: "ReportingPerson",
root: "E1",
dataSource: data
}
});
|
Property:`dataSourceSettings.root`
</br>
</br>
var items = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
var diagram = new ej.diagrams.Diagram({
dataSourceSettings: {
id: 'Id',
parentId: 'ReportingPerson',
dataManager: items,
root: 'E1'
},
});
diagram.appendTo('#diagram');
|
| Describes the name of the table on which the specified query has to be executed |
Property:`dataSourceSettings.tableName`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
dataSource: ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
}),
query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
//Table name
tableName: "Employees",
id: "EmployeeID",
parent: "ReportsTo"
}
});
|
Not applicable |
| Specifies the method name which is used to get the updated data from client side to the server side |
Property:`dataSourceSettings.crudAction`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
crudAction:
{
read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes
}
}
});
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
crudAction:
{
create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddNodes",
}
}
});
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
crudAction:
{
update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateNodes",
}
}
});
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
crudAction:
{
destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteNodes"
}
}
});
|
Not applicable |
| Specifies the read method to get the created nodes from client side to the server side |
Property:`dataSourceSettings.crudAction.read`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
crudAction:
{
read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes
}
}
});
|
Not applicable |
| Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property:`dataSourceSettings.customFields`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
id: 'Name',
customFields: [
"Description",
"Color"
]
}
});
|
Property:`dataSourceSettings.data`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
dataSourceSettings: { id: 'Name',
customFields: [
"Description",
"Color"
] },
});
diagram.appendTo('#diagram');
|
| Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property:`dataSourceSettings.connectionDataSource`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name"
}
}
});
|
Not applicable |
| Sets the datasource for the connection datasource settings items |
Property:`dataSourceSettings.connectionDataSource.dataSource`
</br>
</br>
var data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
id: "Name",
connectionDataSource: {
id: "Name",
dataSource: data
}
}
});
|
Not applicable |
| Sets the unique id of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.id`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name"
}
}
});
|
Not applicable |
| Sets the source node of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.sourceNode`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "sourceNode",
}
}
});
|
Not applicable |
| Sets the target node of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.targetNode`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
targetNode: "targetNode"
}
}
});
|
Not applicable |
| Sets the sourcePointX value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.sourcePointX`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourcePointX:200
}
}
});
|
Not applicable |
| Sets the sourcePointY value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.sourcePointY`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourcePointY:200
}
}
});
|
Not applicable |
| Sets the x point value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.targetPointX`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
targetPointX:200
}
}
});
|
Not applicable |
| Sets the y point value of the connection data source item |
Property:`dataSourceSettings.connectionDataSource.targetPointY`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
targetPointY:200
}
}
});
|
Not applicable |
| Specifies the method name which is used to get updated connectors from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.crudAction`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "sourceNode",
targetNode: "targetNode",
crudAction: {
read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
}
}
}
});
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "sourceNode",
targetNode: "targetNode",
crudAction: {
create: http://js.syncfusion.com/demos/ejservices/api/Diagram/AddConnectors",
}
}
}
});
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
update: http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateConnectors",
}
}
}
});
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
destroy: http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteConnectors"
}
}
}
});
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
}
}
}
});
|
Not applicable |
| Specifies the custom fields to get the updated data from client side to the server side |
Property:`dataSourceSettings.connectionDataSource.customFields`
</br>
</br>
$("#diagramcontent").ejDiagram({
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
customFields: [ "Description", "Color"]
}
}
});
|
Not applicable |
| Binds the custom data with node model |
Property:`dataSourceSettings.doBinding`
</br>
</br>
$("#diagramcontent").ejDiagram({
width: 1500, height: 2500,
layout: { type: 'HierarchicalTree', verticalSpacing: 40 },
dataSourceSettings: {
id: 'Name', parentId: 'ReportingPerson', dataManager: items,
doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {
nodeModel.annotations = [{
content: data['Name'], margin: { top: 10 }
}];
}
}
});
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
defaultSettings: { node: { fillColor:"red"} }
});
|
Property:`getNodeDefaults`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
getNodeDefaults: (object: Node) => {
object.style = { fill: 'lightgrey', strokeColor: 'none', strokeWidth: 2 };
return object;
}
});
diagram.appendTo('#diagram');
|
| Initializes the default connector properties |
Property:`defaultSettings.connector`
</br>
</br>
$("#diagramcontent").ejDiagram({
defaultSettings: { connector: { lineColor:"red", lineWidth:4, lineDashArray:"2,2" } }
});
|
Property:`getConnectorDefaults`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
getConnectorDefaults: (connector: ConnectorModel) => {
connector= {
targetDecorator:{shape 'None'},
type : 'Orthogonal'};
return connector;
}
});
diagram.appendTo('#diagram');
|
| Initializes the default properties of groups |
Property:`defaultSettings.group`
</br>
</br>
$("#diagramcontent").ejDiagram({
defaultSettings: { group: {constraints: ej.datavisualization.Diagram.NodeConstraints.Default & ~ej.datavisualization.Diagram.NodeConstraints.Drag } }
});
|
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`
</br>
</br>
$("#diagramcontent").ejDiagram({
drawType:{type:"node"}
});
|
Property:`drawingObject`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
drawingObject : {id: 'connector', type: 'Straight'}
});
diagram.appendTo('#diagram');
|
EnableAutoScroll
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables or disables auto scroll in diagram |
Property:`enableAutoScroll`
</br>
</br>
$("#diagramcontent").ejDiagram({
enableAutoScroll: false
});
|
Property:`canAutoScroll`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
canAutoScroll: true
});
diagram.appendTo('#diagram');
|
EnableContextMenu
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables or disables diagram context menu |
Property:`enableContextMenu`
</br>
</br>
$("#diagramcontent").ejDiagram({
enableContextMenu: false
});
|
Property:`contextMenuSettings.show`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
contextMenuSettings: {
show: true
}
});
diagram.appendTo('#diagram');
|
GetCustomCursor
</tr> </table> ## GetCustomProperty| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enable or disable rendering component with custom cursor</td> | Not applicable |
Property:`getCustomCursor`
</br>
</br>
function getCustomCursor(action: string, active: boolean): string {
var cursor;
if (active && action === 'Drag') {
cursor = '-webkit-grabbing';
} else if (action === 'Drag') {
cursor = '-webkit-grabbing'
}
return cursor;
}
var nodes = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes,
getCustomCursor: getCustomCursor
});
diagram.appendTo('#diagram');
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Allows to get the custom properties that have to be serialized</td> | Not applicable |
Property:`getCustomProperty`
</br>
</br>
var nodes = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes,
getCustomProperty: (key: string) => {
if (key === 'nodes') {
return ['description'];
}
return null;
}
});
diagram.appendTo('#diagram');
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Allows to get the custom tool</td> | Not applicable |
Property:`getCustomTool`
</br>
</br>
function getTool(action: string): ToolBase {
var tool;
if (action === 'userHandle') {
tool = new CloneTool(diagram.commandHandler, true);
}
return tool;
}
class CloneTool extends ToolBase {
public mouseDown(args: MouseEventArgs): void {
super.mouseDown(args);
diagram.copy();
diagram.paste();
}
}
var nodes = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes,
getCustomTool: getTool
});
diagram.appendTo('#diagram');
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Specifies the height of the diagram |
Property:`height`
</br>
</br>
$("#diagramcontent").ejDiagram({
height:"500",
width:"500"
});
|
Property:`height`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
height: 1000
});
diagram.appendTo('#diagram');
|
| 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`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
var entry = { object: node, prevState: node.empInfo };
diagram.model.historyManager.push(entry);
var value = { role: "New role" };
node.empInfo = value;
if(diagram.model.historyManager.canPop(entry)){
diagram.model.historyManager.pop();
}
|
Not applicable |
| A method that ends grouping the changes |
Property:`historyManager.closeGroupAction`
</br>
</br>
var group = diagram.model.selectedItems;
diagram.model.historyManager.startGroupAction();
for (var i = 0; i < group.children.length; i++) {
var option = {};
var item = group.children[i];
// Updates the fillColor for all the child elements.
option.fillColor = args.style.backgroundColor;
diagram.updateNode(item.name, option);
}
diagram.model.historyManager.closeGroupAction();
|
Property:`historyManager.endGroupAction`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
},
{
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
id: 'node2'
}],
connectors: [{
id: 'connector1', sourcePoint: { x: 100, y: 200 },
targetPoint: { x: 200, y: 300 },
type: 'Orthogonal'
}]
});
diagram.appendTo('#diagram');
var objects = [];
objects.push(diagram.nodes[0], diagram.nodes[1], diagram.connectors[0]);
diagram.historyManager.startGroupAction();
diagram.distribute('Top', objects);
diagram.distribute('Bottom', objects);
diagram.distribute('BottomToTop', objects);
diagram.historyManager.endGroupAction();
|
| A method that removes the history of a recent change made in diagram |
Property:`historyManager.pop`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.pop();
|
Not applicable |
| A method that allows to track the custom changes made in diagram |
Property:`historyManager.push`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
var entry = { object: node, prevState: node.empInfo };
diagram.model.historyManager.push(entry);
var value = { role: "New role" };
node.empInfo = value;
|
Property:`historyManager.push`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
var object = diagram.nodes[0];
object['description'] = (document.getElementById('custom') as HTMLSelectElement).value;
var entry = { undoObject: object };
diagram.historyManager.push(entry);
diagram.dataBind();
|
| Defines what should be happened while trying to restore a custom change |
Property:`historyManager.redo`
</br>
</br>
$("#diagramcontent").ejDiagram({
historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
});
function customUndoRedo(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
var node = args.object;
var currentState = node.empInfo;
node.empInfo = args.prevState;
args.prevState = currentState;
}
|
Property:`historyManager.redo`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
var node1 = diagram.nodes[0];
node1['customName'] = 'customNode';
entry = {
undoObject: node1
};
diagram.historyManager.push(entry);
diagram.historyManager.undo = function(args: HistoryEntry) {
args.redoObject = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = 'customNodeChange';
}
diagram.historyManager.redo = function(args: HistoryEntry) {
var current = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = args.redoObject['customName'];
args.redoObject = current;
}
|
| 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`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.redoStack();
|
Property:`historyManager.redoStack`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.redoStack();
|
| Restricts the undo and redo actions to a certain limit |
Property:`historyManager.stackLimit`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.stackLimit();
|
Property:`historyManager.stackLimit`
</br>
</br>
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.stackLimit();
|
| A method that starts to group the changes to revert/restore them in a single undo or redo |
Property:`historyManager.startGroupAction`
</br>
</br>
var group = diagram.model.selectedItems
diagram.model.historyManager.startGroupAction();
for (var i = 0; i < group.children.length; i++) {
var option = {};
var item = group.children[i];
option.fillColor = args.style.backgroundColor;
diagram.updateNode(item.name, option);
}
diagram.model.historyManager.closeGroupAction();
|
Property:`historyManager.startGroupAction`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
},
{
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
id: 'node2'
}],
connectors: [{
id: 'connector1', sourcePoint: { x: 100, y: 200 }, targetPoint: { x: 200, y: 300 },
type: 'Orthogonal'
}]
});
diagram.appendTo('#diagram');
var objects = [];
objects.push(diagram.nodes[0], diagram.nodes[1], diagram.connectors[0]);
diagram.historyManager.startGroupAction();
diagram.distribute('Top', objects);
diagram.distribute('Bottom', objects);
diagram.distribute('BottomToTop', objects);
diagram.historyManager.endGroupAction();
|
| Defines what should be happened while trying to revert a custom change |
Property:`historyManager.undo`
</br>
</br>
$("#diagramcontent").ejDiagram({
historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
});
function customUndoRedo(args) {
var diagram = $("#diagramcontent").ejDiagram("instance");
var node = args.object;
var currentState = node.empInfo;
node.empInfo = args.prevState;
args.prevState = currentState;
}
|
Property:`historyManager.undo`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
var node1 = diagram.nodes[0];
node1['customName'] = 'customNode';
entry = {
undoObject: node1
};
diagram.historyManager.push(entry);
diagram.historyManager.undo = function(args: HistoryEntry) {
args.redoObject = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = 'customNodeChange';
}
diagram.historyManager.redo = function(args: HistoryEntry) {
var current = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = args.redoObject['customName'];
args.redoObject = current;
}
|
| 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`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.undoStack();
|
Property:`historyManager.undoStack`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.undoStack();
|
| Set the current entry object |
Property:`historyList.currentEntry`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.historyList.currentEntry();
|
Property:`historyManager.currentEntry`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.currentEntry();
|
| Set the history entry can be undo |
Property:`historyList.canUndo`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.historyList.canUndo();
|
Property:`historyManager.canUndo`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.canUndo = true;
|
| Set the history entry can be redo |
Property:`historyList.canRedo`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.historyList.canRedo();
|
Property:`historyManager.canRedo`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.canRedo = true;
|
| Used to decide to stored the changes to history |
Property:`historyManager.canLog`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.canLog();
|
Property:`historyManager.canLog`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.canLog = function (entry: HistoryEntry) {
entry.cancel = true;
return entry;
}
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the type of the rendering mode of label |
Property:`labelRenderingMode`
</br>
</br>
$("#diagramcontent").ejDiagram({ labelRenderingMode: "svg" });
|
Not applicable |
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Specifies the custom bounds to arrange/align the layout |
Property:`layout.bounds`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: { bounds:{ x: 0, y: 0, width: 1000, height: 1000} }});
|
Property:`layout.bounds`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
bounds: new Rect(0, 0, 500, 500)
}
});
diagram.appendTo('#diagram');
|
| Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned |
Property:`layout.fixedNode`
</br>
</br>
$("#diagramcontent").ejDiagram({
fixedNode: "node" });
|
Property:`layout.fixedNode`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
fixedNode: 'node'
}
});
diagram.appendTo('#diagram');
|
| Customizes the orientation of trees/sub trees |
Property:`layout.getLayoutInfo`
</br>
</br>
function getLayoutInfo(diagram, node, options) { options.orientation = "vertical"; options.type = "left"; offset = 10;};
$("#diagramcontent").ejDiagram({
layout: { getLayoutInfo:getLayoutInfo }
});
|
Property:`layout.getLayoutInfo`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
getLayoutInfo: (node: Node, tree: TreeInfo) => {
if (!tree.hasSubTree) {
tree.orientation = 'vertical';
}
}
}
});
diagram.appendTo('#diagram');
|
| Defines a method to customize the segments based on source and target nodes |
Property:`layout.getConnectorSegments`
</br>
</br>
function getConnectorSegment(diagram, node, options) { };
$("#diagramcontent").ejDiagram({layout: { getConnectorSegments:getConnectorSegment } });
|
Property:`layout.connectorSegments`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
connectorSegments: 'Default'
}
});
diagram.appendTo('#diagram');
|
| Sets the space to be horizontally left between nodes |
Property:`layout.horizontalSpacing`
</br>
</br>
$("#diagramcontent").ejDiagram({layout: { horizontalSpacing: 50 }});
|
Property:`layout.horizontalSpacing`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
horizontalSpacing: 30
}
});
diagram.appendTo('#diagram');
|
| Defines the space to be left between layout bounds and layout |
Property:`layout.margin`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: { margin:{ left: 10, right: 10, top: 10, bottom: 10} }});
|
Property:`layout.margin`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
layout: {
margin: { left: 50, top: 50, right: 0, bottom: 0 }
}
});
diagram.appendTo('#diagram');
|
| Defines how to horizontally align the layout within the layout bounds |
Property:`layout.horizontalAlignment`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: { horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Center }
});
|
Property:`layout.horizontalAlignment`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
horizontalAlignment: 'Center'
}
});
diagram.appendTo('#diagram');
|
| Defines how to vertically align the layout within the layout bounds |
Property:`layout.verticalAlignment`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: {
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Center
}
});
|
Property:`layout.verticalAlignment`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
verticalAlignment: 'Center'
}
});
diagram.appendTo('#diagram');
|
| Sets the orientation/direction to arrange the diagram elements |
Property:`layout.orientation`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: { orientation: ej.datavisualization.Diagram.LayoutOrientations.LeftToRight }
});
|
Property:`layout.orientation`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
orientation: 'TopToBottom',}
});
diagram.appendTo('#diagram');
|
| Sets the type of the layout based on which the elements will be arranged |
Property:`layout.type`
</br>
</br>
$("#diagramcontent").ejDiagram({ layout: {
type: ej.datavisualization.Diagram.LayoutTypes.HierarchicalTree }
s});
|
Property:`layout.type`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'OrganizationalChart'
}
});
diagram.appendTo('#diagram');
|
| Sets the space to be vertically left between nodes |
Property:`layout.verticalSpacing`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: { verticalSpacing: 50 }});
|
Property:`layout.verticalSpacing`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
verticalSpacing: 30
}
});
diagram.appendTo('#diagram');
|
| Sets the value is used to define the root node of the layout |
Property:`layout.root`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: { root: 'rootNode' }
});
|
Property:`layout.root`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
root: 'rootNode'
}
});
diagram.appendTo('#diagram');
|
| Defines how long edges should be, ideally. This will be the resting length for the springs |
Property:`layout.springFactor`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: { springFactor: 0.442 }
});
|
Property:`layout.springFactor`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
}
});
diagram.appendTo('#diagram');
|
| Defines how long edges should be, ideally. This will be the resting length for the springs |
Property:`layout.maxIteration`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: { maxIteration: 442 }
});
|
Property:`layout.maxIteration`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
}
});
diagram.appendTo('#diagram');
|
| Defines how long edges should be, ideally. This will be the resting length for the springs |
Property:`layout.springLength`
</br>
</br>
$("#diagramcontent").ejDiagram({
layout: { springLength: 80 }
});
|
Property:`layout.springLength`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
}
});
diagram.appendTo('#diagram');
|
| Sets how to define the connection direction (first segment direction & last segment direction) | Not applicable |
Property:`layout.connectionDirection`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
connectionDirection:'Auto',
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
}
});
diagram.appendTo('#diagram');
|
| Enables/Disables animation option when a node is expanded/collapsed | Not applicable |
Property:`layout.enableAnimation`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
enableAnimation: true,
orientation: 'TopToBottom',
type: 'OrganizationalChart', margin: { top: 20 },
horizontalSpacing: 30, verticalSpacing: 30,
}
});
diagram.appendTo('#diagram');
|
| 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`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'MindMap',
}
});
diagram.appendTo('#diagram');
diagram.layout.getBranch = (node: NodeModel, nodes: NodeModel[]) => {
return 'Left';
}
diagram.dataBind();
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Array of JSON objects where each object represents a node |
Property:`nodes`
</br>
</br>
var nodes = [{ name: "node1", width: 175, height: 60, offsetX:100, offsetY:100}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity |
Property:`nodes.activity`
</br>
</br>
var nodes = [{
type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Activity, activity: ej.datavisualization.Diagram.BPMNActivity.SubProcess, width:50, height:50
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.activity`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'Activity',
activity: {
activity: 'Task'
},
},
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| To maintain additional information about nodes |
Property:`nodes.addInfo`
</br>
</br>
var addInfo = { TooltipData: "Shares the information with the customer" };
var node1 = { name: "node1", addInfo: addInfo, offsetX:100, offsetY:100, width:50, height:50 };
var node2 = { type: "swimlane", name: "swimlane", addInfo: addInfo };
$("#diagramcontent").ejDiagram({nodes:[node1, node2]});
|
Property:`nodes.addInfo`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
addInfo: {
"borderColor": "black", "borderWidth": '1px'
},
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| 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`
</br>
</br>
var nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45, length: 150, direction: "top"
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
angle: 45,
length: 150,
text: 'Left',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the angle between the BPMN shape and the annotation |
Property:`nodes.annotation.angle`
</br>
</br>
var nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.angle`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
angle: 45,
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the direction of the text annotation |
Property:`nodes.annotation.direction`
</br>
</br>
var nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45, length: 150, direction: "top"
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Not applicable |
| Sets the height of the text annotation |
Property:`nodes.annotation.height`
</br>
</br>
var nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.height`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
text: 'Left',
height: 50
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the distance between the BPMN shape and the annotation |
Property:`nodes.annotation.length`
</br>
</br>
var nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
length: 150
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.length`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
length: 150,
text: 'Left',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the additional information about the flow object in a BPMN Process |
Property:`nodes.annotation.text`
</br>
</br>
var nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape"
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.text`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
text: 'Left',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the width of the text annotation |
Property:`nodes.annotation.width`
</br>
</br>
var nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.width`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
width: 45,
text: 'Left',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the id for the annotation | Not applicable |
Property:`nodes.shape.annotations.id`
</br>
</br>
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
text: 'Left',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines whether the group can be ungrouped or not |
Property:`nodes.canUngroup`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
offsetX: 150,
offsetY: 150,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: "group",
children: [node1, node2],
canUngroup: false
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Not applicable |
| Array of JSON objects where each object represents a child node/connector |
Property:`nodes.children`
</br>
</br>
var node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red", borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
offsetX: 150,
offsetY: 150,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: "group",
children: [node1, node2]
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Property:`nodes.children`
</br>
</br>
var node1 = {
id: 'node1',
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
};
var node2 = {
id: 'node2',
offsetX: 450,
offsetY: 450,
width: 100,
height: 100,
};
var group = {
id: 'group',
};
group.children = ['node1', 'node2'];
var diagram = new ej.diagrams.Diagram({
nodes: [group]
});
diagram.appendTo('#diagram');
|
| Sets the type of UML classifier |
Property:`nodes.classifier`
</br>
</br>
var nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Not applicable |
| Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property:`nodes.class`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of class |
Property:`nodes.class.name`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the collection of attributes |
Property:`nodes.class.attributes`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted"}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of the attribute |
Property:`nodes.class.attributes.name`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the data type of attribute |
Property:`nodes.class.attributes.type`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the visibility of the attribute |
Property:`nodes.class.attributes.scope`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the collection of methods of a Class |
Property:`nodes.class.methods`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient", methods: [{ name: "getHistory" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of the method |
Property:`nodes.class.methods.name`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }]
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the arguments of the method |
Property:`nodes.class.methods.arguments`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{
name: "Date",
type:"String"
}]
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property:`nodes.class.methods.arguments.name`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the type of the argument |
Property:`nodes.class.methods.arguments.type`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the return type of the method |
Property:`nodes.class.methods.type`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the visibility of the method |
Property:`nodes.class.methods.scope`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History",
scope:"protected" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the state of the node is collapsed/expanded |
Property:`nodes.collapseIcon`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown"
}
}],
});
|
Property:`nodes.collapseIcon`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}]
});
diagram.appendTo('#diagram');
|
| Sets the border color for collapse icon of node |
Property:`nodes.collapseIcon.borderColor`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
borderColor: "red"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
borderColor: "red"
}
}],
});
|
Property:`nodes.collapseIcon.borderColor`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderColor: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderColor: 'red' }
}]
});
diagram.appendTo('#diagram');
|
| Sets the border width for collapse icon of node |
Property:`nodes.collapseIcon.borderWidth`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
borderWidth: "2"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
borderWidth: "2"
}
}],
});
|
Property:`nodes.collapseIcon.borderWidth`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderWidth: '2' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderWidth: '2' }
}]
});
diagram.appendTo('#diagram');
|
| Sets the fill color for collapse icon of node |
Property:`nodes.collapseIcon.fillColor`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
fillColor: "green"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
fillColor: "green"
}
}],
});
|
Property:`nodes.collapseIcon.fill`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", fill: 'red' }
}]
});
diagram.appendTo('#diagram');
|
| Defines the height for collapse icon of node |
Property:`nodes.collapseIcon.height`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown"
}
}],
});
|
Property:`nodes.collapseIcon.height`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}]
});
diagram.appendTo('#diagram');
|
| Sets the horizontal alignment of the icon |
Property:`nodes.collapseIcon.horizontalAlignment`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left
}
}],
});
|
Property:`nodes.collapseIcon.horizontalAlignment`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", horizontalAlignment:'Center' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", horizontalAlignment:'Center' }
}]
});
diagram.appendTo('#diagram');
|
| To set the margin for the collapse icon of node |
Property:`nodes.collapseIcon.margin`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
margin:{ left: 5 }
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
margin:{ left: 5 }
}
}],
});
|
Property:`nodes.collapseIcon.margin`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red',
margin:{ left: 5 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
margin:{ left: 5 } }
}]
});
diagram.appendTo('#diagram');
|
| Sets the fraction/ratio(relative to node) that defines the position of the icon |
Property:`nodes.collapseIcon.offset`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
offset:ej.datavisualization.Diagram.Point(0,0.5)
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
offset:ej.datavisualization.Diagram.Point(0,0.5)
}
}],
});
|
Property:`nodes.collapseIcon.offset`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown",
offset: { x: 0, y: 0.5 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
offset: { x: 0, y: 0.5 } }
}]
});
diagram.appendTo('#diagram');
|
| Defines the shape of the collapsed state of the node |
Property:`nodes.collapseIcon.shape`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "arrowdown"
}
}],
});
|
Property:`nodes.collapseIcon.shape`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}]
});
diagram.appendTo('#diagram');
|
| Sets the vertical alignment of the icon |
Property:`nodes.collapseIcon.verticalAlignment `
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top
},
expandIcon: {
height: 10,
width: 10,
shape: "arrowdown",
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top
}
}],
});
|
Property:`nodes.collapseIcon.verticalAlignment `
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", verticalAlignment: 'Center' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", verticalAlignment: 'Center' }
}]
});
diagram.appendTo('#diagram');
|
| Defines the custom content of the icon | Not applicable |
Property:`nodes.collapseIcon.content`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: {
height: 20,
width: 20,
shape: "Template",
content: '
|
| Defines the geometry of a path | Not applicable |
Property:`nodes.collapseIcon.pathData`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" },
collapseIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" }
}]
});
diagram.appendTo('#diagram');
|
| Defines the corner radius of the icon border | Not applicable |
Property:`nodes.collapseIcon.cornerRadius`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", cornerRadius: 3},
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", cornerRadius: 3 }
}]
});
diagram.appendTo('#diagram');
|
| Defines the space that the icon has to be moved from the icon border | Not applicable |
Property:`nodes.collapseIcon.padding`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", padding: { left: 50 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", padding: { left: 50 } }
}]
});
diagram.appendTo('#diagram');
|
| Defines the distance to be left between a node and its connections(In coming and out going connections) |
Property:`nodes.connectorPadding`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
connectorPadding: 5
}],
});
|
Not applicable |
| Enables or disables the default behaviors of the node |
Property:`nodes.constraints`
</br>
</br>
var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
constraints: NodeConstraints.Default & ~NodeConstraints.Select
}],
});
|
Property:`nodes.constraints`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
constraints: NodeConstraints.Default | NodeConstraints.Select
}]
});
diagram.appendTo('#diagram');
|
| Defines how the child objects need to be arranged(Either in any predefined manner or automatically). Applicable, if the node is a group |
Property:`nodes.container`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: "group",
children: [node1, node2],
container: {
type: "stack"
},
offsetX: 200,
offsetY: 100
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Not applicable |
| Defines the orientation of the container. Applicable, if the group is a container |
Property:`nodes.container.orientation`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: "group",
children: [node1, node2],
container: {
type: "stack",
orientation: "horizontal"
},
offsetX: 200,
offsetY: 100
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Not applicable |
| Sets the type of the container. Applicable if the group is a container. |
Property:`nodes.container.type`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: "group",
children: [node1, node2],
container: {
type: ej.datavisualization.Diagram.ContainerType.Stack
},
offsetX: 200,
offsetY: 100
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Not applicable |
| Defines the corner radius of rectangular shapes |
Property:`nodes.cornerRadius`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
type:"basic",
shape:"rectangle",
cornerRadius:5
}],
});
|
Not applicable |
| This property allows you to customize nodes appearance using user-defined CSS |
Property:`nodes.cssClass`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
cssClass: "hoverNode"
}],
});
|
Not applicable |
| Defines the BPMN data object |
Property:`nodes.data.type`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "dataobject",
type: "bpmn",
shape: ej.datavisualization.Diagram.BPMNShapes.DataObject,
data: {
type: ej.datavisualization.Diagram.BPMNDataObjects.Input
},
width: 50,
height: 50,
offsetX: 100,
offsetY: 100
}];
});
|
Property:`nodes.shape.dataObject.type`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: false,
type: 'Input'
}
}
}]
});
diagram.appendTo('#diagram');
|
| Defines whether the BPMN data object is a collection or not |
Property:`nodes.data.collection`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "dataobject",
type: "bpmn",
shape: ej.datavisualization.Diagram.BPMNShapes.DataObject,
data: {
type: ej.datavisualization.Diagram.BPMNDataObjects.Input,
collection: false
},
width: 50,
height: 50,
offsetX: 100,
offsetY: 100
}];
});
|
Property:`nodes.shape.dataObject.collection`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: false,
type: 'Input'
}
}
}]
});
diagram.appendTo('#diagram');
|
| Defines an Enumeration in a UML Class Diagram |
Property:`nodes.enumeration`
</br>
</br>
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
}
}]
});
|
Not applicable |
| Sets the name of the Enumeration |
Property:`nodes.enumeration.name`
</br>
</br>
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
}
}]
});
|
Not applicable |
| Defines the collection of enumeration members |
Property:`nodes.enumeration.members`
</br>
</br>
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
members: [{ name: "CheckingAccount"}]
}
}]
});
|
Not applicable |
| Sets the name of the enumeration member |
Property:`nodes.enumeration.members.name`
</br>
</br>
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
members: [{ name: "CheckingAccount"}]
}
}]
});
|
Not applicable |
| Sets the type of the BPMN Events. Applicable, if the node is a BPMN event |
Property:`nodes.event`
</br>
</br>
$("#diagram").ejDiagram({
nodes : [{
name: "nodeEvent",
type: "bpmn",
shape: "event",
event: ej.datavisualization.Diagram.BPMNEvents.Intermediate,
width: 50,
height: 50
}]
});
|
Property:`nodes.shape.event`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Bpmn', shape: 'Event',
event: { event: 'Start', trigger: 'None' } }
}]
});
diagram.appendTo('#diagram');
|
| Defines the type of the trigger |
Property:`nodes.event.trigger`
</br>
</br>
$("#diagram").ejDiagram({
nodes : [{
name: "nodeEvent",
type: "bpmn",
shape: ej.datavisualization.Diagram.BPMNShapes.Event,
trigger: ej.datavisualization.Diagram.BPMNTriggers.None
width: 50,
height: 50
}]
});
|
Property:`nodes.shape.event.trigger`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Bpmn', shape: 'Event',
event: { event: 'Start', trigger: 'None' } }
}]
});
diagram.appendTo('#diagram');
|
| Defines whether the node can be automatically arranged using layout or not |
Property:`nodes.excludeFromLayout`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
excludeFromLayout: true
};
var node2 = {
name: "node2",
width: 50,
height: 50
};
var node3 = {
name: "node3",
width: 50,
height: 50
};
$("#diagramcontent").ejDiagram({
nodes: [node1, node2, node3],
layout: {
type: "hierarchicaltree"
}
});
|
Property:`nodes.excludeFromLayout`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
excludeFromLayout: true,
},
{ id: 'node1', width: 70, height: 70, annotations: [{ content: 'node1' }] },
{ id: 'node2', width: 70, height: 70, annotations: [{ content: 'node2' }] };
],
layout: {
type: 'RadialTree',
},
});
diagram.appendTo('#diagram');
|
| Defines the fill color of the node |
Property:`nodes.fillColor`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
fillColor:"red"};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.fill`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: { fill: 'red' }
},
],
});
diagram.appendTo('#diagram');
|
| Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway |
Property:`nodes.gateway`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "gateway" ,
gateway: ej.datavisualization.Diagram.BPMNGateways.Exclusive
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.shape.gateway`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: { type: 'Bpmn', shape: 'Gateway', gateway: { type: 'Exclusive' }
}
}],
});
diagram.appendTo('#diagram');
|
| Paints the node with linear color transitions |
Property:`nodes.gradient.type`
</br>
</br>
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.type`
</br>
</br>
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the x1 value of linear gradient |
Property:`nodes.gradient.LinearGradient.x1`
</br>
</br>
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.x1`
</br>
</br>
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the x2 value of linear gradient |
Property:`nodes.gradient.LinearGradient.x2`
</br>
</br>
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.x2`
</br>
</br>
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the y1 value of linear gradient |
Property:`nodes.gradient.LinearGradient.y1`
</br>
</br>
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.y1`
</br>
</br>
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the y2 value of linear gradient |
Property:`nodes.gradient.LinearGradient.y2`
</br>
</br>
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.y2`
</br>
</br>
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the type of gradient |
Property:`nodes.gradient.RadialGradient.type`
</br>
</br>
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.type`
</br>
</br>
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the position of the outermost circle |
Property:`nodes.gradient.RadialGradient.cx`
</br>
</br>
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.cx`
</br>
</br>
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the outer most circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.cy`
</br>
</br>
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.cy`
</br>
</br>
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the innermost circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.fx`
</br>
</br>
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.fx`
</br>
</br>
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the innermost circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.fy`
</br>
</br>
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.fy`
</br>
</br>
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the different colors and the region of color transitions |
Property:`nodes.gradient.RadialGradient.stops`
</br>
</br>
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.stops`
</br>
</br>
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Sets the color to be filled over the specified region |
Property:`nodes.gradient.stops.color`
</br>
</br>
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.stops.color`
</br>
</br>
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Sets the position where the previous color transition ends and a new color transition starts |
Property:`nodes.gradient.stops.offset`
</br>
</br>
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.stops.offset`
</br>
</br>
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Describes the transparency level of the region |
Property:`nodes.gradient.stops.opacity`
</br>
</br>
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100,
opacity: 0.5
}]
}
};
$("#diagramcontent").ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.stops.opacity`
</br>
</br>
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50,
opacity: 0.5
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the header of a swimlane/lane |
Property:`nodes.header`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the height of the node |
Property:`nodes.height`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
}],
});
|
Property:`nodes.height`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
|
| Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container |
Property:`nodes.horizontalAlign`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50
};
var node2 = {
name: "node2",
width: 50,
height: 50,
horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
};
var group = {
name: "group",
children: [node1, node2],
container: {
type: "canvas"
},
offsetX: 200,
offsetY: 100,
minWidth: 200,
minHeight: 200,
fillColor: "red"
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Not applicable |
| A read only collection of the incoming connectors/edges of the node |
Property:`nodes.inEdges`
</br>
</br>
var node = diagram.selectionList[0];
for(var i = 0; i < node.inEdges.length; i++){
console.log(node.inEdges[i]);
};
|
Property:`nodes.inEdges`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
var node = (diagram.nodes[0] as Node).inEdges;
for (var i = 0; i < node.length; i++) {
console.log(node[i]);
};
|
| Defines an interface in a UML interface Diagram |
Property:`nodes.interface`
</br>
</br>
var nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Not applicable |
| Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface |
Property:`nodes.interface.name`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the collection of attributes |
Property:`nodes.interface.attributes`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted"}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of the attribute |
Property:`nodes.interface.attributes.name`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the data type of attribute |
Property:`nodes.interface.attributes.type`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the visibility of the attribute |
Property:`nodes.interface.attributes.scope`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the collection of methods of a interface |
Property:`nodes.interface.methods`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient", methods: [{ name: "getHistory" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of the method |
Property:`nodes.interface.methods.name`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }]
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the arguments of the method |
Property:`nodes.interface.methods.arguments`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{
name: "Date",
type:"String"
}]
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the name, attributes and methods of a interface. Applicable, if the node is a interface |
Property:`nodes.interface.methods.arguments.name`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the type of the argument |
Property:`nodes.interface.methods.arguments.type`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the return type of the method |
Property:`nodes.interface.methods.type`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the visibility of the method |
Property:`nodes.interface.methods.scope`
</br>
</br>
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History",
scope:"protected" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines whether the sub tree of the node is expanded or collapsed |
Property:`nodes.isExpanded`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
isExpanded: false
};
var node2 = {
name: "node2",
width: 50,
height: 50
};
var connector = {
sourceNode: "node1",
targetNode: "node2",
name: "connector"
};
$("#diagramcontent").ejDiagram({
nodes: [node1, node2],
connectors: [connector],
layout: {
type: "hierarchicaltree"
}
});
|
Property:`nodes.isExpanded`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
id: 'node1',
isExpanded: true,
},
{
id: 'node2',
width: 50,
height: 50
}],
connectors: [{
sourceNode: 'node1',
targetNode: 'node2',
id: 'connector'
}],
layout: {
type: "hierarchicaltree"
}
});
diagram.appendTo('#diagram');
|
| Sets the node as a swimlane |
Property:`nodes.isSwimlane`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
isSwimlane: true,
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| A collection of objects where each object represents a label |
Property:`nodes.labels`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
fontColor: "Red"
}
]
}],
});
|
Property:`nodes.annotations`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation'
}]
}]
});
diagram.appendTo('#diagram');
|
| An array of objects where each object represents a lane. Applicable, if the node is a swimlane |
Property:`nodes.lanes`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| This property allows you to customize lanes appearance using user-defined CSS |
Property:`nodes.lanes.cssClass`
</br>
</br>
var addInfo = { Description:"Describe the functionality" };
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
cssClass:"hoverLane",
addInfo: addInfo,
fillColor:"lightgrey"
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the header of the lane |
Property:`nodes.lanes.header`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
header: {
fillColor:"blue",
fontColor:"white",
text:"Function 1"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the width of lane |
Property:`nodes.lanes.width`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
zOrder:10
},
{
name: "lane2",
width: 100
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| An array of objects where each object represents a child node of the lane |
Property:`nodes.lanes.children`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
children:[{name:"process", width: 50, height: 50 }]
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the object as a lane |
Property:`nodes.lanes.isLane`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
isLane:true,
orientation:"vertical"
},
{
name: "lane2",
width: 100
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the minimum space to be left between the bottom of parent bounds and the node |
Property:`nodes.margin`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
children: [{
name: "process",
width: 50,
height: 50,
marginBottom: 50,
marginLeft: 10,
marginRight: 10,
marginTop: 10
}]
}]
}
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Property:`nodes.margin`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
margin : { left: 15, right: 15, top: 15, bottom: 15 }
}]
});
diagram.appendTo('#diagram');
|
| Defines the maximum height limit of the node |
Property:`nodes.maxHeight`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.maxHeight`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}]
});
diagram.appendTo('#diagram');
|
| Sets the unique identifier of the node |
Property:`nodes.name`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.id`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node1'
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
|
| Defines the opaque of the node |
Property:`nodes.opacity`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
opacity: 0.5,
rotateAngle: 70
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.style.opacity`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node1'
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
rotateAngle: 70,
style: {
opacity: 0.5
}
}]
});
diagram.appendTo('#diagram');
|
| Defines the minimum padding value to be left between the bottom most position of a group and its children. Applicable, if the group is a container |
Property:`nodes.paddingBottom`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50
};
var node2 = {
name: "node2",
width: 50,
height: 50,
verticalAlign: "bottom"
};
var group = {
name: "group",
children: [node1, node2],
container: {
type: "canvas"
},
offsetX: 200,
offsetY: 100,
fillColor: "gray",
minWidth: 200,
minHeight: 200,
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10
};
$("#diagramcontent").ejDiagram({nodes:[group]});
|
Not applicable |
| Sets the name of the parent group |
Property:`nodes.parent`
</br>
</br>
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
parent: "group"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
offsetX: 150,
offsetY: 150,
parent: "group"
};
var group = {
name: "group",
children: ["node1", "node2"]
};
$("#diagramcontent").ejDiagram({
nodes: [node1, node2, group]
});
|
Not applicable |
| Sets the path geometry that defines the shape of a path node |
Property:`nodes.pathData`
</br>
</br>
var nodes;
nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "basic",
shape: "path",
pathData: "M 370.9702,194.9961 L 359.5112,159.7291 L 389.5112,137.9341 L 419.5112,159.7291 L 408.0522,194.9961 L 370.9702,194.9961 z"
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.data`
</br>
</br>
var nodes = [
{
id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Path', data: 'M 540.3643,137.9336 L 546.7973,159.7016 L 570.3633,159.7296 L 550.7723,171.9366 L 558.9053,194.9966 L 540.3643,179.4996 L 521.8223,194.9966 L 529.9553,171.9366 L 510.3633,159.7296 L 533.9313,159.7016 L 540.3643,137.9336 z' },
},
];
var diagram = new ej.diagrams.Diagram({
width: '800px', height: '500px', nodes: nodes
});
|
| An array of objects, where each object represents a smaller region(phase) of a swimlane |
Property:`nodes.phases`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase1"
}
},
{
name: "phase2",
label: {
text: "Phase2"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the header of the smaller regions |
Property:`nodes.phases.label`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase1"
}
},
{
name: "phase2",
label: {
text: "Phase2"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the line color of the splitter that splits adjacent phases |
Property:`nodes.phases.lineColor`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase1"
},
lineColor:"green",
lineDashArray:"2,2",
lineWidth:3
},
{
name: "phase2",
label: {
text: "Phase2"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Sets the length of the smaller region(phase) of a swimlane |
Property:`nodes.phases.offset`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase1"
}
},
{
name: "phase2",
label: {
text: "Phase2"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Sets the orientation of the phase |
Property:`nodes.phases.orientation`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.addPhase(diagram.selectionList[0].name,
{
name: "verticalPhase",
type: "phase", offset: 200, orientation: "vertical",
label: { text: "New Phase" }
} );
|
Not applicable |
| Sets the height of the phase headers |
Property:`nodes.phaseSize`
</br>
</br>
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phaseSize: 50,
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase 1"
}
}]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Sets the ratio/ fractional value relative to node, based on which the node will be transformed(positioning, scaling and rotation) |
Property:`nodes.pivot`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
pivot: {
x: 0,
y: 0
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.pivot`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
pivot: {
x: 0,
y: 0
}
}]
});
diagram.appendTo('#diagram');
|
| Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon |
Property:`nodes.points`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "basic",
shape: "polygon",
points: [{
x: 0,
y: 12.5
}, {
x: 0,
y: 50
}, {
x: 50,
y: 50
}, {
x: 50,
y: 0
}, {
x: 12.5,
y: 0
}, {
x: 0,
y: 12.5
}]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.points`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Basic',
shape: 'Polygon',
points: [{
x: 35,
y: 0
}, {
x: 65,
y: 0
}, {
x: 100,
y: 35
}, {
x: 100,
y: 65
}, {
x: 65,
y: 100
}, {
x: 35,
y: 100
}, {
x: 0,
y: 65
}, {
x: 0,
y: 35
}]
},
}]
});
diagram.appendTo('#diagram');
|
| An array of objects where each object represents a port |
Property:`nodes.ports`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
}
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.ports`
</br>
</br>
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: {
x: 0,
y: 0
}
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| Sets the border color of the port |
Property:`nodes.ports.borderColor`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
},
borderColor:"yellow",
borderWidth: 3,
cssClass:"hoverPort",
fillColor:"red",
size: 10,
visibility:ej.datavisualization.Diagram.PortVisibility.Visible
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.ports.style.strokeColor`
</br>
</br>
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: {
x: 0,
y: 0
},
style: {
strokeColor: 'yellow',
strokeDashArray: '2 2',
strokeWidth: 4,
fill:'red',
opacity: 0.5
}
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| Defines whether connections can be created with the port |
Property:`nodes.ports.constraints`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
}
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.ports.constraints`
</br>
</br>
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: {
x: 0,
y: 0
},
constraints: PortConstraints.Draw
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| An array of objects where each object represents a port |
Property:`nodes.ports.shape`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
},
shape:ej.datavisualization.Diagram.PortShapes.Path,
pathData: "M5,0 L10,10 L0,10 z"
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.ports.shape`
</br>
</br>
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Path',
pathData: 'M5,0 L10,10 L0,10 z'
offset: {
x: 0,
y: 0
}
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| Sets the vertical alignment of the port with respect to its immediate parent | Not applicable |
Property:`nodes.ports.verticalAlignment`
</br>
</br>
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: {
x: 0,
y: 0
},
verticalAlignment: 'Top',
horizontalAlignment: 'Left',
width: 10,
height: 10
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| Defines the opacity and the position of shadow |
Property:`nodes.shadow`
</br>
</br>
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
shadow: { opacity: 0.5, distance: 10, angle: 45 }
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shadow`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shadow: { opacity: 0.5, distance: 10, angle: 45 }
}]
});
diagram.appendTo('#diagram');
|
| Defines the sub process of a BPMN Activity. Applicable, if the type of the BPMN activity is sub process |
Property:`nodes.subProcess`
</br>
</br>
var nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "subprocess",
subProcess: {
loop: ej.datavisualization.Diagram.BPMNLoops.Standard,
adhoc: true,
boundary: ej.datavisualization.Diagram.BPMNBoundary.Call,
compensation: true,
collapsed: false
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.subProcess`
</br>
</br>
var nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'Activity',
activity: {
activity: 'SubProcess',
subProcess: { adhoc: false, boundary: 'Default', collapsed: true }
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the collection of events that need to be appended with BPMN Sub-Process |
Property:`nodes.subProcess.events`
</br>
</br>
var nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "subprocess",
subProcess: {
type: "transaction",
events: [{
name:"intermediate1",
event: "intermediate",
offset: {
x: 0.25,
y: 1
}
},
{
event: "intermediate",
trigger: "error",
offset: {
x: 0.75,
y: 1
}
}
]
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.subProcess.events`
</br>
</br>
var nodes = [{
id: 'node1', width: 190, height: 190, offsetX: 300, offsetY: 200,
shape: {
type: 'Bpmn', shape: 'Activity', activity: {
activity: 'SubProcess',
subProcess: {
type: 'Event', loop: 'ParallelMultiInstance',
compensation: true, adhoc: false, boundary: 'Event', collapsed: true,
events: [{
height: 20, width: 20, offset: { x: 0, y: 0 }, margin: { left: 10, top: 10 },
horizontalAlignment: 'Left',
verticalAlignment: 'Top',
event: 'Intermediate', trigger: 'Error'
}]
}
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
|
| An array of objects where each object represents a port |
Property:`nodes.subProcess.events.ports`
</br>
</br>
var nodes;
nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "subprocess",
subProcess: {
type: "transaction",
events: [{
event: "intermediate",
offset: {
x: 0.25,
y: 1
},
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
}
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}]
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.subProcess.events.ports`
</br>
</br>
var nodes = [{
id: 'node1', width: 190, height: 190, offsetX: 300, offsetY: 200,
shape: {
type: 'Bpmn', shape: 'Activity', activity: {
activity: 'SubProcess',
subProcess: {
type: 'Event', loop: 'ParallelMultiInstance',
compensation: true, adhoc: false, boundary: 'Event', collapsed: true,
events: [{
height: 20, width: 20, offset: { x: 0, y: 0 }, margin: { left: 10, top: 10 },
horizontalAlignment: 'Left',
verticalAlignment: 'Top',
ports: [{
id: 'port1', visibility: PortVisibility.Visible,
shape: 'Circle', offset: { x: 0, y: 0 }
}],
event: 'Intermediate', trigger: 'Error'
}]
}
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
|
| A collection of objects where each object represents a label |
Property:`nodes.subProcess.events.labels`
</br>
</br>
var label = [];
label = { "text": "Node1", "fontColor": "Red"};
var nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "subprocess",
subProcess: {
type: "transaction",
events: [{
event: "intermediate",
offset: {
x: 0.25,
y: 1
},
{labels:label}
}]
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.subProcess.events.annotations`
</br>
</br>
var nodes = [{
id: 'node1', width: 190, height: 190, offsetX: 300, offsetY: 200,
shape: {
type: 'Bpmn', shape: 'Activity', activity: {
activity: 'SubProcess',
subProcess: {
type: 'Event', loop: 'ParallelMultiInstance',
compensation: true, adhoc: false, boundary: 'Event', collapsed: true,
events: [{
height: 20, width: 20, offset: { x: 0, y: 0 }, margin: { left: 10, top: 10 },
horizontalAlignment: 'Left',
verticalAlignment: 'Top',
annotations: [{
id: 'label3', margin: { bottom: 10 },
horizontalAlignment: 'Center',
verticalAlignment: 'Top',
content: 'Event', offset: { x: 0.5, y: 1 },
style: {
color: 'black', fontFamily: 'Fantasy', fontSize: 8
}
}],
event: 'Intermediate', trigger: 'Error'
}]
}
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the task of the BPMN activity. Applicable, if the type of activity is set as task |
Property:`nodes.task`
</br>
</br>
var nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "task",
task: {
compensation: true,
call: true,
loop: ej.datavisualization.Diagram.BPMNLoops.Standard,
type: ej.datavisualization.Diagram.BPMNTasks.Service
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.task`
</br>
</br>
var nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'Activity',
activity: {
activity: 'Task',
task: {
call: true,
compensation: false,
type: 'Service',
loop: 'ParallelMultiInstance'
}
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
diagram.tool = DiagramTools.ZoomPan;
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Binds the custom JSON data with node properties |
Property:`nodeTemplate`
</br>
</br>
var data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
$("#diagramcontent").ejDiagram({
dataSourceSettings: {
id: "Id",
parent: "ReportingPerson",
dataSource: data
},
nodeTemplate: "nodeTemplate"
});
function nodeTemplate(diagram, node) {
node.labels[0].text = node.Name;
}
|
Property:`setNodeTemplate`
</br>
</br>
function setNodeTemplate() {
setNodeTemplate: (object: NodeModel, diagram: Diagram): StackPanel => {
if (object.id === 'node2') {
var table = new StackPanel();
table.orientation = 'Horizontal';
var column1 = new StackPanel();
column1.children = [];
column1.children.push(getTextElement('Column1'));
addRows(column1);
var column2 = new StackPanel();
column2.children = [];
column2.children.push(getTextElement('Column2'));
addRows(column2);
table.children = [column1, column2];
return table;
}
return null;
}
}
var getTextElement = (text: string) => {
var textElement = new TextElement();
textElement.width = 50;
textElement.height = 20;
textElement.content = text;
return textElement;
};
var nodes = [{
id: 'node1',
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100
}
];
var connectors = [{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300
},
targetPoint: {
x: 200,
y: 400
},
}];
var diagram = new ej.diagrams.Diagram({
width: '100%',
height: '600px',
connectors: connectors,
nodes: nodes,
setNodeTemplate: setNodeTemplate,
});
diagram.appendTo('#diagram');
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Allows to see a preview or an overall view of the entire content of a Diagram |
Property:`overview`
</br>
</br>
;
;
$("#diagram").ejDiagram({
width: "100%",
height: "600px"
});
$("#overview").ejOverview({
// Relates Diagram with overview
sourceID: "diagram",
width: "100%",
height: "100%"
});
|
Property:`Overview`
</br>
</br>
// Initializes the diagram control
var diagram = new ej.diagrams.Diagram({
width: "100%",
height: "600px"
});
diagram.appendTo('#diagram');
var overview = new ej.diagrams.Overview({
width: '100%', height: '150px', sourceID: 'diagram'
});
overview.appendTo('#overview');
|
| 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`
</br>
</br>
var layer = {
name: "layer1",
active: true,
visible: true,
print: true,
lock: true,
objects: ["textNode"]
};
$("#diagram").ejDiagram({
layers: [layer]
});
|
Property:`layers`
</br>
</br>
var nodes = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 100,
shape: {
type: 'Basic',
shape: 'Ellipse'
},
}
];
var connectors = [{
id: 'connector1',
type: 'Straight',
sourcePoint: {
x: 100,
y: 300
},
targetPoint: {
x: 200,
y: 400
},
}];
var diagram = new ej.diagrams.Diagram({
width: '100%',
height: '600px',
connectors: connectors,
nodes: nodes,
layers: [{
id: 'layer1',
visible: true,
lock: true,
zIndex: -1,
objects: ['node1', 'node2', 'connector1']
}],
});
diagram.appendTo('#diagram');
|
| A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes |
Property:`layers.print`
</br>
</br>
var layer = { name: "layer1", active: true, visible: true, print: true, lock: true, objects: ["textNode"] };
$("#diagram").ejDiagram({
layers: [layer]
});
|
Not applicable |
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| A collection of objects where each object represents a label |
Property:`labels.text`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label"
}
]
}],
});
|
Property:`annotations.content`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation'
}]
}]
});
diagram.appendTo('#diagram');
|
| Offset for annotation content |
Property:`labels.offset`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
offset: { x: 0, y: 1},
rotateAngle: 90
}
]
}],
});
|
Property:`annotations.offset`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
offset: { x: 0, y: 1},
rotateAngle: 90
}]
}]
});
diagram.appendTo('#diagram');
|
| Sets the hyperlink for the labels |
Property:`labels.hyperText`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
bold:true,
"hyperText": "https://www.syncfusion.com"
}
]
}],
});
|
Property:`annotations.hyperlink`
</br>
</br>
var style = { bold: true };
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
style: style,
hyperlink: { color: 'red',
content: 'HRPortal',
textDecoration: 'Overline',
link: 'https://hr.syncfusion.com/home' }
}]
}]
});
diagram.appendTo('#diagram');
|
| Enables/disables the bold style |
Property:`labels.bold`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
bold:true
}
]
}],
});
|
Property:`annotations.style.bold`
</br>
</br>
var style = { bold: true };
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
style: style
}]
}]
});
diagram.appendTo('#diagram');
|
| Sets the border color of the label |
Property:`labels.borderColor`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
borderColor:"red",
borderWidth: 2
}
]
}],
});
|
Property:`annotations.style.borderColor`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
style: {
strokeColor: 'black',
strokeWidth: 2
}
}]
}]
});
diagram.appendTo('#diagram');
|
| Sets the border width of the label |
Property:`labels.borderWidth`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
borderColor: 'black',
borderWidth: 2
}
]
}],
});
|
Property:`annotations.style.borderWidth`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
style: {
color: 'black',
fill: 'white',
opacity: 0.7,
strokeColor: 'black',
strokeWidth: 2
}
}]
}]
});
diagram.appendTo('#diagram');
|
| This property allows you to customize labels appearance using user-defined CSS |
Property:`labels.cssClass`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
cssClass:"hoverText"
}
]
}],
});
|
Not applicable |
| Enables or disables the default behaviors of the label |
Property:`labels.constraints`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
constraints: LabelConstraints.All & ~LabelConstraints.Resizable
}
]
}],
});
|
Property:`annotations.constraints`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
constraints: ~AnnotationConstraints.InheritReadOnly
}]
}]
});
diagram.appendTo('#diagram');
|
| Sets the fill color of the text area |
Property:`labels.fillColor`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
fillColor: "green"
}
]
}],
});
|
Property:`annotations.style.fill`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
style: {
color: 'black',
fill: 'white',
}
}]
}]
});
diagram.appendTo('#diagram');
|
| Sets the font color of the text |
Property:`labels.fontColor`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
fontColor: "green"
}
]
}],
});
|
Property:`annotations.style.color`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
style: {
color: 'black',
}
}]
}]
});
diagram.appendTo('#diagram');
|
| Sets the font family of the text |
Property:`labels.fontFamily`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
fontColor: "green",
fontFamily:"seugoe UI",
fontSize: 14
}
]
}],
});
|
Property:`annotations.style.fontFamily`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
style: {
color: 'black',
bold: true,
italic: true,
fontSize: '12',
fontFamily: 'TimesNewRoman'
}
}]
}]
});
diagram.appendTo('#diagram');
|
| Sets the height of the label |
Property:`labels.height`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
height: 100,
width: 100
}
]
}],
});
|
Property:`annotations.height`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
height: 100,
width: 100
}]
}]
});
diagram.appendTo('#diagram');
|
| Sets the horizontal alignment of the label |
Property:`labels.horizontalAlignment`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top,
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left
}
]
}],
});
|
Property:`annotations.horizontalAlignment`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
horizontalAlignment: 'Left',
verticalAlignment: 'Top'
}]
}]
});
diagram.appendTo('#diagram');
|
| To set the margin of the label |
Property:`labels.margin`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
margin:{ left: 5 },
padding:{ left: 5 }
}
]
}],
});
|
Property:`annotations.margin`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
margin:{ left: 5 }
}]
}]
});
diagram.appendTo('#diagram');
|
| Defines whether the label is editable or not |
Property:`labels.readOnly`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
readOnly:true
}
]
}],
});
|
Property:`annotations.constraints`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
constraints: AnnotationConstraints.ReadOnly
}]
}]
});
diagram.appendTo('#diagram');
|
| Sets the id of svg/html templates. Applicable, if the node’s label is HTML or native |
Property:`labels.templateId`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
templateId:"SvgEllipse"
}
]
}],
});
|
Not applicable |
| Defines how to align the text inside the label |
Property:`labels.textAlign`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
textAlign:ej.datavisualization.Diagram.TextAlign.Left,
textDecoration: ej.datavisualization.Diagram.TextDecorations.Underline,
textOverflow:true,
overflowType: ej.datavisualization.Diagram.OverflowType.Ellipsis,
wrapping:ej.datavisualization.Diagram.TextWrapping.NoWrap
}
]
}],
});
|
Property:`annotations.style.textAlign`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
style: {
textAlign: 'Justify',
textOverflow : 'Wrap',
textDecoration : 'LineThrough',
textWrapping : 'WrapWithOverflow'
}
}]
}]
});
diagram.appendTo('#diagram');
|
| Enables or disables the visibility of the label |
Property:`labels.visible`
</br>
</br>
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
visible: false
}
]
}],
});
|
Property:`annotations.visible`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation',
visible : false
}]
}]
});
diagram.appendTo('#diagram');
|
| Gets whether the label is currently being edited or not |
Property:`labels.mode`
</br>
</br>
var node = diagram.selectionList[0];
console.log(node.labels[0].mode);
|
Not applicable |
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the size and appearance of diagram page |
Property:`pageSettings.autoScrollBorder`
</br>
</br>
$("#diagramcontent").ejDiagram({
pageSettings: {
autoScrollBorder: { left: 50, top: 50, right: 50, bottom: 50 }
}
});
|
Not applicable |
| Sets whether multiple pages can be created to fit all nodes and connectors |
Property:`pageSettings.multiplePage`
</br>
</br>
$("#diagramcontent").ejDiagram({
pageSettings: {
multiplePage:false
pageWidth: 800,
pageHeight: 500,
pageOrientation:ej.datavisualization.Diagram.PageOrientations.Landscape
}
});
|
Property:`pageSettings.multiplePage`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
pageSettings: {
width: 800, height: 600, multiplePage: true,
orientation:'Landscape'
},
});
diagram.appendTo('#diagram');
|
| Defines the background color of diagram pages |
Property:`pageSettings.pageBackgroundColor`
</br>
</br>
$("#diagramcontent").ejDiagram({
pageSettings: {
pageBackgroundColor: "lightgrey",
}
});
|
Property:`pageSettings.background.color`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
pageSettings: {
background: {
color: 'red',
source: 'Clayton.png',
scale: 'Meet',
align: 'XMidYMid'
}
},
});
diagram.appendTo('#diagram');
|
| Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” |
Property:`pageSettings.scrollableArea`
</br>
</br>
$("#diagramcontent").ejDiagram({
pageSettings: {
scrollableArea: { x:0, y:0, width:1000, height:1000}
}
});
|
Property:`scrollSettings.scrollableArea`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
scrollSettings: {
scrollableArea: new Rect(0, 0, 300, 300),
},
});
diagram.appendTo('#diagram');
|
| Defines the draggable region of diagram elements |
Property:`pageSettings.boundaryConstraints`
</br>
</br>
$("#diagramcontent").ejDiagram({
pageSettings: {
boundaryConstraints: ej.datavisualization.Diagram.BoundaryConstraints.Diagram
}
});
|
Property:`pageSettings.boundaryConstraints`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
pageSettings: {
width: 800, height: 600, boundaryConstraints: 'Diagram'
},
});
diagram.appendTo('#diagram');
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the size and preview size of the node to add that to symbol palette |
Property:`nodes.paletteItem`
</br>
</br>
$("#symbolpalette").ejSymbolPalette({
palettes: [{
name: "Basic Shapes",
expanded: true,
items: [{
name: "Rectangle",
height: 40,
width: 80,
paletteItem: {
previewWidth: 100,
previewHeight: 100
}
}]
}]
});
|
Property:`palettes`
</br>
</br>
export function getFlowShapes(): NodeModel[] {
var flowShapes = [{
id: 'Terminator',
shape: {
type: 'Flow',
shape: 'Terminator'
},
style: {
strokeWidth: 2
}
},
{
id: 'Process',
shape: {
type: 'Flow',
shape: 'Process'
},
style: {
strokeWidth: 2
}
},
{
id: 'Decision',
shape: {
type: 'Flow',
shape: 'Decision'
},
style: {
strokeWidth: 2
}
},
]
};
var palette = new ej.diagrams.SymbolPalette({
expandMode: 'Multiple',
palettes: [{
id: 'flow',
expanded: true,
symbols: getFlowShapes(),
}, ],
width: '100%',
height: '100%',
symbolHeight: 50,
symbolWidth: 50,
symbolPreview: {
height: 100,
width: 100
},
enableSearch: true,
symbolMargin: {
left: 12,
right: 12,
top: 12,
bottom: 12
},
getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
return {
fit: true
};
}
});
palette.appendTo('#symbolpalette');
|
| Defines whether the symbol should be drawn at its actual size regardless of precedence factors or not |
Property:`nodes.paletteItem.enableScale`
</br>
</br>
$("#symbolpalette").ejSymbolPalette({
palettes: [{
name: "Basic Shapes",
expanded: true,
items: [{
name: "Rectangle",
height: 40,
width: 80,
paletteItem: {
previewWidth: 100,
previewHeight: 100,
enableScale:false
}
}]
}]
});
|
Property:`palettes.fit`
</br>
</br>
export function getFlowShapes(): NodeModel[] {
var flowShapes = [{
id: 'Terminator',
shape: {
type: 'Flow',
shape: 'Terminator'
},
style: {
strokeWidth: 2
}
},
{
id: 'Process',
shape: {
type: 'Flow',
shape: 'Process'
},
style: {
strokeWidth: 2
}
},
{
id: 'Decision',
shape: {
type: 'Flow',
shape: 'Decision'
},
style: {
strokeWidth: 2
}
},
]
};
var palette = new ej.diagrams.SymbolPalette({
expandMode: 'Multiple',
palettes: [{
id: 'flow',
expanded: true,
symbols: getFlowShapes(),
}, ],
width: '100%',
height: '100%',
symbolHeight: 50,
symbolWidth: 50,
symbolPreview: {
height: 100,
width: 100
},
enableSearch: true,
symbolMargin: {
left: 12,
right: 12,
top: 12,
bottom: 12
},
getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
return {
fit: true
};
}
});
palette.appendTo('#symbolpalette');
|
| To display a name for nodes in the symbol palette |
Property:`nodes.paletteItem.label`
</br>
</br>
$("#symbolpalette").ejSymbolPalette({
palettes: [{
name: "Basic Shapes",
expanded: true,
items: [{
name: "Rectangle",
height: 40,
width: 80,
paletteItem: {
previewWidth: 100,
previewHeight: 100,
label: "label",
margin: { left: 4, right: 4, top: 4, bottom: 4 }
}
}]
}]
});
|
Property:`palettes.title`
</br>
</br>
export function getFlowShapes(): NodeModel[] {
var flowShapes = [{
id: 'Terminator',
shape: {
type: 'Flow',
shape: 'Terminator'
},
style: {
strokeWidth: 2
}
},
{
id: 'Process',
shape: {
type: 'Flow',
shape: 'Process'
},
style: {
strokeWidth: 2
}
},
{
id: 'Decision',
shape: {
type: 'Flow',
shape: 'Decision'
},
style: {
strokeWidth: 2
}
},
]
};
var palette = new ej.diagrams.SymbolPalette({
expandMode: 'Multiple',
palettes: [{
id: 'flow',
expanded: true,
symbols: getFlowShapes(),
}, ],
width: '100%',
height: '100%',
symbolHeight: 50,
symbolWidth: 50,
symbolPreview: {
height: 100,
width: 100
},
enableSearch: true,
symbolMargin: {
left: 12,
right: 12,
top: 12,
bottom: 12
},
getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
return {
fit: true
};
}
});
palette.appendTo('#symbolpalette');
|
| 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`
</br>
</br>
$("#diagramcontent").ejDiagram({
scrollSettings: {
horizontalOffset: 300, verticalOffset: 300
}
});
|
Property:`scrollSettings.horizontalOffset`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
scrollSettings: {
horizontalOffset: 300, verticalOffset: 300
},
});
diagram.appendTo('#diagram');
|
| Allows to read the view port width of the diagram |
Property:`scrollSettings.viewPortWidth`
</br>
</br>
$("#diagramcontent").ejDiagram({
scrollSettings: {
viewPortWidth: 300, viewPortHeight: 300
}
});
|
Property:`scrollSettings.viewPortWidth`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
scrollSettings: {
viewPortWidth: 300, viewPortHeight: 300
},
});
diagram.appendTo('#diagram');
|
| Allows to extend the scrollable region that is based on the scroll limit |
Property:`scrollSettings.padding`
</br>
</br>
$("#diagramcontent").ejDiagram({
scrollSettings: {
padding: { left: 25, right: 25, top: 25, bottom: 25 }
}
});
|
Not applicable |
| Allows to read the zoom value of diagram |
Property:`scrollSettings.currentZoom`
</br>
</br>
$("#diagramcontent").ejDiagram({
scrollSettings: {
currentZoom: 0.2
}
});
|
Property:`scrollSettings.currentZoom`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
scrollSettings: {
currentZoom: 0.2,
},
});
diagram.appendTo('#diagram');
|
| Allows to read the maximum zoom value of scroller | Not applicable |
Property:`scrollSettings.maxZoom`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
scrollSettings: {
maxZoom: 0.23
},
});
diagram.appendTo('#diagram');
|
| Allows to read the maximum zoom value of scroller | Not applicable |
Property:`scrollSettings.autoScrollBorder`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
scrollSettings: {
autoScrollBorder: { left: 25, right: 25, top: 25, bottom: 25 }
},
});
diagram.appendTo('#diagram');
|
| Enables/Disables the autoscroll option | Not applicable |
Property:`scrollSettings.canAutoScroll`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
scrollSettings: {
canAutoScroll: false,
},
});
diagram.appendTo('#diagram');
|
| Defines the scrollable area of diagram | Not applicable |
Property:`scrollSettings.scrollableArea`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
scrollSettings: {
scrollableArea: new Rect(0, 0, 300, 300),
},
});
diagram.appendTo('#diagram');
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables or disables both the horizontal and vertical ruler |
Property:`rulerSettings.showRulers`
</br>
</br>
$("#diagramcontent").ejDiagram({
rulerSettings: {
showRulers: true,
}
});
|
Property:`rulerSettings.showRulers`
</br>
</br>
var arrange = (args: IArrangeTickOptions) => {
if (args.tickInterval % 10 == 0) {
args.tickLength = 25;
}
}
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
rulerSettings: {
showRulers: true,
},
});
diagram.appendTo('#diagram');
|
| Enables or disables both the horizontal and vertical ruler |
Property:`rulerSettings.horizontalRuler`
</br>
</br>
$("#diagramcontent").ejDiagram({
rulerSettings: {
showRulers: true,
horizontalRuler: {
segmentWidth: 50, interval: 10,
thickness: 50,
length: 1000,
markerColor: "pink",
tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop,
arrangeTick: function alignTick(args){ }
},
}
});
|
Property:`rulerSettings.horizontalRuler`
</br>
</br>
var arrange = (args: IArrangeTickOptions) => {
if (args.tickInterval % 10 == 0) {
args.tickLength = 25;
}
}
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
rulerSettings: {
showRulers: true,
horizontalRuler: {
segmentWidth: 50,
interval: 10,
thickness: 20,
markerColor: 'red',
tickAlignment: 'LeftOrTop',
arrangeTick: arrange,
orientation: 'Horizontal',
},
},
});
diagram.appendTo('#diagram');
|
| Enables or disables both the horizontal and vertical ruler |
Property:`rulerSettings.verticalRuler`
</br>
</br>
$("#diagramcontent").ejDiagram({
rulerSettings: {
showRulers: true,
verticalRuler: {
segmentWidth: 50, interval: 10,
thickness: 50,
length: 1000,
markerColor: "pink",
tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop,
arrangeTick: function alignTick(args){ }
}
}
});
|
Property:`rulerSettings.verticalRuler`
</br>
</br>
var arrange = (args: IArrangeTickOptions) => {
if (args.tickInterval % 10 == 0) {
args.tickLength = 25;
}
}
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
rulerSettings: {
showRulers: true,
verticalRuler: {
segmentWidth: 200,
interval: 20,
arrangeTick: arrange,
thickness: 20,
markerColor: 'red',
tickAlignment: 'LeftOrTop',
arrangeTick: arrange,
orientation: 'Horizontal'
}
},
});
diagram.appendTo('#diagram');
|
| Updates the gridlines relative to the ruler ticks | Not applicable |
Property:`rulerSettings.dynamicGrid`
</br>
</br>
var arrange = (args: IArrangeTickOptions) => {
if (args.tickInterval % 10 == 0) {
args.tickLength = 25;
}
}
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
rulerSettings: {
dynamicGrid: true,
showRulers: true,
},
});
diagram.appendTo('#diagram');
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables or disables snapping nodes/connectors to objects |
Property:`snapSettings.enableSnapToObject`
</br>
</br>
$("#diagramcontent").ejDiagram({
snapSettings: { enableSnapToObject: false }
});
|
Not applicable |
| Defines the appearance of horizontal gridlines |
Property:`snapSettings.horizontalGridLines`
</br>
</br>
var gridline = {
lineColor :"blue",
lineDashArray:"2,2",
linesInterval: [1, 14, 0.5, 14.5 ],
snapInterval : [5]
};
$("#diagramcontent").ejDiagram({
snapSettings: { horizontalGridLines: gridline}
});
|
Property:`snapSettings.horizontalGridlines`
</br>
</br>
var snapSettings = {
horizontalGridLines: {
lineColor: 'black',
lineDashArray: '1,1',
lineIntervals: [0.95, 9.05, 0.2, 9.75],
snapIntervals: [10]
}
};
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
snapSettings: snapSettings
});
diagram.appendTo('#diagram');
|
| Defines the appearance of vertical gridlines |
Property:`snapSettings.verticalGridLines`
</br>
</br>
var gridline = {
lineColor :"blue",
lineDashArray:"2,2",
linesInterval: [1, 14, 0.5, 14.5 ],
snapInterval : [5]
};
$("#diagramcontent").ejDiagram({
snapSettings: { verticalGridLines: gridline}
});
|
Property:`snapSettings.verticalGridlines`
</br>
</br>
var snapSettings = {
verticalGridLines: {
lineColor: 'black',
lineDashArray: '1,1',
lineIntervals: [0.95, 9.05, 0.2, 9.75],
snapIntervals: [10]
}
};
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
snapSettings: snapSettings
});
diagram.appendTo('#diagram');
|
| Defines the angle by which the object needs to be snapped |
Property:`snapSettings.snapAngle`
</br>
</br>
$("#diagramcontent").ejDiagram({snapSettings: { snapAngle: 10} });
|
Property:`snapSettings.snapAngle`
</br>
</br>
var snapSettings = {
snapAngle: 5,
};
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
snapSettings: snapSettings
});
diagram.appendTo('#diagram');
|
| Sets the minimum distance between the selected object and the nearest object |
Property:`snapSettings.snapObjectDistance`
</br>
</br>
$("#diagramcontent").ejDiagram({
snapSettings: { snapObjectDistance: 5 }
});
|
Property:`snapSettings.snapObjectDistance`
</br>
</br>
var snapSettings = {
snapObjectDistance: 5,
};
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
snapSettings: snapSettings
});
diagram.appendTo('#diagram');
|
| Defines and sets the snapConstraints |
Property:`snapSettings.snapConstraints`
</br>
</br>
$("#diagramcontent").ejDiagram({
snapSettings: { snapConstraints : ej.datavisualization.Diagram.SnapConstraints.ShowLines }
});
|
Property:`snapSettings.constraints`
</br>
</br>
var snapSettings = {
constraints: SnapConstraints.ShowLines,
};
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
snapSettings: snapSettings
});
diagram.appendTo('#diagram');
|
| 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`
</br>
</br>
$("#diagramcontent").ejDiagram({zoomFactor: 1});
|
Property:`zoomFactor`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
});
diagram.appendTo('#diagram');
var zoomin = { type: 'ZoomIn', zoomFactor: 0.5 };
diagram.zoomTo(zoomin);
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables/Disables the interactive behaviors of diagram |
Property:`tool`
</br>
</br>
$("#diagramcontent").ejDiagram({tool: ej.datavisualization.Diagram.Tool.ZoomPan});
|
Property:`tool`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
});
diagram.appendTo('#diagram');
diagram.tool = DiagramTools.ZoomPan;
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables or disables tooltip of diagram |
Property:`showTooltip`
</br>
</br>
$("#diagramcontent").ejDiagram({showTooltip: true});
|
Property:`constraints`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
});
diagram.appendTo('#diagram');
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| A read only collection of the selected items |
Property:`selectedItems.children`
</br>
</br>
var diagram = $("#diagramcontent").ejDiagram("instance");
for(var i =0; i< diagram.model.selectedItems.children; i++){
//Do your actions here
}
|
Not applicable |
| Controls the visibility of selector |
Property:`selectedItems.constraints`
</br>
</br>
$("#diagramcontent").ejDiagram({
selectedItems: { constraints: ej.datavisualization.Diagram.SelectorConstraints.UserHandles }
});
|
Property:`selectedItems.constraints`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
selectedItems: { constraints: SelectorConstraints.UserHandles },
});
diagram.appendTo('#diagram');
|
| Defines a method that dynamically enables/ disables the interaction with multiple selection |
Property:`selectedItems.getConstraints`
</br>
</br>
$("#diagramcontent").ejDiagram({
selectedItems: {
getConstraints: function() {
return ej.datavisualization.Diagram.NodeConstraints.Drag |
ej.datavisualization.Diagram.NodeConstraints.Resize
}
}
});
|
Not applicable |
| Sets the height of the selected items |
Property:`selectedItems.height`
</br>
</br>
$("#diagramcontent").ejDiagram({
selectedItems: {
height:100, width: 100,
offsetX:100, offsetY: 100,
rotateAngle: 90,
}
});
|
Property:`selectedItems.height`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
selectedItems: {
height:100, width: 100,
offsetX:100, offsetY: 100,
rotateAngle: 90 },
});
diagram.appendTo('#diagram');
|
| Sets the angle to rotate the selected items |
Property:`selectedItems.tooltip`
</br>
</br>
$("#diagramcontent").ejDiagram({
selectedItems: {
tooltip : { alignment:{ vertical:"top" } }
}
});
|
Not applicable |
| A collection of frequently used commands that will be added around the selector |
Property:`selectedItems.userHandles`
</br>
</br>
var userHandle= [];
var cloneHandle = ej.datavisualization.Diagram.UserHandle();
userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({
selectedItems: {
userHandles:userHandle
}
});
|
Property:`selectedItems.userHandles`
</br>
</br>
var handle = [{
name: 'handle1', pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z'
, visible: true, backgroundColor: 'black', offset: 0, side: 'Bottom', margin: { top: 0, bottom: 0, left: 0, right: 0 },
pathColor: 'white'
}];
var diagram = new ej.diagrams.Diagram({
selectedItems: {
constraints: SelectorConstraints.UserHandles,
userHandles: handle
},
});
diagram.appendTo('#diagram');
|
| Sets the horizontal alignment of the user handle |
Property:`selectedItems.userHandles.horizontalAlignment`
</br>
</br>
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`
</br>
</br>
var handle = [{
name: 'handle1',
pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z',
visible: true,
backgroundColor: 'black',
offset: 0,
side: 'Bottom',
margin: { top: 0, bottom: 0, left: 0, right: 0 },
pathColor: 'white',
horizontalAlignment: 'Center',
verticalAlignment: 'Center',
borderColor: 'red',
borderWidth: 3,
size: 30
}];
var diagram = new ej.diagrams.Diagram({
selectedItems: {
constraints: SelectorConstraints.UserHandles,
userHandles: handle
},
});
diagram.appendTo('#diagram');
|
| Defines the interactive behaviors of the user handle |
Property:`selectedItems.userHandles.tool`
</br>
</br>
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(evt) {
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`
</br>
</br>
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`
</br>
</br>
var handle = [{
name: 'handle1',
pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z',
displacement: 30
}];
var diagram = new ej.diagrams.Diagram({
selectedItems: {
constraints: SelectorConstraints.UserHandles,
userHandles: handle
},
});
diagram.appendTo('#diagram');
|
| 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`
</br>
</br>
$("#diagramcontent").ejDiagram({
serializationSettings: {
preventDefaultValues: true
}
});
|
Not applicable |
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| An object that defines the description, appearance and alignments of tooltip |
Property:`tooltip`
</br>
</br>
$("#diagramcontent").ejDiagram({
tooltip: {
templateId: "mouseovertooltip",
relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse,
},
nodes: [{
name: "elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
});
|
Property:`tooltip`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
},
});
diagram.appendTo('#diagram');
|
| Defines the alignment of tooltip |
Property:`tooltip.alignment`
</br>
</br>
$("#diagramcontent").ejDiagram({
tooltip: {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
},
relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse,
},
nodes: [{
name: "elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
});
|
Not applicable |
| Sets the margin of the tooltip |
Property:`tooltip.margin`
</br>
</br>
$("#diagramcontent").ejDiagram({
tooltip: {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
},
relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse,
margin : { left: 5, right: 5, top: 5, bottom: 5 }
},
nodes: [{
name: "elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
});
|
Not applicable |
| Sets the svg/html template to be bound with tooltip |
Property:`tooltip.templateId`
</br>
</br>
$("#diagramcontent").ejDiagram({
tooltip: {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
},
relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse,
margin : { left: 5, right: 5, top: 5, bottom: 5 }
},
nodes: [{
name: "elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
});
|
Property:`tooltip.content`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
},
});
diagram.appendTo('#diagram');
|
| Defines if the Tooltip has tip pointer or not | Not applicable |
Property:`tooltip.showTipPointer`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
showTipPointer: true,
},
});
diagram.appendTo('#diagram');
|
| Defines the position of the Tooltip | Not applicable |
Property:`tooltip.position`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
},
});
diagram.appendTo('#diagram');
|
| Allows to set the same or different animation option for the Tooltip, when it is opened or closed | Not applicable |
Property:`tooltip.animation`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
},
});
diagram.appendTo('#diagram');
|
| Sets the width of the tooltip | Not applicable |
Property:`tooltip.width`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
width: 100,
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object'
},
});
diagram.appendTo('#diagram');
|
| Sets the height of the Tooltip | Not applicable |
Property:`tooltip.height`
</br>
</br>
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
height: 100,
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
},
});
diagram.appendTo('#diagram');
|
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Set constraints to node </br> The diagram.setConstraints(node) property is not available in the EJ2 Diagram |
Property:`setConstraints`
for (var i = 0; i < diagram.nodes.length; i++) {
var node = diagram.nodes[i];
diagram.setConstraints(node);
}
|
Property:`setConstraints`
Not applicable</br>
In EJ2, constraints are set directly on each node
let nodes = [{
id: 'node',
offsetX: 100, offsetY: 100,
constraints: ej.diagrams.NodeConstraints.Default & ~ej.diagrams.NodeConstraints.Rotate
}];
let diagram:Diagram = new ej.diagrams.Diagram({
width: '100%, height: 600, nodes: nodes,
},'#element');
|