Node not updating when dropped onto diagram

[David Zeidman]

I have setup a scenario which is a cross between two demo examples:

https://ej2.syncfusion.com/angular/demos/#/tailwind3/diagram/data-binding-with-treeview

and

https://ej2.syncfusion.com/angular/demos/#/tailwind3/diagram/zooming-and-panning

I am dragging an item from a treeview onto a diagram.

My nodes are setup with a setNodeTemplate method that returns a container consisting of text elements and an image element. The content of the text boxes is set from properties in my data model. (In the same way that the zooming and panning demo works).

However, I can drag and drop new nodes onto my diagram.

When I capture the dragEnter event I set up my node with a new data model. The node text values are set up correctly.

When I capture the drop event I prompt the user for a label to appear in the node.

This is where it gets really strange.

If I use the javascript prompt command i.e.

    let label = prompt("What is the name of the area?");
    console.log(`label: ${label}`);

    droppedAreaMapping.areaDefinitionName = droppedAreaMapping.name;
    if (label) {
      droppedAreaMapping.name = label;
    }

    setTimeout(() => {
        droppedAreaMapping.attachedTo = connectToNodeId;
        droppedAreaMapping.hasChild = false;

        connector = { sourceID: connectToAreaMapping.id, targetID: droppedAreaMapping.id };
        diagram.add(connector);
        this.mappings.push(droppedAreaMapping);

        diagram.dataBind();
        diagram.doLayout();
      
    }, 0);

It works. It updates the text on my node.

However, I have created a custom dialog that makes use of Angular Material's Dialog box. When I use that it does not work. The node is not updated.

   this._ConfirmService.prompt("", "Area Name", "OK", "Cancel", "Enter the mapping name").subscribe(label => {

    //let label = prompt("What is the name of the area?");
    console.log(`label: ${label}`);

    droppedAreaMapping.areaDefinitionName = droppedAreaMapping.name;

    if (label) {
      droppedAreaMapping.name = label;
    }

    setTimeout(() => {

        droppedAreaMapping.attachedTo = connectToNodeId;
        droppedAreaMapping.hasChild = false;

        connector = { sourceID: connectToAreaMapping.id, targetID: droppedAreaMapping.id };
        diagram.add(connector);
        this.mappings.push(droppedAreaMapping);

        diagram.dataBind();
        diagram.doLayout();
    }, 0);
   });

The value of label is shown correctly in the console log. It is definitely a string. 

Any suggestions? I feel like I have checked the obvious.

I am somewhat uncertain why the example uses setTimeout (but it does not work if it is not there). This does not feel very Angular

[Dhakshin Prasath Dhanraj]

Hi,

From the portion of code you have shared, we are unable to fully understand the issue and resolve it. To proceed with validating and resolving the problem, we kindly request a simplified sample and a video demonstrating the issue replication.

This will help us gain better clarity and work towards an effective solution.

Looking forward to receiving the requested information!

Regards,

Dhakshin

[David Zeidman]

Hi,

Thanks for your response. I have attempted to trim down the code. It is, unfortunately still a few files but hopefully you are able to work with it anyway.

As it is currently it works but that is using the javascript prompt. 

To see the problem, in app.component.ts, comment out line 191 and uncomment lines 188 and 209.

Here is a video of the working version:

https://somup.com/cTV6lrdm5H

and here is a video of the broken version:

https://go.screenpal.com/watch/cTV6lZneEUJ

The label is not updated but we can see it is being returned from the custom input component. I output the label to the console as also shown.

Thanks

David

[Dhakshin Prasath Dhanraj]

Hi,

In Angular, when using a node template for node creation, you may face an issue where the data of the node cannot be changed directly. To address this, you need to:

1. Set the data to the node's wrapper.
2. Call the doLayout method to refresh the layout and reflect the changes.

We have modified the sample you provided to demonstrate this approach and attached it as zip file for your reference. Please review the updated sample for implementation details.

Key Steps in the Implementation:

• During the drop event, the ID of the dropped node was captured.
• When updating the text by clicking the Set button in the prompt, we used the getObject method to fetch the specific node. The previously stored node ID was passed as a parameter to the getObject method, allowing us to accurately locate the corresponding node in the diagram.
• Once the node was retrieved, the new value from the prompt was applied to the node.
• Finally, the doLayout method was called to update the layout and reflect the changes.

This approach ensures that the correct node is updated dynamically within the diagram.

We hope this solution resolves your concern. Should you have further questions or require additional assistance, please feel free to reach out.

Regards,

Dhakshin

[David Zeidman]

Thank you for putting that together. It is appreciated.

It works using the Syncfusion dialog but, for some strange reason, it does not work using the Angular Material dialog even if I use the same technique that you use.

I thought at first that it may be due to label being returned within an observable (which your dialog does not do) but even when I return a fixed value via an observable it works. I am somewhat reluctant to give up my dialog as we use it throughout our project but it really seems strange.

Also, I just realised that both of our zipped up codes include our Syncfusion licence number. Is there a way of removing the code from the posts? Or should we cancel the licence number somehow?

[Dhakshin Prasath Dhanraj]

Hi,

When we attempted to resolve your issue using the sample you provided, we encountered some difficulties integrating the Angular Material dialog box in your code. Specifically, we were unable to import the InputDiagramComponent from the path "../controls/input-dialog.component". We have attached a screenshot for your reference. As a result, we used our Syncfusion Angular dialog box to resolve the issue.

We have requested our forum support team to remove the attached samples from the responses.

If you have any further queries regarding sensitive data or sample code, please feel free to create a support ticket using the following link:

Support Portal Link: https://support.syncfusion.com/support/tickets/create

Regards,

Dhakshin