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

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.

Thanks

Reply | Reply with quote

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.

Sample: https://stackblitz.com/edit/react-kdtj6j?file=index.js

Regards,

Shyam G

Reply | Reply with quote

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

Reply | Reply with quote

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:

<DiagramComponent

//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.style.strokeColor="red";

obj.constraints= ConnectorConstraints.Default &~ ConnectorConstraints.Drag;

}

}}

/>

Help documentation: https://ej2.syncfusion.com/react/documentation/api/diagram/#dragenter

Sample: https://stackblitz.com/edit/react-kdtj6j-sq9mmq?file=index.js

Regards,

Shyam G

Reply | Reply with quote

Sudhanshu Jain

Replied On September 11, 2019 06:42 AM UTC

Thanks Shyam, your solution was needful.

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 11, 2019 07:22 AM UTC

Hi Sudhanshu Jain,

Thanks for your update.

Regards,

Shyam G

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147331	Sep 6,2019 07:54 AM UTC	Sep 11,2019 07:22 AM UTC	React - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US