How to create HTML node at runtime using add method in JS Diagram?
Create script template at runtime and assign it to HTML node
We can create a HTML node at runtime using add method. Also we have created the script template dynamically and rendered the HTML node in JavaScript Diagram.
function createTemplateNode(node) {
//create an script template
var script = document.createElement("script");
//create a name with random id and assign it to the node name and templateId
var name = node.name + ej.datavisualization.Diagram.Util.randomId() + "_htmlTemplate";
//set an id to the script template
ej.datavisualization.Diagram.Util.attr(script, { id:name, type: "text/x-jsrender" });
//create a div element
var container = document.createElement("div");
//set an attribute to div element
ej.datavisualization.Diagram.Util.attr(container, { "style": "height: auto; width:auto; display: inline-block;" });
var div = document.createElement("div");
var height = (100 / node.addInfo.length);
ej.datavisualization.Diagram.Util.attr(div, { "style": "height: " + height + " %; display: block; border-style:solid;border-width:1px;background-color:lightgrey" });
var span = document.createElement("span");
span.appendChild(document.createTextNode("TOTAL COUNTS(SYMBOL)"));
div.appendChild(span);
//append the div element to the script template
script.appendChild(div.cloneNode(true));
container.appendChild(div);
document.body.appendChild(container);
document.body.appendChild(script);
node.height = container.offsetHeight;
node.width = container.offsetWidth;
//set an node template
node.templateId = name;
document.body.removeChild(container);
return node;
}
$("#diagram").ejDiagram({
//define nodeCollectionChange event
nodeCollectionChange: nodeCollectionChange,
});
function nodeCollectionChange(evt) {
var node = evt.element;
node = createTemplateNode(node);
}
var node = {
name: "Node1", offsetX: 200, offsetY: 200, type: "html", addInfo: [["Type", "Off", "Enl", "Ciy", "Tot", "CMe", "Oth", "Gtot"]],
};
//render the node at runtime
$("#diagram").ejDiagram("instance").add([node]);
Conclusion
I hope you enjoyed learning on how to create HTML node at runtime using add method in JS 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 JavaScript Diagram 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!