We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create a HTML node dynamically

Platform: JavaScript |
Control: ejDiagram |
Published Date: February 27, 2016 |
Last Revised Date: May 30, 2019

 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.

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]);

 

ADD COMMENT
You must log in to leave a comment
Comments
Joseph E Schmalhofer III
Apr 11, 2016
I need to convert data contained in the addInfo block that is already in HTML into something that can be displayed in an ejDiagram node. Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon