Add a button to a node to show the node details

raphael chancey

Asked On October 30, 2019 03:44 AM UTC

I am trying to use the annotation template and add a button.. something like this:

https://ej2.syncfusion.com/react/documentation/diagram/labels/#template-support-for-annotation

but no matter what I do I can't get the onClick to bind .. it is almost like the Diagram is swallowing the event.

it works fine just using react..

any ideas?

   template: '<div><input type="button" value="Submit"></div>'

I tried <div><input type="button" value="Submit" onClick="myFunction"></div> .. but this does not work.. but works in normal react..

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On October 30, 2019 04:37 AM UTC

Hi Raphael,

We have created a sample in which we have defined click event for an html content in the html node. Please refer to a code example below.

Code example:

//Initializes the nodes for the diagram

let nodes = [

{

id: "NewIdea",

width: 200,

height: 60,

offsetX: 200,

offsetY: 80,

shape: {

type: 'HTML',

content: '<div style="background:#6BA5D7;height:100%;width:100%;"><button type="button" id="button" style="width:100px"> Button</button></div>',

},

];

export class Default extends SampleBase {

rendereComplete() {

//click event for html content

document.getElementById("button").onclick = function () {

alert("button")

}

Sample: https://stackblitz.com/edit/react-yrjmcd-n83bcg?file=index.js

Regards,

Shyam G

Reply | Reply with quote

raphael chancey

Replied On October 30, 2019 01:46 PM UTC

Thank you for the reply.

The issue with this is only one gets the single button for that one node... since I am adding many nodes I need to bind each button to that function.

I am trying to show the details of the node and add a button on each node.

Also I am adding the nodes programmatically as I build up the diagram so adding this need to bind each button to that function. rerendre is not called as each node is added.

Is there a way to do this inline like 'this.myFunction.bind(this)'?

(and if I can pass in 'this' I can get the node and all the details in the node)

Appreciate any insight/

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On October 31, 2019 09:25 AM UTC

Hi Raphael,

Feature : Native template support for Diagram Template element

Currently we have an option to set an HTML/Native content as a string. We don’t have the support to render HTML/Native as a template and your requirement can be achieved once we provide a template support. We have logged “Native template support for Diagram Template element” as a feature. You can track the status of the feature from the below link.

Link: https://www.syncfusion.com/feedback/7946/native-template-support-for-diagram-template-elements

Regards,

Shyam G

Reply | Reply with quote

raphael chancey

Replied On October 31, 2019 02:27 PM UTC

Ok. Thank you. And just to be clear the idea is we can add buttons to the node that are selectable that we can do something with. In this case an info button. Perhaps using the template support on annotations?

I am adding some details to the node as custom properties ands will show a popup with those.

In the meantime I will use the 'click' event on the Diagram to do this.

Thank you!

Reply | Reply with quote

Naganathan Ganesh Babu [Syncfusion]

Replied On November 1, 2019 09:12 AM UTC

Hi Raphael,

Thanks for your update.

We will consider for the diagram nodes and annotation while implementing the Native template support feature.

Regards,

Naganathan K G

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148677	Oct 30,2019 03:44 AM UTC	Nov 1,2019 09:12 AM UTC	React - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US