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 events for elements which are added as inner html

Thread ID:

Created:

Updated:

Platform:

Replies:

141940 Jan 11,2019 09:01 AM UTC Jan 21,2019 11:36 AM UTC Angular - EJ 2 7
loading
Tags: Diagram
Nageswara Reddy
Asked On January 11, 2019 09:01 AM UTC

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 [Syncfusion]
Replied On 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>' 
 
index.html 
 
function data() { 
 
    } 
 
 
 
 
Regards, 
Ramya T 


Nageswara Reddy
Replied On 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.

Regards
Nageswar

Shyam G [Syncfusion]
Replied On 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. 


Regards, 
Shyam G 


Nageswara Reddy
Replied On 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.

Regards
Nageswar

Shyam G [Syncfusion]
Replied On 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. 
 
 
Regards, 
Shyam G 


Nageswara Reddy
Replied On 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
Nageswar


Shyam G [Syncfusion]
Replied On 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. 
 
 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

;