Add functions on Node object

Hello,

Is it possible to add onClick event (or any other events) on Node object?

For example, I want to run the following function when a user is clicking on a node:

const myFunction = () =>{
window.alert("yay");
}

and on the Node object I would like to set:
 let nodesNodeModel[] = [
    {
      id: "node1",
      height: 250,
      width: 180,
      offsetX: 100,
      offsetY: 200,
      shape: {
        type: 'Image',
        source: `${milk_tank}`,
      },
      onClick: myFunction
    },

1 Reply 1 reply marked as answer

GG Gowtham Gunashekar Syncfusion Team March 4, 2021 11:59 AM UTC

Hi Eden, 
 
We have added a sample link to demonstrate how to use click event to raise a windows alert for the specific node. In the sample we have added the two nodes, while click on the node which has id  “node1”, the window’s alert will trigger. 
 
 
Code snippet: 
 
   <DiagramComponent 
              id="diagram" 
              ref={diagram => (diagramInstance = diagram)} 
              width={"100%"} 
              height={"580"} 
              nodes={nodes} 
              snapSettings={{ constraints: SnapConstraints.None }} 
              click={args => { 
                if (args.element.id == "node1") { 
                   window.alert("yay"); 
                  } 
              }} 
            /> 
 
 
Regards 
Gowtham 


Marked as answer
Loader.
Up arrow icon