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

Disable userhandles for connector only

Is there a proper way just to disable user handles for connectors only? Like constraints?

4 Replies 1 reply marked as answer

BM Balasubramanian Manikandan Syncfusion Team January 11, 2023 11:16 AM UTC

You can use selectionChange event and selectorConstraints to remove the userhandle from the specific element (Node/Connector). Refer to the below mentioned code snippet, documentation and sample.

Code Example:


  public selectionChange(args: ISelectionChangeEventArgs): void {

    if (args.newValue.length > 0 && args.newValue[0] instanceof Node) {

      this.diagram.selectedItems = {

        constraints: SelectorConstraints.All | SelectorConstraints.UserHandle,

        userHandles: this.handles,


    } else if (args.newValue[0] instanceof Connector) {

      this.diagram.selectedItems = {

        constraints: SelectorConstraints.All & ~SelectorConstraints.UserHandle,








KB Khadeeja Basharat January 11, 2023 11:55 AM UTC

Thank you. This is a good workaround for now. But When I click on node and switch to the connector, I can see a glitch. The glitch is that the user handles the show for a few milliseconds and disappears. 

Wouldn't it be better if it was managed in the constraints for connector and nodes separately? 

GD Gobinath Dhamotharan Syncfusion Team January 12, 2023 02:00 PM UTC

We recreated the sample to achieve your requirement. We have the disableConnectors or disableNodes property to make the user Handle in the diagram visible or not. Please refer to the below sample for your reference.

Code Snippet

  public handles: UserHandleModel[] = [


      name: 'clone',


        'M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5, 28.9h-30c-3, 0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z',

      visible: true,

      offset: 0,

      side: 'Bottom',

      margin: { top: 0, bottom: 0, left: 0, right: 0 },

      disableConnectors: true,







Marked as answer

KB Khadeeja Basharat January 17, 2023 07:04 AM UTC

Thank you so much. This is the perfect solution.

Live Chat Icon For mobile
Up arrow icon