Add a button to a node to show the node details

[raphael chancey]

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

[Shyam G]

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 

[raphael chancey]

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/ 

[Shyam G]

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 

[raphael chancey]

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!

[Naganathan Ganesh Babu]

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