We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi, when I am adding flowshape or a link into the diagram space by dragging and droping into it, I am opening a pop up to get the name and description from the end user, now I want that if a user click on cancel or close icon of pop up without adding any info or without clicking on save button , it should also remove that recent added element from the diagram space. please help me
Hi rakhi,
We can remove the element in diagram using diagram.remove() method. When you are closing the Popup, you need to use diagram remove method to remove the current element. Please refer to the documentation below for your reference.
Hi, thanks for the solution, it worked.
Another thing is when I am clicking any element (let say node), and if I press delete from keyboard it itself get vanished from the diagram area and its connected connectors also.
What I want is: it should not get vanished, it should only get removed when I am pressing no button and cross icon on my confirmation box . Please help me out
Use CommandManager to prevent node deletion on delete key press. Refer to the below mentioned documentation, code example and sample.
Documentation
|
https://ej2.syncfusion.com/angular/documentation/diagram/commands#command-manager |
Code Snippet
|
Prevent deletion in keys
public commandManager = { commands: [ { //Method to define whether the command can be executed at the current moment canExecute: function () { var diagram = (document.getElementById('diagram') as any) .ej2_instances[0]; //Defines that the delete command can be executed, if and only if the selection list is not empty. if ( diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0 ) { return false; } return true; }, //Defines that the delete command has to be executed on the recognition of key press. gesture: { key: Keys.Delete, }, }, ], };
For Delete in Button
public Delete() { if (this.diagram.selectedItems.nodes.length > 0) { this.diagram.remove(this.diagram.selectedItems.nodes[0]); } else if (this.diagram.selectedItems.connectors.length > 0) { this.diagram.remove(this.diagram.selectedItems.connectors[0]); } this.diagram.dataBind(); } |
Sample
|
https://stackblitz.com/edit/angular-cehghz-jbwwjg?file=src%2Fapp.component.html |
Thanks for your reply but please read my requirements again
Now, you can delete the nodes using user-handles and we prevented the delete operation in delete key pressing. Refer to the below-mentioned sample.
Sample
|
https://stackblitz.com/edit/angular-cehghz-zzxu14?file=src%2Fapp.component.html |
Note: If the provided sample doesn't satisfy your requirement, then please explain what is your requirement in details.
