Connector Link

Question

Hi, i want to show alert when i connect the connector to the node, when it linked (goes red). i want to show alert

Taleb Fahmawi · Accepted Answer

Hi,

Thank you for your response
it doesn't work with me

i did the following in the connectonChanged, and i think it works fine now

if (args.state === "Changed" && args.connector.targetID !== ""){
                
                       alert(args.connector.targetID);         
            }

Arunkumar Manoharan · Answer

Hi Taleb,We have created a sample to show alert when the connector connects the
node. by using connectionchange event when the connection changes for the
connector this event gets triggered and alert message is displayed. For more
information, please refer to the below code example and sample Link.

code snippet:

$("#diagram").ejDiagram({
                      nodes: nodes,
                      connectors: connectors,
                      width:
  "1000px",
                      height: "100%",
                      defaultSettings: {
                          //set the default
  properties of the nodes.
                          node: {
                              width: 100, height:
  40, fillColor: "white",
                          },
                      },
                      connectionChange:
  connectionChange,
                  });
   
  function
  connectionChange(args) {
              if (args.connection &&
  args.connection._type === 'node' && args.element.type ===
  "connector") {
                  alert('Connector Connected')
   
              }
          }

Sample link: https://jsplayground.syncfusion.com/fturl5jmRegards,Arun Kumar.

Taleb Fahmawi · Answer

I have another question if you could please help mei need to show alert when the delete button is pressed, does any thing in syncfusion support that

i tried tis code but it's not working, since i put e.datavisualztion the diagram doesn't even initiatecommandManager:{             commands: {                 "delete": {                     canExecute: function (args) {                         if (args.model.selectedItems.children.length > 0) {                             alert("Deleted");                        }                     },                     execute: function (args) {                              alert("Deleted");                        // do your custom actions                     },                     gesture: {                         key: ej.datavisualization.Diagram.Keys.Delete,                     }                 }             }         },

Arunkumar Manoharan · Answer

Hi Taleb,Please use commandManager to achieve your requirement. We have
created a sample in which we have defined the alert in the command manager
which triggers when we press the delete key.

code snippet:

commandManager: {
                      commands: {
                          //Commands to clone
  the selected item
                          "clone": {
                              //Method to
  define whether the command can be executed at the current moment
                              canExecute:
  function (args) {
                                  //Defines the
  command can be executed, if and only if the selection list is not empty.
                                  alert('Delete
  button is Pressed')
                              },
   
                              gesture: {
                                  key:
  ej.datavisualization.Diagram.Keys.Delete,
                              }
                          }
                      }
                  }

And to know more about custom commands we have attached our
UG-Documentation link.

UG-Documentation link: https://help.syncfusion.com/js/diagram/commands#custom-commandRegards,Arun Kumar.Attachment: customCommandKeys_e3ea867c.zip

Taleb Fahmawi · Answer

Hi, thanks for respondingstill not workingi have problem with this :

key: ej.datavisualization.Diagram.Keys.Delete,

while this is (in the code above) the diagram doesnt even

initiatehere is my code: var diagram = new ej.diagrams.Diagram({        width: '100%', height: '645px',        nodes: nodes,connectors: connectors,        snapSettings: { horizontalGridlines: gridlines, verticalGridlines: gridlines },        commandManager: {            commands: {                //Commands to clone the selected item                "clone": {                    //Method to define whether the command can be executed at the current moment                    canExecute: function (args) {                        //Defines the command can be executed, if and only if the selection list is not empty.                        alert('Delete button is Pressed')                    },                    execute: function(){                        alert("hiii")                    },                    gesture: {

key: ej.datavisualization.Diagram.Keys.Delete

}                }            }        },

Shyam G · Answer

Hi Taleb,The command manager executes properly while pressing the
delete key. Please refer to a video below. Instead of using commandManager, you
can track the delete key press in the nodeCollectionChange and
connectorCollectionChange event. This event gets triggered while adding or
deleting node and connector respectively. Please refer to the modified sample
below. Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/deletekeyissuevideo1299527898Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/customCommandKeys-919838134Regards,Shyam G