Diagram add / delete / update node event listener

Question

Hi,I have a requirement where for each node there are properties that i need to update. So, is there a Event Listener where i could get information ( i.e node along with it's id and entire NodeModel ) when a new node is added ( using drag and drop from symbol palette or Ctrl + V  or any other way a new node is added) or deleted ( delete key or Ctrl + X or any other way a node is deleted ).

Aravind Ravi · Accepted Answer

Hi Kaushik, 
 
We have created a sample to notify event when we add or delete node. When we add or delete node in the diagram, collectionChange event gets triggered. In that event if we add any node means then args.state is returned as Addition and for delete args.state is returned as Removal. By using the args.element we can find which element gets deleted or added. Please refer below code snippet and sample 
 




public collectionChange(args: ICollectionChangeEventArgs) { 
    if (args.state === "Changed") { 
      if (args.type === "Addition") { 
        alert("New Node Gets added"); 
      } else { 
        alert(" Node Gets deleted"); 
      } 
    } 
  } 
 
            <ejs-diagram #diagram id="diagram" width="1000px" height="700px" (collectionChange)="collectionChange($event)"> 
 
Sample: https://stackblitz.com/edit/angular-c6dmfq-ialu6z 
 
Regards 
Aravind Ravi

Kaushik · Answer

Working fine. Thank you Aravind.

Aravind Ravi · Answer

Hi Kaushik, 

Thanks for the update. 

Regards 
Aravind Ravi