Ho w to get the label of the node in event

RakhiS

Asked On January 31, 2020 08:20 AM UTC

Hi,

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On February 3, 2020 11:22 AM UTC

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

Reply | Reply with quote

RakhiS

Replied On March 4, 2020 03:57 AM UTC

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?

Reply | Reply with quote

Suganthi Karuppannan [Syncfusion]

Replied On March 4, 2020 12:13 PM UTC

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.

Reply | Reply with quote

RakhiS

Replied On March 5, 2020 04:52 AM UTC

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?

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On March 5, 2020 10:39 AM UTC

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
151113	Jan 31,2020 08:20 AM UTC	Mar 5,2020 10:39 AM UTC	Angular - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US