Adding bezier curves to make large diagrams readable

1 Answer 125 Views
Diagram
Benedikt
Top achievements
Rank 1
Iron
Benedikt asked on 09 May 2021, 05:16 PM | edited on 12 May 2021, 01:29 PM

I've used telerik rad diagram for creating a kind of blue-print system (flow system). In this flow-system we have a lot of nodes and connections. Is it possible to show connections like this?

 

At the moment it looks like this:

I've tried to work with the bezier-connection-type, but that didn't work as expected:

EDIT

Style while drag&drop:

After the drop it looks like this:

 

Thanks a lot!

1 Answer, 1 is accepted

Sort by
1
Dilyan Traykov
Telerik team
answered on 12 May 2021, 10:50 AM

Hello Benedikt,

Thank you for the provided images.

I was able to achieve a result similar to the one from the first screenshot by using the Bezier ConnectionType and setting its BezierTension property to 3:

        <telerik:RadDiagram x:Name="_diagram">
            <telerik:RadDiagramShape x:Name="one"
                                     Position="60 60" />
            <telerik:RadDiagramShape x:Name="two"
                                     Position="250 250" />
            <telerik:RadDiagramConnection ConnectionType="Bezier"
                                          BezierTension="3"
                                          Source="{Binding ElementName=one}"
                                          Target="{Binding ElementName=two}" />
        </telerik:RadDiagram>

Here's the result I observe with this setup:

Can you please let me know how this differs from your bezier connection type setup? If possible, please send over a small sample project demonstrating your scenario either by providing a download link to the project or by opening a new support ticket.

Regards,
Dilyan Traykov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Benedikt
Top achievements
Rank 1
Iron
commented on 12 May 2021, 01:27 PM

Thanks for the reply! One thing is a little strange. My "connection-style" is only applied during drag and drop. After that the lines are straight again. See new screenshots.
Dilyan Traykov
Telerik team
commented on 17 May 2021, 09:19 AM

This is rather strange. I tried to replicate the same behavior at my end but the connections are correctly drawn both when dragging and after releasing:

With this said, I assume this may be caused by some custom logic. Can you please isolate this behavior in a small sample project and either attach it here or open a new support ticket if the project contains sensitive information? Thank you in advance for your cooperation on the matter. I will be awaiting your reply.

Tags
Diagram
Asked by
Benedikt
Top achievements
Rank 1
Iron
Answers by
Dilyan Traykov
Telerik team
Share this question
or