Ho w to get the label of the node in event

[RakhiS]

Hi,

Is there any event from which I can get the text of the node or something like on node click event?

[Shyam G]

Hi Rakhi, 

 

Please use textEdit event which triggers once you edit the text and focus out of the text area. In this event, we get a new and the old text in the newValue and oldValue property respectively. Please refer to a help documentation, code example and the sample below. 

 

Help documentation: https://ej2.syncfusion.com/documentation/api/diagram/#textedit 

Code example: 

<ejs-diagram #diagram id="diagram" width="100%" height="700px    (textEdit)="textEdit($event)" > 

</ejs-diagram> 

  textEdit(args:ITextEditEventArgs) { 

     //get a new text and old text 

     console.log(args.newValue); 

     console.log(args.oldValue); 

  } 

Sample: https://stackblitz.com/edit/angular-jggjm8?file=app.component.html 

 

Regards, 

Shyam G 

[RakhiS]

Thank, it worked for me but I am having following question to it that, can I get the id of the node on its selection?

[Suganthi Karuppannan]

Hi Rakhi,   

  

The “selectionChange” event is triggered when the diagram elements gets selected /deselected. By using the event, you can able to get the information about which diagram element has been selected or deselected. Please refer to the below code snippet that shows how to get the selected items information from the selection change event.  

  

public selectionChange(args: ISelectionChangeEventArgs): void {  

    if(args.state == "Changing" && args.type == "Addition"){  

    // get id of selection node/connector  

      console.log(args.newValue[0].id);  

    }  

  }  

  

For more information about “SelectionChangeEventArgs” refer to the below documentation link.  

  

Documentation Link: https://ej2.syncfusion.com/documentation/api/diagram/iSelectionChangeEventArgs/  

  

Please refer to the sample in the below link.  

  

Sample: https://stackblitz.com/edit/angular-jggjm8-8yvy1l?file=app.component.ts  

  

  

Regards,  

Suganthi K. 

[RakhiS]

Thanks, I am getting the id, but I also want to know if the connector is selected or node is selected, How I can find it?

[Shyam G]

Hi Rakhi, 

 

You can use instanceof operator to check whether the selected object is a node or connector. Please refer to a code example and the sample below. 

 

Sample link: https://stackblitz.com/edit/angular-jggjm8-2dqyxt?file=app.component.ts 

public selectionChange(args: ISelectionChangeEventArgs): void { 

    if(args.state == "Changing" && args.type == "Addition"){ 

      // to find the selected object is a node 

      if(args.newValue[0] instanceof Node){ 

       console.log('node'); 

      }  

     // to find the selected object is a connector  

    if(args.newValue[0] instanceof Connector){ 

       console.log('connector'); 

      } 

    } 

  } 

Regards, 

Shyam G