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

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

Reply | Reply with quote

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() {

}

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

Regards,

Ramya T

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Regards,

Shyam G

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Regards,

Shyam G

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

Regards,

Shyam G

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US