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

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

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.

5 Replies

SG Shyam G Syncfusion Team 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 

SJ Sudhanshu Jain 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

SG Shyam G Syncfusion Team 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 

SJ Sudhanshu Jain September 11, 2019 06:42 AM UTC

Thanks Shyam, your solution was needful. 

SG Shyam G Syncfusion Team September 11, 2019 07:22 AM UTC

Hi Sudhanshu Jain,  
Thanks for your update. 
Shyam G 

Live Chat Icon For mobile
Up arrow icon