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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

For the newly added nodes/connectors, properties/ constraints which are set are not getting applied

Thread ID:





147331 Sep 6,2019 07:54 AM UTC Sep 11,2019 07:22 AM UTC React - EJ 2 5
Tags: Diagram
Sudhanshu Jain
Asked On September 6, 2019 07:54 AM UTC

Hi ,
Below is the issue and expected output,

Issue: If a newly added node is set with an annotation or a connector is set with a constraint then the change is not reflected.
Only on save and re-rendering of the diagram component the changes are reflected.

Expected output: When a new node/connector is added from the symbol palette, whatever the properties are set on the respective node/connector should be reflected on addition to the flow

Please let me know if there is any solution to achieve the expected output.

Shyam G [Syncfusion]
Replied On September 9, 2019 05:45 AM UTC

Hi Sudhanshu Jain, 

Could you please confirm us when we drag a node/connector from the palette onto the diagram, the properties are not added in the diagram? If yes, we are unable to replicate an issue at our end. In the below sample, we have added one node and connector in the symbol palette. For node, we have added an annotation and for connector we have removed drag constraints. The properties will be reflected once the shape is added in the diagram. 
If we misunderstood your requirement, please share us more details such as explain your requirement in detail with video or screenshot. 

Here is the sample for your reference. 

Shyam G 

Sudhanshu Jain
Replied On September 9, 2019 06:22 AM UTC

Hi Shyam,

The solution you provided was helpful, we were trying to provide the data dynamically when a node/connector is dragged based on type of the node/connector.
Is it possible to add the properties dynamically instead of storing them before?

Thank you

Shyam G [Syncfusion]
Replied On September 10, 2019 05:35 AM UTC

Hi Sudhanshu Jain, 

To achieve your requirement, please change the node/connector properties in dragEnter event. This event triggers when a dragged node from palette with mouse enters a diagram. 
Please refer to a code example and sample below. 
Code example: 
//DragEnter event. 
 dragEnter={(args) => { 
            let obj = args.element; 
            //check whether is a node 
            if (obj instanceof Node) {  
                //change the node annotation. 
                obj.annotations = [{ 
                  content: 'NewNode' 
                obj.style = { fill: "#357BD2", strokeColor: "white" }; 
           //check whether is a node 
            if(obj instanceof Connector) { 
              //change the connector properties 
              obj.constraints= ConnectorConstraints.Default &~ ConnectorConstraints.Drag; 

Shyam G 

Sudhanshu Jain
Replied On September 11, 2019 06:42 AM UTC

Thanks Shyam, your solution was needful. 

Shyam G [Syncfusion]
Replied On September 11, 2019 07:22 AM UTC

Hi Sudhanshu Jain,  
Thanks for your update. 
Shyam G 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon