How to add checkboxes to connectors or create a popup window when a connector is clicked in Syncfusion?

[Henrique Nunes]

Hey everyone.

I want to add checkboxes to connectors or create a popup window with checkboxes when a connector is clicked.

Here are some screenshots to illustrate what I want to achieve:

Hypothetical case 1

Hypothetical case 2

In both cases, I also want to add the checkbox values to the annotations section of the connector.

I really tried, but I only managed to add checkboxes to NodeModels, however for connectors I'm very stuck and would appreciate if someone could clear my mind if possible.

Can someone help me with this?

[Vivisa Ganesan]

Hi,

We have created the sample to achieve your requirement. When the connector is clicked, we handle the click event to bind the checkbox in the connector's annotation template property. Please refer to the sample below.

Code-Snippet:

 public click(args:IClickEventArgs){

  if(args.element instanceof Connector){

args.element.annotations[0].template='<div><input type="checkbox" <label>checkbox</label></div> <div><input type="checkbox" <label>checkbox</label></div> <div><input type="checkbox" <label>checkbox</label></div> <div><input type="checkbox" <label>checkbox</label></div>'

  }

else if(args.element instanceof Diagram || args.element instanceof Node){

    this.diagram.connectors[0].annotations[0].template=""

  }

 }

 

Sample:

https://stackblitz.com/edit/angular-9uc3wb-tkgp1p?file=app.component.ts,app.component.html

Regards,

Vivisa

[Henrique Nunes]

That's awesome!

But the selected values are not persisted in memory in your example...

But when click out...



It loses the value, if you click again



Thanks again.

[Vivisa Ganesan]

Hi,

We will validate and update you with more details.

Regards,

Vivisa

[Vivisa Ganesan]

Hi,

Please ignore the last response.

We will validate and update you with more details within two business days.

Regards,

Vivisa

[Sivaranjith Jeyabalan]

Hi Henrique,

We have modified the sample to achieve your requirement. Now the checkbox selection state will be maintained on connector selection. Please find the updated sample below.

Sample: Vregpp (forked) - StackBlitz

Regards,

Sivaranjith