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. Image for the cookie policy date

Prevent deletion in the React Diagram component

I want to prevent the immediate deletion of the node when the delete key is pressed. I need to trigger some kind of a modal to confirm the delete action and then, if it was confirmed, proceed with the deletion.

1 Reply 1 reply marked as answer

BM Balasubramanian Manikandan Syncfusion Team January 9, 2023 01:08 PM UTC

Use commandManager to prevent deletion of a node.  We have created a sample in which we can delete node1 and prevent delete action for other nodes. Refer to the below mentioned code example, documentation and sample.

Code Example:

function getCommandManagerSettings() {

  let commandManager = {

    commands: [


        name: 'Delete',

        canExecute: () => {

          if (

            diagramInstance.selectedItems.nodes.length > 0 ||

            diagramInstance.selectedItems.connectors.length > 0

          ) {

            if (diagramInstance.selectedItems.nodes[0].id == 'node1') {

              return true;



          return false;


        execute: () => {



        gesture: { key: Keys.Delete },




  return commandManager;


Documentation Link:






Marked as answer
Live Chat Icon For mobile
Up arrow icon