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

[Nageswara Reddy]

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

this.nodes.push(this.node);

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;

};

Regards

Nageswar

[Ramya Thirugnanam]

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>' 

 

index.html 

 

function data() { 

 

    } 

 

 

 

Sample link: https://stackblitz.com/edit/angular-98zbbb 

 

Regards, 

Ramya T 

[Nageswara Reddy]

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.

Regards

Nageswar

[Shyam G]

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. 

Link: https://stackblitz.com/edit/angular-98zbbb 

Regards, 

Shyam G 

[Nageswara Reddy]

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.

Regards

Nageswar

[Shyam G]

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. 

 

Sample: https://stackblitz.com/edit/angular-98zbbb-4b1gmj 

 

Regards, 

Shyam G 

[Nageswara Reddy]

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

Nageswar

[Shyam G]

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. 

 

Sample: https://stackblitz.com/edit/angular-98zbbb-nu8n7p 

 

Regards, 

Shyam G