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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add a button to a node to show the node details

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
loading
Tags: Diagram
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.. 

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")  
    }  
   
 
 
 
Regards, 
Shyam G 


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/ 

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. 
 
 
Regards, 
Shyam G 


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!

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  


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

Live Chat Icon For mobile
Live Chat Icon