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

How to capture drag segment thumb event for connectors

Wanted to understand is there an event support when drag the segment thumb ?

 if not what's the workaround ? could you please share some code snippet to help me understand , I want to capture the segments final properties once the drag is complete. Also please help me understand what are details I need to store about connectors/segments .

 My intension is to save the segment details after state of movement is completed, so that later I can use this information to load the diagram with connectors having it's user managed coordinate, instead of default position.

10 Replies

BM Balasubramanian Manikandan Syncfusion Team February 27, 2023 01:44 PM UTC

We have logged a feature “Support to add event for segment points editing in connector”. We have planned to implement this feature in our volume 1, 2023 release, which is scheduled to release by the month of March, 2022. You can track the status of the feature from the below feedback link.


SD Sourangsu Dasgupta February 27, 2023 03:44 PM UTC

Did you mean - it's scheduled to be released by March'23? can you please update when it's available for consumption?

BM Balasubramanian Manikandan Syncfusion Team February 28, 2023 11:29 AM UTC

Sorry sourangsu,

Volume 1 will be released at the end of March 2023. You can track the status of the feature by using the above link, which was mentioned in the previous update.

SD Sourangsu Dasgupta replied to Balasubramanian Manikandan February 28, 2023 11:34 AM UTC

Thanks, on a related topic- can you please give an example of  ISegmentCollectionChangeEventArgs API in JavaScript (ES5) Diagram API control - Syncfusion handle? and what is the trigger for this event?

BM Balasubramanian Manikandan Syncfusion Team March 1, 2023 11:35 AM UTC

We created a sample for your requirement. Whenever a new segment is added or removed on moving the connector end points, the segmentCollection event will trigger. Refer to the below-mentioned  video recording, code example and sample.

Code Snippet

diagram.segmentCollectionChange = function (args) {





Attachment: SegmentCollection_29c10970.zip

SJ Sivaranjith Jeyabalan Syncfusion Team March 24, 2023 09:48 AM UTC

Hi Sourangu,

We are happy to inform you that we have successfully implemented the "Support to add event for segment points editing in connector" feature, which has been included in Essential Studio 2023 Volume 1 Main Release v21.1.35. We have prepared a word document that explains when the event will be triggered and how it works, along with a code example and sample.  

Sample: https://stackblitz.com/edit/a5gf97?file=index.js,index.html

Attachment: segmentChange_EventJSdoc_2e6a2dde.docx

SD Sourangsu Dasgupta April 25, 2023 08:11 AM UTC

Hi -

Thanks for providing the support to support event for segment points editing, after consuming the 21.1.37 V I am able to use this feature.

However, in my original post, I mentioned that we were trying to save movement of connectors and save it, so that later when we open the diagram , we can automatically load the connectors with user saved coordinates. 

For example, we are moving the nodes, we are saving the offsetX and offsetY , and later when we open the diagram, after loading we override the nodes coordinates from saved values. 

Similarly I want to achieve the same for connectors.

My problem, for example when I drag segments it adds more segments, but I am unable to bind extra segments/modified segments with diagram on load. 

Could you please give an example on how to 

VG Vivisa Ganesan Syncfusion Team April 26, 2023 12:46 PM UTC


You can retain the segments by using our save and load method itself, why are you trying to store it separately.



SD Sourangsu Dasgupta April 26, 2023 01:14 PM UTC

the saveDiagram api fails throughout with below error:

we tried to understand the issue using your non minified js , and apparently it tries to iterate through each property for every element and while doing this - somewhere we get call stack size exceeded error for array.

I have posted this earlier in forum, but didn't get any solution.

We are not sure since we are using custom html template to design nodes we are facing issue or not. As an alternative , we are storing json data for all nodes and it's user defined x,y coordinates, we plan on doing the same connector since saveDiagram api fails.

Please let us know , if there is any alternative way to store/save the connectors position and later load diagram using those modified position.

or how we can troubleshoot saveDiagram api to understand the nature of the problem

VG Vivisa Ganesan Syncfusion Team April 27, 2023 12:40 PM UTC


We have created the sample by enabling serializationSettings property of the diagram. You can avoid the call stack size exceeded error by enabling this property. Refer the below sample and code snippet for reference. Still, if you face any issues, please share us more details such as modify the below sample or JSON.


 serializationSettings: { preventDefaults: true },






Live Chat Icon For mobile
Up arrow icon