How to cancel deleting Nodes before get the confirm result?

[Pham Van Sy]

Hi team!
I have some nodes on the diagram control, when I press delete key to delete these nodes, I have show a dialog to confirm about the deleting progress.

if I select No then it's not to delete , I have assigned the cancel property to true, but it's seem deleted before I get the confirm result.
This is my source code when I delete the nodes

I want to know have a solution to cancel deleting when I got the confirm result?
Thanks!
Sy

[Moulidharan Gopalakrishnan]

Hi,

We have prepared a sample for your requirement. Handling dialog box responses within the collection change event is not advisable, as the event is already triggered and cannot wait for an asynchronous response. Instead, we have achieved your requirement using the CommandManager option by modifying the delete key control. A dialog opens upon pressing the keyboard delete button, allowing confirmation for deletion. Please refer to the documentation and sample for further details.

Documentation: Commands in Angular Diagram component | Syncfusion
Sample : Szsto1 (forked) - StackBlitz

Regards,
Moulidharan G

[Pham Van Sy]

Thank for your reply!
I have applied your code to my project, it work fine.

But I have two questions related to this one

Question 1: When I select multiple nodes in the Diagram and press delete key to delete, the confirm dialog only show one time and it only remove a node, so I want to know have any solution to show confirm dialog corresponding with the number of nodes are deleted.

Question 2: In the my application, I can delete the node by multiple ways, maybe click a button or context menu to delete, so have  any solution to assign these command to Delete command that you have defined?

Please help me to resolve these question
Thanks!

Sy

[Moulidharan Gopalakrishnan]

Hi,

Query	Response
Question 1: When I select multiple nodes in the Diagram and press delete key to delete, the confirm dialog only show one time and it only remove a node, so I want to know have any solution to show confirm dialog corresponding with the number of nodes are deleted.	In the provided sample, we passed the first selected item as a parameter to the remove(this.diagram.selectedItems.nodes[0]) method, which only deletes one node. However, you can directly call the remove() method without parameters to delete multiple items or a single item.
Question 2: In my application, I can delete the node by multiple ways, maybe click a button or context menu to delete, so have any solution to assign these command to Delete command that you have defined?	We have prepared a sample to achieve your requirement. We can just call the  this.executeDeleteCommand() on delete button click and context menu delete option and achieve your requirement. Please refer the sample

Sample: https://stackblitz.com/edit/angular-kpdkhu-9b3but?file=src%2Fapp.component.ts,src%2Fapp.component.html

Regards,
Moulidharan

[Pham Van Sy]

Thank for your answer!
For the question 1, I can use the Remove() method to delete multiple items but the confirm dialog only show one time, I want to show the confirm dialog foreach node when the node is deleted. For example, I have 2 nodes in the Diagram(Node 1, Node 2), when I delete these nodes, I want to show confirm dialog with message "delete node 1", when I got the confirm result, the node 2 will be confirm with the message 'Delete Node 2'
Base on the above, Do you have any solution to resolve this one?

For the question 2. it's working fine!

Please let me know you comments.
Thank You!

Sy

[Moulidharan Gopalakrishnan]

Hi,

We have prepared a sample for your requirement. In the sample, we iterated through the selected nodes and connectors, opening a confirmation dialog box for each deletion operation. Please refer to the sample.

Sample: https://stackblitz.com/edit/angular-kpdkhu-w4qssy?file=src%2Fapp.component.ts

Regards,
Moulidharan

[Pham Van Sy]

Thank you so much
It's working as I expected
Thanks!

[Moulidharan Gopalakrishnan]

Hi,

We are glad your requirement has been met. If you have any further questions or need additional assistance, please feel free to ask.

Regards,
Moulidharan