How to add custom properties to nodes and connectors in JavaScript Diagram ?
Custom Properties
Custom properties feature allows you to add data additionally to the Node and LineConnector.
JavaScript:
In JavaScript, you can add the custom properties directly into the node object.
JS
var nodes = [];
var node =
{
name: "node",
//Custom properties for node.
email:"gs@gmail.com",
phone:"23456678",
}
nodes.push(node);
var connectors=[];
var connector =
{
name: "connector1",
segments: [{ type:"straight" }],
//Custom properties for connectors.
email:"gs@gmail.com",
phone:"23456678",
};
connectors.push(connector);
EJMVC
In MVC, custom properties can be added to the nodes and connectors by using the addInfo properties of nodes and connector. AddInfo is defined as a dictionary and custom properties are added as a key value pair. This dictionary object can be retrieved in the client side.
CONTROLLER
BasicShape sourceBasicShape = new BasicShape();
sourceBasicShape.Name = "sourceNode";
//Defines addInfo as a dictionary.
Dictionary<string, object> addInfo = new Dictionary<string, object>();
addInfo.Add("email", "gs@gmail.com");
addInfo.Add("phone", "23455678");
//Adds addInfo object to the nodes.
sourceBasicShape.AddInfo = addInfo;
model.Nodes.Add(sourceBasicShape);
Connector connector = new Connector();
connector.Name = "Connector";
//Defines addInfo as a dictionary.
Dictionary<string, object> addInfo = new Dictionary<string, object>();
addInfo.Add("email", "gs@gmail.com");
addInfo.Add("phone", "23455678");
//Adds addInfo object to the connectors.
connector.AddInfo = addInfo;
model.Connectors.Add(connector);
//Defines click events.
model.Click = "click";
CSHTML
function click(args) {
var diagram = $("#Diagram1").ejDiagram("instance");
//Gets the selected object.
var selectedObject = diagram.model.selectedItems.children[0];
//Retrieves the custom properties.
alert(selectedObject.addInfo.email + "," + selectedObject.addInfo.phone)
}
EJWEB
In EJWEB, you can add the custom properties to the nodes and connectors by using addInfo properties of nodes and connector. AddInfo is defined as a dictionary and custom properties are added as a key value pair. This dictionary object can be retrieved in the client side.
ASPX.CS
BasicShape sourceBasicShape = new BasicShape();
sourceBasicShape.Name = "sourceNode";
//Defines addInfo as a dictionary,
Dictionary<string, object> addInfo = new Dictionary<string, object>();
addInfo.Add("email", "gs@gmail.com");
addInfo.Add("phone", "23455678");
//Adds addInfo object to the nodes,
sourceBasicShape.AddInfo = addInfo;
DiagramContent.Model.Nodes.Add(sourceBasicShape);
Connector connector = new Connector();
connector.Name = "Connector";
//Defines addInfo as a dictionary,
Dictionary<string, object> addInfo = new Dictionary<string, object>();
addInfo.Add("email", "gs@gmail.com");
addInfo.Add("phone", "23455678");
//Adds addInfo object to the connectors.
connector.AddInfo = addInfo;
DiagramContent.Model.Connectors.Add(connector);
//Defines click events.
DiagramContent.OnClientClick = "click";
ASPX
<ej:Diagram ID="DiagramContent" runat="server" Height="500px" Width="500px">
</ej:Diagram>
function click(args) {
var diagram = $("#DiagramContent").ejDiagram("instance");
var selectedObject = diagram.model.selectedItems.children[0];
alert(selectedObject.addInfo.email + "," + selectedObject.addInfo.phone)
}
I hope you enjoyed learning about how to add custom properties to nodes and connectors in JavaScript Diagram.
You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
