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

Add a button to a node to show the node details

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

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

5 Replies

SG Shyam G Syncfusion Team 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 () {  
Shyam G 

RC raphael chancey 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/ 

SG Shyam G Syncfusion Team 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. 
Shyam G 

RC raphael chancey 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!

NG Naganathan Ganesh Babu Syncfusion Team 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
Naganathan K G  

Live Chat Icon For mobile
Up arrow icon