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. Image for the cookie policy date

How to create events for elements which are added as inner html

Please let us know how to add event for the button which is available in the html.

let html: string = '<div style="height:100%;width:100%;"><button class="btn success" >Parameter 1</button></div>'

this.node = this.createHtmlNode('idHead1', 120, 110, 900, 310, html);


following is the function

public createHtmlNode(id: string, width: number, height: number, offsetX: number, offsetY: number, html: string): any {

let node: NodeModel = {}

node.id = id;

node.width = width;

node.height = height;

node.offsetX = offset;

node.offsetY = offset;

node.shape = {type: 'HTML', content: html};

return node;




7 Replies

RT Ramya Thirugnanam Syncfusion Team January 11, 2019 12:22 PM UTC

Hi Nageshwar, 
Thanks for contacting Syncfusion support. 
Please define the click event in html string and use that function in index.html file. please refer to the code example and sample link below. 
Code example: 
let html: string = '<div style="height:100%;width:100%;"><button class="btn success" onclick=”data()” >Parameter 1</button></div>' 
function data() { 
Ramya T 

NR Nageswara Reddy January 18, 2019 11:52 AM UTC

Hi Ramya,

Thank you soo much for immediate reply,  the given solution is working. But based on this event I need to update some other nodes in the same diagram, how do I communicate back to the same diagram and update the other nodes?

Please update us ASAP.


SG Shyam G Syncfusion Team January 18, 2019 12:26 PM UTC

Hi Nageshwar, 

We have created a sample in which we rendered the rectangle node in diagram. when we click on the button(html node button), we update the color for an rectangle node in diagram. please refer to the sample link below. 

Shyam G 

NR Nageswara Reddy January 21, 2019 07:29 AM UTC

Hi Shyam,

Thank you for your response. With the given sample application,  I can able to update the diagram object. But I need to do this logic in module related ".ts" file not in index.html file because in our application this kind of actions and validations are more. So please let us know to how do we access the events in module related files.

Thanks in advance, Please reply as soon as possible.


SG Shyam G Syncfusion Team January 21, 2019 09:40 AM UTC

Hi Nageshwar, 
We can register HTML node button click event only after the diagram is rendered. So we have used diagram created event which triggers only when the diagram component rendering is completed. In this event, we have registered the HTML node button click event and changed the appearance of node color. Please refer to below sample link. 
Shyam G 

NR Nageswara Reddy January 21, 2019 11:07 AM UTC

Hi Shyam

Thanks for the reply, but the given sample showing error('ss' is undefined) while click. Not sure on how to subscribe the data1 method to the click event of the html node. Please check and update us.

Thanks & Regards

SG Shyam G Syncfusion Team January 21, 2019 11:36 AM UTC

Hi Nageshwar, 
Sorry for the inconvenience. 
In our previous sample, our changes are not reflected. Now, we have modified the sample and provided the link below. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon